import React from "react";
import { Select, Button } from "antd";
import { useFormikContext } from "formik";
import { useGetAllRole } from "../../../api/role";
import useFormatDataToSelect from "../../../utils/useFormatDataToSelect";
import { useGetAllBranch } from "../../../api/branch";
import { useTranslation } from "react-i18next";

const SelectGroup = () => {
  const { values, setFieldValue } = useFormikContext<any>();

  const { data: RoleData } = useGetAllRole();
  const Role = useFormatDataToSelect(RoleData?.data);

  const { data: BranchData } =
    useGetAllBranch();
    // { whereDoesntHasAdmin:values?.id }
  const Branch = useFormatDataToSelect(BranchData?.data);

  const addSelectGroup = () => {
    setFieldValue("selects", [
      ...(values?.selects || []),
      { role: null, branch: null },
    ]);
  };

  const handleRoleChange = (
    value: { value: string; label: React.ReactNode },
    index: number,
  ) => {
    const newSelects = values?.selects ? [...values.selects] : [];

    newSelects[index].role = value;
    setFieldValue("selects", newSelects);
  };

  const handleBranchChange = (
    value: { value: string; label: React.ReactNode },
    index: number,
  ) => {
    const newSelects = values?.selects ? [...values.selects] : [];
    newSelects[index].branch = value;
    setFieldValue("selects", newSelects);
    if (!value) {
      newSelects.splice(index, 1);
      newSelects[index].role = value;
      setFieldValue("selects", newSelects);
    }
  };
  const getFilteredBranches = (currentIndex: number) => {
    const selectedBranches = values?.selects
      ?.map(
        (select: any, index: number) => index !== currentIndex && select.branch,
      )
      .filter(Boolean);

    return Branch.map((branch: any) => {
      if (selectedBranches.includes(branch.value)) {
        return { ...branch, disabled: true };
      }
      return branch;
    });
  };

  const selectsArray = values?.selects ?? [];
  const [t] = useTranslation();

  return (
    <>
      {selectsArray.map((group: any, index: number) => {
        console.log(getFilteredBranches(index));

        return (
          <div key={index} className="TwoSelectGroup">
            <Select
              placeholder={t("input.branch")}
              options={getFilteredBranches(index)}
              onChange={(value) => handleBranchChange(value, index)}
              value={group.branch}
              size="large"
              style={{ width: "100%" }}
              allowClear
            />
            <Select
              placeholder={t("models.role")}
              options={Role}
              onChange={(value) => handleRoleChange(value, index)}
              value={group.role}
              size="large"
              style={{ width: "100%" }}
              allowClear
            />
          </div>
        );
      })}
      <Button
        className="TwoSelectGroupbutton"
        type="dashed"
        onClick={addSelectGroup}
      >
        {t("practical.add_new_role")}
      </Button>
    </>
  );
};

export default SelectGroup;
