import * as ReactDOM from "https://cdn.skypack.dev/react-dom@18.2.0";
import * as React from "https://cdn.skypack.dev/react@18.2.0";

// useState
function App() {
  const [color, setColor] = React.useState("yellow");
  
  const [car, setCar] = React.useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });
  
    const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "green" }
    });
  }
  
  return <>
    <h1>String</h1>
    <p>My favorite color is {color}!</p>
    <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    <br/>
    <h1>Object</h1>
    <p>My {car.brand} is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Green</button>
  </>
}

// useEffect
function Counter() {
  const [count, setCount] = React.useState(0);
  const [calculation, setCalculation] = React.useState(0);

  React.useEffect(() => {
    setCalculation(() => count * 2);
  }, [count]); // if count updates, update calculation variable

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
      <p>Calculation: {calculation}</p>
    </>
  );
}

function Timer() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    let timer = setTimeout(() => {
      setCount((count) => count + 1);
  }, 1000);

  return () => clearTimeout(timer)
  }, []);

  return <h1>I've rendered {count} times!</h1>;
}

// useRef
function Pointer() {
  const inputElement = React.useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <p>
        <input type="text" ref={inputElement} />
        <button onClick={focusInput}>Focus Input</button>
      </p>
    </>
  );
}

function Before() {
  const [inputValue, setInputValue] = React.useState("");
  const previousInputValue = React.useRef("");

  React.useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);
  
  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,  document.getElementById("usestate")
)

ReactDOM.render(
  <React.StrictMode>
    <Counter />
    <Timer />
  </React.StrictMode>,  document.getElementById("useeffect")
)

ReactDOM.render(
  <React.StrictMode>
    <Pointer />
    <Before />
  </React.StrictMode>,  document.getElementById("useref")
)