let a = "Hello";
    let b = 5;

    // Here we substract a number to a string
    // Javascript does not warn us even if we try to substract a number to a string
    let c = a - b;

    console.log(a) // Hello
    console.log(b) // 5
    console.log(c) // NaN

const user = {
    firstName: "Eikichi",
    lastName: "Onizuka"
}

console.log(user.name)
// user.name does not exist.
// Javascript is unable to tell us field name does not exist

interface Todo {
    id: string
    label: string
    isDone: boolean
}

let todo: Todo = {
    id: "123e4567-e89b-12d3-a456-426614174000",
    label: "Cook",
    isDone: false
}

export interface NewTodo {
    label: string
    isDone: boolean
}

import { Todo } from './types'; // import the Todo type
import TodoItem from './TodoItem'; // TodoItem is the component used to display one todo on the screen

/*
 * We define our Props type
 * It is used to define the props our TodosList will take in parameter
 */
interface Props {
    todos: Array<Todo>,
    onTodoClick?: (todo: Todo) => void
}

/*
 * The TodosList component.
 * We are using our Props type to tell typescript "This component uses the Props type for its parameter".
 * This way, when we use our component, typescript is able to tell you if we try to use a non existing property. 
 * Or if we try to give a bad type to a props.
 */
function TodosList({todos, onTodoClick}: Props) {
    /* 
     * Now we can use todos and the onTodoClick
     * if we try to write : `todos.foo`, typescript can tell us that an array of todos has no "foo" property
     * Same things apply to onTodoClick. If we try to call onTodoClick like this : onTodoClick(10)
     * Typescript is able to say "10 is not a todo, onTodoClick takes a todo as a parameter not a number"
     */
    return (
        <ul>
            { todos.map(todo => <TodoItem key={todo.id} onTodoClick={onTodoClick} todo={todo} />) }
        </ul>
    )
}

export default TodosList

/* Typescript warns us, because hello does not exist as a parameter for our TodosList */
<TodosList hello={"world"} /> 

/* Typescript warns us, because badTodos are missing id and label. */
let badTodos = [{isDone: false}, {isDone: true}];
<TodosList todos={badTodos} />

/*
 * Typescript now knows that num is a number and setNum takes a number as a parameter.
 * Typescript will warn us if we try to call setNum("a"), for example.
 */
const [num, setNum] = useState<number>();

import styles from './App.module.css';
import {v4 as uuidv4} from 'uuid';
import { Todo, NewTodo } from './types';
import { useState } from 'react';
import TodosList from './TodosList';
import AddTodo from './AddTodo';

function App() {

  /*
   * With useState<Todo[]>, typescript knows: 
   * - todos is an Array of todos 
   * - setTodos takes an array of todos as parameter
   */
  const [todos, setTodos] = useState<Todo[]>([
    {id: uuidv4(), label: "Cleaning", isDone: true},
    {id: uuidv4(), label: "Cooking", isDone: false}
  ])

  function toggleTodo(todo: Todo) {
      setTodos(todos.map(
          t => t.id === todo.id ? {...t, isDone: !t.isDone} : t
      ))
  }

  function addTodo(newTodo: NewTodo) {
    /*
     * If we try to pass a non todos array, typescript will tell us
     */
    setTodos([...todos, {
        ...newTodo,
        id: uuidv4()
    }])
  }

  return (
    <div className={styles['App']}>
    {/* Since useState is typed, typescript knows that we are passing a todos array in TodosList */}
        <TodosList onTodoClick={toggleTodo} todos={todos} />
        <AddTodo onNewTodoSubmit={addTodo} />
    </div>
  );
}

export default App;