import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import FormBox from "../components/FormBox";
import Button from "../components/Button";
import { motion } from "motion/react";
import clsx from "clsx";
import { AnimatePresence } from "motion/react";

function CabinetMaintenace() {
  const navigate = useNavigate();
  const { t } = useTranslation();
  const [operation, setOperation] = useState({ value: "", valid: true });

  const handleNext = (e) => {
    e.preventDefault();
    if (operation.value === "") {
      setOperation({ value: operation.value, valid: false });
    }
    navigate(operation.value);
  };

  return (
    <div>
      <FormBox title={t("cabinetMaintenance")}>
        <div className="p-2 pt-7">
          <div className="flex">
            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
              {t("operation")}
            </label>
            <div className="w-full">
              <select
                className={clsx(
                  "w-1/5 h-10 px-2 rounded-full dark:bg-grey dark:text-primary-dark border-2 focus:outline-grey border-grey",
                  !operation.valid && "border-error"
                )}
                onChange={(e) =>
                  setOperation({ value: e.target.value, valid: true })
                }
                defaultValue={operation.value}
                value={operation.value}
              >
                <option value="" disabled>
                  {t("select")}
                </option>
                <option value="create">{t("create")}</option>
              </select>
              <AnimatePresence>
                {!operation.valid && (
                  <motion.div
                    className="w-1/5 text-sm text-error ml-3 pt-1"
                    initial={{ y: 15, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    exit={{ y: 15, opacity: 0 }}
                    key="cabinetIdError"
                  >
                    Invalid Operation
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          </div>
        </div>
        <Button text={t("next")} onClick={(e) => handleNext(e)} />
      </FormBox>
    </div>
  );
}

export default CabinetMaintenace;