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 FormField from "../components/FormField";
import FormInput from "../components/FormInput";
import FormSelect from "../components/FormSelect";
import FieldsWrapper from "../components/FieldsWrapper";

function LockerMaintenance() {
  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);
  };

  const formFields = [
    {
      name: "value",
      label: t("operation"),
      options: [
        { label: t("status"), value: "status" },
        { label: t("keySwap"), value: "key-swap" },
      ],
      type: "select",
    },
  ];

  const renderField = (field) => {
    const commonProps = {
      value: operation[field.name],
      onChange: (e) => {
        const newValues = { ...operation };
        newValues[field.name] = e.target.value;
        newValues[`${field.name}Valid`] = true;
        setOperation(newValues);
      },
    };
    const options = field.options;
    return (
      <FormField label={field.label}>
        {field.type === "input" ? (
          <FormInput props={commonProps} />
        ) : (
          <FormSelect props={commonProps} options={options} />
        )}
      </FormField>
    );
  };

  return (
    <div>
      <FormBox title={t("lockerMaintenance")}>
        <FieldsWrapper>{formFields.map(renderField)}</FieldsWrapper>
        <Button text={t("next")} onClick={(e) => handleNext(e)} />
      </FormBox>
    </div>
  );
}

export default LockerMaintenance;