import { useReducer } from "react";

import type { BasicFilters, CurveChannel, CurvePoint, FilterState } from "./lib/types";

import { DEFAULT_FILTER_STATE } from "./lib/types";

import { CameraView } from "./components/CameraView";

import { ControlPanel } from "./components/ControlPanel";

import { FullscreenButton } from "./components/FullscreenButton";

import "./App.css";

type Action =

  | { type: "SET_BASIC"; key: keyof BasicFilters; value: number }

  | { type: "SET_CURVE"; channel: CurveChannel; points: CurvePoint[] }

  | { type: "SET_ALL"; state: FilterState }

  | { type: "RESET" };

function reducer(state: FilterState, action: Action): FilterState {

  switch (action.type) {

    case "SET_BASIC":

      return { ...state, basic: { ...state.basic, [action.key]: action.value } };

    case "SET_CURVE":

      return { ...state, curves: { ...state.curves, [action.channel]: action.points } };

    case "SET_ALL":

      return action.state;

    case "RESET":

      return { ...DEFAULT_FILTER_STATE };

    default:

      return state;

  }

}

function App() {

  const [filterState, dispatch] = useReducer(reducer, DEFAULT_FILTER_STATE);

  return (

    <div className="app">

      <CameraView filterState={filterState} />

      <FullscreenButton />

      <ControlPanel

        filterState={filterState}

        onBasicChange={(key, value) => dispatch({ type: "SET_BASIC", key, value })}

        onCurveChange={(channel, points) => dispatch({ type: "SET_CURVE", channel, points })}

        onSetAll={(state: FilterState) => dispatch({ type: "SET_ALL", state })}

        onReset={() => dispatch({ type: "RESET" })}

      />

    </div>

  );

}

export default App;