/** Angle bracket syntax (not recommended in JSX) */
let someValue: any = "Hello, TypeScript";
let strLength: number = (<string>someValue).length;

/** 'as' syntax (recommended) */
let someValue2: any = "Hello, TypeScript";
let strLength2: number = (someValue2 as string).length;

/** 1. When working with the DOM */
const myInput = document.getElementById("myInput") as HTMLInputElement;
console.log(myInput.value); // Without assertion, TypeScript doesn't know this is an input

/** 2. When working with API responses */
interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser() {
  const response = await fetch("https://api.example.com/user");
  const data = await response.json();

  return data as User; // Ensuring data has the User structure
}

/** 3. When working with union types */
function processValue(value: string | number) {
  if (typeof value === "string") {
    return (value as string).toUpperCase();
  }

  return value.toFixed(2);
}

/** Ini akan berhasil di compile time tapi gagal di runtime */
const obj = { name: "John" };
const user = obj as User; // TypeScript tidak komplain
// console.log(user.email); // Runtime error: Cannot read property 'email' of undefined

/** Multi-level assertion with unknown */
interface Product {
  id: string;
  price: number;
}

const data: any = { id: "prod-1", price: "100" }; // Note that price is a string

// This would error at compile time:
// const product = data as Product; // Error: price must be a number

// With unknown as intermediary:
const product = data as unknown as Product; // TypeScript doesn't complain
console.log(product.price.toFixed(2)); // Runtime error: price.toFixed is not a function

/** Type guard with typeof */
function formatValue(value: string | number): string {
  if (typeof value === "string") {
    // Here TypeScript knows value is a string
    return value.toUpperCase();
  }

  // Here TypeScript knows value is a number
  return value.toFixed(2);
}

console.log(formatValue("hello")); // "HELLO"
console.log(formatValue(42.123)); // "42.12"

/** Type guard with instanceof */
class Customer {
  name: string;
  email: string;

  constructor(name: string, email: string) {
    this.name = name;
    this.email = email;
  }

  sendEmail(): void {
    console.log(`Sending email to ${this.email}`);
  }
}

class Admin {
  name: string;
  permissions: string[];

  constructor(name: string, permissions: string[]) {
    this.name = name;
    this.permissions = permissions;
  }

  grantAccess(): void {
    console.log(`${this.name} has ${this.permissions.join(", ")} permissions`);
  }
}

function processUser(user: Customer | Admin): void {
  console.log(`Processing user: ${user.name}`);

  if (user instanceof Customer) {
    // Here TypeScript knows user is a Customer
    user.sendEmail();
  } else {
    // Here TypeScript knows user is an Admin
    user.grantAccess();
  }
}

const customer = new Customer("John", "john@example.com");
const admin = new Admin("Alice", ["read", "write", "delete"]);

processUser(customer); // "Processing user: John" "Sending email to john@example.com"
processUser(admin); // "Processing user: Alice" "Alice has read, write, delete permissions"

/** User-defined type guard */
interface Car {
  make: string;
  model: string;
  year: number;
}

interface Motorcycle {
  make: string;
  model: string;
  year: number;
  type: "sport" | "cruiser" | "touring";
}

/** Type guard function with type predicate */
function isCar(vehicle: Car | Motorcycle): vehicle is Car {
  return (vehicle as Motorcycle).type === undefined;
}

function processVehicle(vehicle: Car | Motorcycle): void {
  console.log(`Vehicle: ${vehicle.make} ${vehicle.model} (${vehicle.year})`);

  if (isCar(vehicle)) {
    // Here TypeScript knows vehicle is a Car
    console.log("This is a car");
  } else {
    // Here TypeScript knows vehicle is a Motorcycle
    console.log(`This is a ${vehicle.type} motorcycle`);
  }
}

const car: Car = { make: "Toyota", model: "Corolla", year: 2020 };
const motorcycle: Motorcycle = {
  make: "Honda",
  model: "CBR",
  year: 2021,
  type: "sport",
};

processVehicle(car); // "Vehicle: Toyota Corolla (2020)" "This is a car"
processVehicle(motorcycle); // "Vehicle: Honda CBR (2021)" "This is a sport motorcycle"

/** Discriminated union pattern */
interface SuccessResponse {
  status: "success";
  data: any;
}

interface ErrorResponse {
  status: "error";
  message: string;
}

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse): void {
  // The 'status' property is the discriminant
  if (response.status === "success") {
    // Here TypeScript knows response is a SuccessResponse
    console.log(`Success: ${JSON.stringify(response.data)}`);
  } else {
    // Here TypeScript knows response is an ErrorResponse
    console.log(`Error: ${response.message}`);
  }
}

const successResponse: ApiResponse = {
  status: "success",
  data: { id: 1, name: "Product" },
};
const errorResponse: ApiResponse = { status: "error", message: "Not found" };

handleResponse(successResponse); // "Success: {"id":1,"name":"Product"}"
handleResponse(errorResponse); // "Error: Not found"

/** Basic function type */
type GreetFunction = (name: string) => string;

const greet: GreetFunction = (name) => `Hello, ${name}!`;
console.log(greet("TypeScript")); // "Hello, TypeScript!"

/** Optional and default parameters */
function createUser(
  name: string,
  age?: number,
  isActive: boolean = true
): object {
  return {
    name,
    age: age ?? "Unknown",
    isActive,
  };
}

console.log(createUser("John")); // { name: "John", age: "Unknown", isActive: true }
console.log(createUser("Alice", 30)); // { name: "Alice", age: 30, isActive: true }
console.log(createUser("Bob", 25, false)); // { name: "Bob", age: 25, isActive: false }

/** Rest parameters */
function sum(...numbers: number[]): number {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

/** Function overloading */
// Overload signatures
function convert(value: string): number;
function convert(value: number): string;
function convert(value: boolean): string;

/** Implementation signature */
function convert(value: string | number | boolean): string | number {
  if (typeof value === "string") {
    return parseFloat(value) || 0;
  } else if (typeof value === "number") {
    return value.toString();
  } else {
    return value ? "true" : "false";
  }
}

console.log(convert("42")); // 42 (number)
console.log(convert(42)); // "42" (string)
console.log(convert(true)); // "true" (string)

/** Generic function */
function identity<T>(value: T): T {
  return value;
}

const num = identity<number>(42); // 42 (type: number)
const str = identity<string>("hello"); // "hello" (type: string)
const bool = identity<boolean>(true); // true (type: boolean)

// TypeScript can also infer types automatically
const auto = identity("TypeScript"); // "TypeScript" (type: string)

/** Higher-order function */
type Mapper<T, U> = (item: T) => U;

function mapArray<T, U>(array: T[], mapper: Mapper<T, U>): U[] {
  return array.map(mapper);
}

const numbers = [1, 2, 3, 4, 5];
const doubled = mapArray(numbers, (n) => n * 2);
const strings = mapArray(numbers, (n) => n.toString());

console.log(doubled); // [2, 4, 6, 8, 10]
console.log(strings); // ["1", "2", "3", "4", "5"]

/** Function with this context */
interface Counter {
  count: number;
  increment(): void;
  decrement(): void;
  getValue(): number;
}

function createCounter(): Counter {
  return {
    count: 0,
    increment(this: Counter): void {
      this.count++;
    },
    decrement(this: Counter): void {
      this.count--;
    },
    getValue(this: Counter): number {
      return this.count;
    },
  };
}

const counter = createCounter();
counter.increment();
counter.increment();
counter.decrement();
console.log(counter.getValue()); // 1