import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";
import NPEDCatToggle from "../SettingForms/NPED/NPEDCatToggle";
import FormGroup from "../SettingForms/components/FormGroup";
import { Form, Formik } from "formik";
import { useIntegrationsContext } from "../../context/IntegrationsContext";
import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
import type { CategoryPopups } from "../../types/types";

const NPEDCategoryPopup = () => {
  const { state, dispatch } = useIntegrationsContext();
  const { mutation } = useCameraBlackboard();

  const isCatAEnabled = state?.iscatEnabled?.catA;
  const isCatBEnabled = state?.iscatEnabled?.catB;
  const isCatCEnabled = state?.iscatEnabled?.catC;
  const isCatDEnabled = state?.iscatEnabled?.catD;

  const initialValues = {
    catA: isCatAEnabled ?? true,
    catB: isCatBEnabled ?? true,
    catC: isCatCEnabled ?? true,
    catD: isCatDEnabled ?? false,
  };

  const handleSubmit = async (values: CategoryPopups) => {
    await mutation.mutateAsync({
      operation: "INSERT",
      value: values,
      path: "CategoryPopup",
    });
    dispatch({ type: "NPEDCATENABLED", payload: values });
  };

  return (
    <Card className="p-4">
      <CardHeader title={"Alert Pop ups"} />
      <p className="italic my-2">Allows alerts to pop up to user.</p>
      <Formik initialValues={initialValues} onSubmit={handleSubmit}>
        <Form className="flex flex-col space-y-5 px-2">
          <FormGroup>
            <NPEDCatToggle name={"catA"} label="NPED Category A" />
          </FormGroup>
          <FormGroup>
            <NPEDCatToggle name={"catB"} label="NPED Category B" />
          </FormGroup>
          <FormGroup>
            <NPEDCatToggle name={"catC"} label="NPED Category C" />
          </FormGroup>
          <FormGroup>
            <NPEDCatToggle name={"catD"} label="NPED Category D" />
          </FormGroup>
          <button
            type="submit"
            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
          >
            Save
          </button>
        </Form>
      </Formik>
    </Card>
  );
};

export default NPEDCategoryPopup;