import LoaderSun from "@/components/common/Loader/LoaderSun";
import {
  Button,
  Card,
  CardBody,
  CardHeader,
  Tooltip,
  Typography,
} from "@material-tailwind/react";
import { useEffect, useState } from "react";
import { BsTrash3 } from "react-icons/bs";
import Input from "../../components/Forms/Input";
interface ValorTotalComponente {
  [key: string]: number;
}
const ComponentesKit = ({
  form,
  selectedComponentes,
  distribuidores,
}: {
  form: any;
  selectedComponentes: any;
  distribuidores: any[];
}) => {
  const { kitEscolhido, kitProprio, kitManual } = form.control._formValues;

  const [loading, setLoading] = useState(false);
  const [componentesKitDistribuidor, setComponentesKitDistribuidor] = useState<
    any[]
  >([]);
  const [valorTotalComponente, setValorTotalComponente] =
    useState<ValorTotalComponente>({});
  const setValue = form.setValue;

  const kitFechado = !kitManual;

  const TABLE_HEAD = kitFechado
    ? ["Componente", , "Descrição", "Quantidade"]
    : ["Componente", "Preço", "Quantidade", "Total", ""];

  useEffect(() => {
    selectedComponentes(true);
    setLoading(true);
    // if (kitManual) {
    setComponentesKitDistribuidor(form?.control?._formValues?.componentesKit);
    setLoading(false);
    selectedComponentes(false);
    // listarComponentesKitManual(kitEscolhido.id_kit).then((res) => {
    //     setLoading(false);
    //     selectedComponentes(false);
    //     setComponentesKitDistribuidor(res.componentesKit);
    //   })
    // } else {
    //   setComponentesKitDistribuidor(kitEscolhido.componentes);
    //   setLoading(false);
    //   selectedComponentes(false);
    //   //   listarComponentesKitManual(kitEscolhido?.codItem_kit).then(
    //   //     (res) => {
    //   //       selectedComponentes(false);
    //   //       setLoading(false);

    //   //       setComponentesKitDistribuidor(res.componentesKit);
    //   //     }
    //   //   );
    // }
    const calcularSomaTotal = () => {
      let total = 0;

      for (const chave in valorTotalComponente) {
        if (valorTotalComponente.hasOwnProperty(chave)) {
          total += valorTotalComponente[chave];
        }
      }
      const valorFormatado = total.toLocaleString("pt-BR", {
        style: "currency",
        currency: "BRL",
      });
      setValue("valorFinalComponentes", valorFormatado);
    };

    calcularSomaTotal();
  }, [valorTotalComponente]);

  return (
    <>
      {loading ? (
        <div className="flex justify-center">
          <LoaderSun />
        </div>
      ) : (
        <Card className="h-full w-full text-black dark:bg-form-input dark:text-white px-2 md:px-0 rounded-none">
          <CardHeader
            floated={false}
            shadow={false}
            className="rounded-none  dark:bg-form-input"
          >
            <div className="mb-8  px-4 flex  items-center justify-between">
              <div className="w-35 md:w-full">
                <Typography variant="h5" className="">
                  Componentes do Kit
                </Typography>
                <Typography
                  color="gray"
                  className="mt-1 font-normal text-xs  md:text-base"
                >
                  Os componentes são referentes ao distribuidor selecionado
                </Typography>
              </div>
              <div className="flex shrink-0 flex-col w-29 md:w-auto gap-2 sm:flex-row">
                <Button
                  variant="outlined"
                  className="text-xs dark:border-meta-5 text-meta-5 md:text-md"
                  size="sm"
                >
                  {kitManual
                    ? "Kit Manual"
                    : distribuidores?.find(
                        (distribuidor) =>
                          distribuidor?.id_distribuidor ==
                          kitEscolhido?.codDistribuidor_kit,
                      )?.nome_distribuidor}
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardBody className="overflow-scroll md:overflow-hidden  px-3">
            <table className="mt-4 w-full min-w-max table-auto text-left">
              <thead>
                <tr>
                  {TABLE_HEAD.map((head, index) => (
                    <th
                      key={head}
                      className="cursor-pointer border-y  border-stroke bg-stroke/50 p-4 dark:hover:bg-form-strokedark hover:bg-stroke"
                    >
                      <Typography
                        variant="small"
                        color="blue-gray"
                        className="flex items-center justify-between gap-2 font-normal  leading-none opacity-90"
                      >
                        {head}
                      </Typography>
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {componentesKitDistribuidor &&
                  componentesKitDistribuidor
                    // .filter(
                    //   (res) =>
                    //     (res.qtd || res.qtd_item != null) &&
                    //     (res.qtd || res.qtd_item != 0)
                    // )
                    .map((componente: any, index) => {
                      {
                        setValue(
                          `componente`,
                          componentesKitDistribuidor.filter(
                            (res) => res.qtd != null && res.qtd != 0,
                          ),
                        );
                      }

                      const isLast =
                        index === componentesKitDistribuidor.length - 1;
                      const classes = isLast
                        ? "p-4"
                        : "p-4 border-b dark:border-boxdark border-blue-gray-50";
                      return (
                        <tr key={index}>
                          <td className={classes}>
                            <div className="flex items-center gap-3">
                              <div className="flex flex-col">
                                <Typography
                                  variant="small"
                                  color="blue-gray"
                                  className="font-normal"
                                >
                                  {/* {componente.nome || componente.tipo_item} */}
                                  {componente.nome_tipo_item}
                                </Typography>
                                <Typography
                                  variant="small"
                                  color="blue-gray"
                                  className="font-normal opacity-70"
                                >
                                  {" "}
                                  {""}
                                </Typography>
                              </div>
                            </div>
                          </td>

                          <td className={classes}>
                            <div className="flex items-center gap-3">
                              <div className="flex flex-col">
                                <Typography
                                  variant="small"
                                  color="blue-gray"
                                  className="font-normal"
                                >
                                  {setValue(
                                    `componente`,
                                    componentesKitDistribuidor.filter(
                                      (res) => res.qtd != null && res.qtd != 0,
                                    ),
                                  )}
                                  {componente.descricao_item || "Sem descrição"}
                                </Typography>
                              </div>
                            </div>
                          </td>
                          <td className={classes}>
                            <div className="flex items-center gap-3">
                              <div className="flex flex-col">
                                <Typography
                                  variant="small"
                                  color="blue-gray"
                                  className="font-normal"
                                >
                                  {componente.qtd_item || 0}
                                </Typography>
                              </div>
                            </div>
                          </td>
                          {!kitFechado && (
                            <>
                              <td className={classes}>
                                <div className="flex flex-col">
                                  <Typography
                                    variant="small"
                                    color="blue-gray"
                                    className="font-normal"
                                  >
                                    {Number(
                                      componente.preco_venda_adicional,
                                    ).toLocaleString("pt-BR", {
                                      style: "currency",
                                      currency: "BRL",
                                    })}
                                  </Typography>
                                </div>
                              </td>
                              <td className={classes}>
                                <div className="flex flex-col">
                                  <Typography
                                    variant="small"
                                    color="blue-gray"
                                    className="font-normal"
                                  >
                                    <Input
                                      formulario={form}
                                      onKeyUp={(e) => {
                                        const newValue = parseFloat(
                                          (e.target as HTMLInputElement).value,
                                        );
                                        const total =
                                          componente.preco_venda_adicional *
                                          newValue;

                                        setValorTotalComponente(
                                          (prevState) => ({
                                            ...prevState,
                                            [componente.id_adicional]: total,
                                          }),
                                        );
                                      }}
                                      className="h-9 text-center w-26 border-[1px] rounded-md"
                                      name={`componente[${componente.id_adicional}].qtd_componente`}
                                      defaultValue={`${componente.qtd}`}
                                      type="text"
                                    />
                                  </Typography>
                                </div>
                              </td>
                              <td className={classes}>
                                <Tooltip content="Remover Componente">
                                  <button className="bg-danger rounded-md hover:drop-shadow-md text-sm gap-1 hover:bg-meta-1 p-1 flex items-center text-white">
                                    <BsTrash3 />
                                    Apagar
                                  </button>
                                </Tooltip>
                              </td>
                            </>
                          )}
                        </tr>
                      );
                    })}
              </tbody>
            </table>
          </CardBody>
        </Card>
      )}
    </>
  );
};
export default ComponentesKit;