import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import Container from "@/components/Forms/Container";
import ModalComponente from "@/components/Modal/ModalComponente";
import { deletarItemKit } from "@/requests/CRM/APIHelte/deletarItemKit";
import { editarItemKit } from "@/requests/CRM/APIHelte/editarItemKit";
import { useAuth } from "@/src/contexts/authContext";
import { formatarValor } from "@/utils";
import { Typography } from "@material-tailwind/react";
import { Tooltip } from "@mui/material";
import { Plus } from "lucide-react";
import { useEffect, useState } from "react";
import { BsLightningChargeFill } from "react-icons/bs";
import ItemKitHelte from "./ItemKitHelte";
import NewItemKitHelteForm from "./NewItemKitHelteForm";

const ComponentesKitHelte = ({ form, blockNextStep }: any) => {
  const [keyComponentes, setKeyComponentes] = useState(0);
  const [isLoading, setIsLoading] = useState(false);
  const [isOpenNewItem, setIsOpenNewItem] = useState(false);

  // const  kitSelecionado = form.control._formValues.kitSelecionado;
  const [kitSelecionado, setKitSelecionado] = useState<any>(
    form.control._formValues.kitSelecionado
  );
  const [componentesKit, setComponentesKit] = useState<any[]>(
    form.control._formValues?.kitSelecionado?.products || []
  );

  const classes = "p-4 border-b dark:border-boxdark border-blue-gray-50";
  const { perfil, usuario } = useAuth();

  const {
    kitEscolhido,
    kitProprio,
    kitManual,
    // fabricante,
    distribuidor,
    distribuidores,
    distribuicaoDosModulos,
    potenciaKwp,
    totalModulos,
  } = form.control._formValues;

  useEffect(() => {
    if (!kitSelecionado.has_overload) {
      blockNextStep(isLoading);

      form.setValue("valorColeta", kitSelecionado.total_value);
    }
  }, [isLoading]);

  useEffect(() => {
    blockNextStep(kitSelecionado.has_overload);
  }, [kitSelecionado]);

  useEffect(() => {
    const componentesKitSelecionado: any[] = kitSelecionado?.products || [];
    setComponentesKit(componentesKitSelecionado);

    const modulo = componentesKitSelecionado.find(
      (componente) => componente.type == "module"
    );

    const dadosComprimento = modulo?.datasheet?.find(
      (data: { name: string; value: string; si: string }) =>
        data.name == "Comprimento"
    );
    const dadosLargura = modulo?.datasheet?.find(
      (data: { name: string; value: string; si: string }) =>
        data.name == "Comprimento"
    );

    const comprimento =
      dadosComprimento.si == "mm"
        ? +dadosComprimento.value / 100
        : +dadosComprimento.value;
    const largura =
      dadosLargura.si == "mm" ? +dadosLargura.value / 100 : +dadosLargura.value;

    form.setValue("area_ocupada", comprimento * largura * totalModulos);

    const potencia_modulo =
      modulo?.datasheet?.find(
        (data: { name: string; value: string; si: string }) =>
          data.name == "Potência Máxima Nominal"
      )?.value || "0";

    form.setValue("potencia_modulo", potencia_modulo);

    form.setValue("modulo_proposta", modulo);

    const inversores = componentesKitSelecionado.filter(
      (componente) => componente.type == "inverter"
    );
    const potencia_inversores = inversores.reduce(
      (acc, inversor) =>
        (acc += Number(
          inversor?.datasheet?.find(
            (data: { name: string; value: string; si: string }) =>
              data.name == "Potência Nominal"
          )?.value || "0"
        )),
      0
    );

    form.setValue("potencia_inversores", Number(potencia_inversores) / 1000);

    form.setValue("inversores_proposta", inversores);
  }, [kitSelecionado]);

  async function submitEditItemKit(data: { id: number; quantity: number }) {
    setIsLoading(true);
    return editarItemKit({ ...data, budget_id: kitSelecionado.budget_id })
      .then((res) => {
        form.setValue("kitSelecionado", res);
        setKitSelecionado(res);
        setKeyComponentes(keyComponentes + 1);
      })
      .finally(() => {
        setIsLoading(false);
        setIsOpenNewItem(false);
      });
  }
  function submitDeleteItemKit(data: { id: number }) {
    setIsLoading(true);
    deletarItemKit({ ...data, budget_id: kitSelecionado.budget_id })
      .then((res) => {
        form.setValue("kitSelecionado", res);
        setKitSelecionado(res);
        setKeyComponentes(keyComponentes + 1);
      })
      .finally(() => setIsLoading(false));
  }

  const overload = kitSelecionado.overload;
  const overLoadValue = overload.value;
  const overloadReferenceMax = overload.reference.maxT;
  const overloadReferenceMin = overload.reference.minT;

  return (
    <Container key={keyComponentes}>
      <div className="text-boxdark dark:text-white relative">
        <div>
          <div className="flex flex-row justify-between">
            <div className="w-full">
              <div>Componentes</div>

              {kitSelecionado.has_overload && (
                <div className="bg-error text-white w-fit px-1 rounded">
                  Erro: Overload do Inversor
                </div>
              )}

              <fieldset className="flex flex-col border-black/25 border rounded p-2 px-3 w-fit">
                <legend>Overload do inversor</legend>
                <div className="flex flex-row items-center gap-2">
                  <div>{String(overloadReferenceMin)}</div>
                  <div className="w-[200px] h-[20px] bg-black-2/30 rounded overflow-hidden">
                    <div
                      className="h-full flex flex-row items-center relative rounded " // bg-gradient-to-r from-primary to-error
                      style={{
                        width:
                          (((overLoadValue - overloadReferenceMin) * 100) /
                            (overloadReferenceMax - overloadReferenceMin)) *
                            2 +
                          "px",
                        background:
                          "linear-gradient(90deg, rgba(9,9,121,1) 0, rgba(9,9,121,1) 100px, rgba(255,0,0,1) 200px)",
                      }}
                    >
                      <div className="text-sm text-white font-bold absolute left-[50%]">
                        {String(overLoadValue)}
                      </div>
                    </div>
                  </div>
                  <div>{String(overloadReferenceMax)}</div>
                </div>
              </fieldset>
            </div>
            <div className="flex flex-row gap-2">
              <div className="flex flex-col justify-center">
                <Tooltip title="Adicionar Item" arrow={true} placement="left">
                  <Button type="button" onClick={() => setIsOpenNewItem(true)}>
                    <Plus />
                  </Button>
                </Tooltip>
                {isOpenNewItem && (
                  <ModalComponente
                    hasForm={false}
                    header="Novo Item"
                    defaultW="w-fit"
                    className="max-h-[70vh]"
                    opened={isOpenNewItem}
                    onClose={() => setIsOpenNewItem(false)}
                    hasSaveButton={false}
                  >
                    <NewItemKitHelteForm
                      budget_id={kitSelecionado.budget_id}
                      submitEditItemKit={submitEditItemKit}
                    />
                  </ModalComponente>
                )}
              </div>
              <div className="flex flex-col items-center justify-center text-end">
                <div className="">Potência</div>
                <div className="self-center rounded-lg p-1 flex items-center border-bodydark text-white text-xs bg-success">
                  <BsLightningChargeFill />
                  {kitSelecionado.potency}Wp
                </div>
              </div>
            </div>
          </div>
          <div className="w-full overflow-auto">
            <table className="mt-4 w-full min-w-max table-auto text-left">
              <thead>
                <tr>
                  {["Componente", "Descrição", "Quantidade"].map(
                    (head, index) => (
                      <th
                        key={index}
                        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>
                {componentesKit &&
                  componentesKit.map((componente: any, index: number) => {
                    const isLast = index === componentesKit.length - 1;
                    // const classes = isLast
                    //   ? "p-4"
                    //   : "p-4 border-b dark:border-boxdark border-blue-gray-50";

                    return (
                      <ItemKitHelte
                        key={index}
                        componente={componente}
                        submitEditItemKit={submitEditItemKit}
                        submitDeleteItemKit={submitDeleteItemKit}
                      />
                    );
                  })}
                {usuario.visualiza_custo_kit_usuario == "1" && (
                  <tr>
                    <td colSpan={1} className={classes + " text-right"}>
                      <Typography
                        variant="small"
                        color="blue-gray"
                        className="font-normal"
                      >
                        {formatarValor(kitSelecionado.total_value)}
                      </Typography>
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
        {isLoading && (
          <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center bg-black-2/10">
            <LoaderSun />
          </div>
        )}
      </div>
    </Container>
  );
};

export default ComponentesKitHelte;