import { Formik, Form, Field } from "formik";
import type { CameraSettings, CameraSettingsAction } from "../../../../utils/types";
import { useCameraController } from "../../hooks/useCameraControlConfig";

type CameraControlProps = {
  state: CameraSettings["cameraControls"];
  dispatch: React.Dispatch<CameraSettingsAction>;
};

const CameraControls = ({ state, dispatch }: CameraControlProps) => {
  const { cameraControllerMutation } = useCameraController();
  console.log(state);
  const initialValues = {
    cameraMode: state.cameraControlMode === "auto" ? "auto" : "manual",
    auto: {
      minShutter: state.auto.minShutter,
      maxShutter: state.auto.maxShutter,
      maxGain: state.auto.maxGain,
      exposureCompensation: state.auto.exposureCompensation,
    },
    manual: {
      fixShutter: state.manual.fixShutter,
      fixGain: state.manual.fixGain,
      fixIris: state.manual.fixIris,
    },
  };

  const handleSumbit = (values: {
    cameraMode: string;
    auto: typeof initialValues.auto;
    manual: typeof initialValues.manual;
  }) => {
    cameraControllerMutation.mutate({
      cameraControlMode: values.cameraMode as "auto" | "manual",
      auto: values.auto,
      manual: values.manual,
    });
    dispatch({
      type: "SET_CAMERA_CONTROLS",
      payload: {
        cameraControlMode: values.cameraMode as "auto" | "manual",
        auto: values.auto,
        manual: values.manual,
      },
    });
  };

  return (
    <Formik initialValues={initialValues} onSubmit={handleSumbit} enableReinitialize>
      {({ values }) => (
        <Form className="flex flex-col gap-5 border border-gray-500 p-4 rounded-md">
          <h2 className="text-2xl mb-2">Controls</h2>
          <div className="flex flex-row gap-4">
            <div>
              <label
                htmlFor="auto"
                className={`p-4 border rounded-lg  mb-2 text-lg
            ${values.cameraMode === "auto" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
            hover:bg-[#202b36] hover:cursor-pointer`}
              >
                Auto
                <Field type="radio" id="auto" name="cameraMode" className="sr-only" value="auto" />
              </label>
            </div>
            <div>
              <label
                htmlFor="manual"
                className={`p-4 border rounded-lg  mb-2 text-lg
            ${values.cameraMode === "manual" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
            hover:bg-[#202b36] hover:cursor-pointer`}
              >
                Manual
                <Field type="radio" id="manual" name="cameraMode" className="sr-only" value="manual" />
              </label>
            </div>
          </div>
          {values.cameraMode === "auto" && (
            <div className="flex flex-col gap-2">
              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
                <h3 className="text-lg">Shutter Speed</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
                  <div className="flex flex-col gap-2">
                    <label htmlFor="auto.minShutter" className="text-lg mb-1">
                      Min Shutter:
                    </label>
                    <Field
                      as="select"
                      id="auto.minShutter"
                      name="auto.minShutter"
                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
                    >
                      <option value="1/100">1/100</option>
                      <option value="1/120">1/120</option>
                      <option value="1/250">1/250</option>
                      <option value="1/500">1/500</option>
                      <option value="1/1000">1/1000</option>
                      <option value="1/2000">1/2000</option>
                      <option value="1/5000">1/5000</option>
                      <option value="1/10000">1/10000</option>
                    </Field>
                  </div>
                  <div className="flex flex-col gap-2">
                    <label htmlFor="auto.maxShutter" className="text-lg mb-1">
                      Max Shutter:
                    </label>
                    <Field
                      as="select"
                      id="auto.maxShutter"
                      name="auto.maxShutter"
                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
                    >
                      <option value="1/500">1/500</option>
                      <option value="1/1000">1/1000</option>
                      <option value="1/2000">1/2000</option>
                      <option value="1/5000">1/5000</option>
                      <option value="1/10000">1/10000</option>
                    </Field>
                  </div>
                </div>
              </div>

              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
                <h3 className="text-lg">Gain</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
                  <div className="flex flex-col gap-2">
                    <label htmlFor="auto.maxGain" className="text-lg mb-1">
                      Max Gain:
                    </label>
                    <Field
                      as="select"
                      id="auto.maxGain"
                      name="auto.maxGain"
                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
                    >
                      <option value="0dB">0dB</option>
                      <option value="2dB">2dB</option>
                      <option value="4dB">4dB</option>
                      <option value="6dB">6dB</option>

                      <option value="10dB">10dB</option>
                      <option value="12dB">12dB</option>
                      <option value="16dB">16dB</option>
                      <option value="18dB">18dB</option>
                      <option value="20dB">20dB</option>
                      <option value="24dB">24dB</option>
                    </Field>
                  </div>
                </div>
              </div>

              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
                <h3 className="text-lg">Exposure</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
                  <div className="flex flex-col gap-2">
                    <label htmlFor="auto.exposureCompensation" className="text-lg mb-1">
                      Exposure Compensation:
                    </label>
                    <Field
                      as="select"
                      id="auto.exposureCompensation"
                      name="auto.exposureCompensation"
                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
                    >
                      <option value="EC:off">EC:off</option>
                      <option value="EC:0">EC:0</option>
                      <option value="EC:1">EC:1</option>
                      <option value="EC:2">EC:2</option>
                      <option value="EC:3">EC:3</option>
                      <option value="EC:4">EC:4</option>
                      <option value="EC:5">EC:5</option>
                      <option value="EC:6">EC:6</option>
                      <option value="EC:7">EC:7</option>
                      <option value="EC:8">EC:8</option>
                      <option value="EC:9">EC:9</option>
                      <option value="EC:10">EC:10</option>
                      <option value="EC:11">EC:11</option>
                      <option value="EC:12">EC:12</option>
                      <option value="EC:13">EC:13</option>
                      <option value="EC:14">EC:14</option>
                    </Field>
                  </div>
                </div>
              </div>
            </div>
          )}
          {values.cameraMode === "manual" && (
            <div className="flex flex-col gap-2">
              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
                <h3 className="text-lg">Shutter Speed</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
                  <div className="flex flex-col gap-2">
                    <label htmlFor="manual.fixShutter" className="text-lg mb-1">
                      Fix Shutter:
                    </label>
                    <Field
                      as="select"
                      id="manual.fixShutter"
                      name="manual.fixShutter"
                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
                    >
                      <option value="1/100">1/100</option>
                      <option value="1/120">1/120</option>
                      <option value="1/250">1/250</option>
                      <option value="1/500">1/500</option>
                      <option value="1/1000">1/1000</option>
                      <option value="1/2000">1/2000</option>
                      <option value="1/5000">1/5000</option>
                    </Field>
                  </div>
                </div>
              </div>

              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
                <h3 className="text-lg">Gain</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
                  <div className="flex flex-col gap-2">
                    <label htmlFor="manual.fixGain" className="text-lg mb-1">
                      Fix Gain:
                    </label>
                    <Field
                      as="select"
                      id="manual.fixGain"
                      name="manual.fixGain"
                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
                    >
                      <option value="0dB">0dB</option>
                      <option value="2dB">2dB</option>
                      <option value="4dB">4dB</option>
                      <option value="6dB">6dB</option>
                      <option value="8dB">8dB</option>
                      <option value="10dB">10dB</option>
                      <option value="12dB">12dB</option>
                      <option value="16dB">16dB</option>
                      <option value="18dB">18dB</option>
                      <option value="20dB">20dB</option>
                      <option value="24dB">24dB</option>
                    </Field>
                  </div>
                </div>
              </div>

              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
                <h3 className="text-lg">Iris</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
                  <div className="flex flex-col gap-2">
                    <label htmlFor="manual.fixIris" className="text-lg mb-1">
                      Fix Iris:
                    </label>
                    <Field
                      as="select"
                      id="manual.fixIris"
                      name="manual.fixIris"
                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
                    >
                      <option value="F1.4">F1.4</option>
                      <option value="F2.0">F2.0</option>
                      <option value="F2.8">F2.8</option>
                      <option value="F4.0">F4.0</option>
                      <option value="F5.6">F5.6</option>
                      <option value="F8.0">F8.0</option>
                      <option value="F11.0">F11.0</option>
                      <option value="F16.0">F16.0</option>
                    </Field>
                  </div>
                </div>
              </div>
            </div>
          )}
          <button type="submit" className="p-3 rounded-md bg-green-700 hover:bg-green-900 cursor-pointer">
            Save Settings
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default CameraControls;