import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Label, Input } from "reactstrap";
import Select from "react-select";
import { useTranslation } from "react-i18next";
import { getMcfTypes } from "../../redux/actions/datas";

const DataUpdateSolidWaste = ({ editingDataInput, setEditingDataInput }) => {
  const { t } = useTranslation();
  const dispatch = useDispatch();

  const datasStore = useSelector((state) => state.datas);
  const [mcfTypesOptions, setMcfTypesOptions] = useState([]);

  useEffect(() => {
    setMcfTypesOptions(
      datasStore?.mcfTypes?.map((mcfType) => {
        return {
          value: mcfType?.id,
          label: `${mcfType?.typeName} (${mcfType?.value})`,
        };
      })
    );
  }, [datasStore?.mcfTypes]);

  useEffect(() => {
    dispatch(getMcfTypes());
  }, []);

  let solidWasteTypes = [
    { label: "Evsel", value: "domestic" },
    { label: "Bahçe", value: "garden" },
    { label: "Kağıt", value: "paper" },
    { label: "Ağaç", value: "tree" },
    { label: "Tekstil", value: "textile" },
    { label: "Endüstriyel", value: "industrial" },
  ];

  return (
    <>
      <div className="mb-2">
        <Label className="form-label" for="solid-waste-types">
          Atık Türü:
        </Label>
        {solidWasteTypes.map((type, index) => (
          <div className="d-flex flex-md-row flex-column" key={index}>
            <div className="mb-2 col-3">
              <Label className="form-label" for="solid-waste-type">
                {type.label}:
              </Label>
            </div>
            <div className="mb-2 col-6">
              <Input
                id="solid-waste-type"
                placeholder="0-100"
                type="text"
                value={editingDataInput?.[type.value]?.inputValue || ""}
                onChange={(e) => {
                  const inputValue = e.target.value;
                  const onlyNumbers = inputValue.replace(/[^0-9]/g, "");
                  const parsedNumber = Math.min(
                    100,
                    Math.max(0, parseInt(onlyNumbers, 10))
                  );
                  setEditingDataInput({
                    ...editingDataInput,
                    [type.value]: {
                      ...editingDataInput?.[type.value],
                      inputValue: parsedNumber,
                    },
                  });
                }}
                onKeyDown={(e) => {
                  if (e.key === "e" || e.key === "E") {
                    e.preventDefault();
                  }
                }}
              />
            </div>
          </div>
        ))}
      </div>
      <div className="mb-2">
        <Label className="form-label" for="mcfType">
          MCF:
        </Label>
        <Select
          id="mcfType"
          isClearable={false}
          closeMenuOnSelect={true}
          maxMenuHeight={150}
          menuPlacement="auto"
          className="react-select"
          placeholder=""
          options={mcfTypesOptions}
          value={editingDataInput?.mcfType || ""}
          onChange={(value) => {
            setEditingDataInput({
              ...editingDataInput,
              mcfType: value,
            });
          }}
        />
      </div>
      <div className="mb-2">
        <Label className="form-label" for="frec">
          Metan Yakalama Oranı %:
        </Label>
        <Input
          id="frec"
          placeholder="0-100"
          type="text"
          value={editingDataInput?.frec || ""}
          onChange={(e) => {
            const inputValue = e.target.value;
            const onlyNumbers = inputValue.replace(/[^0-9]/g, "");
            const parsedNumber = Math.min(
              100,
              Math.max(0, parseInt(onlyNumbers, 10))
            );
            setEditingDataInput({
              ...editingDataInput,
              frec: parsedNumber,
            });
          }}
          onKeyDown={(e) => {
            if (e.key === "e" || e.key === "E") {
              e.preventDefault();
            }
          }}
        />
      </div>
    </>
  );
};

export default DataUpdateSolidWaste;