import Input from "@/components/Forms/Input";
import ModalComponente from "@/components/Modal/ModalComponente";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import { useAuth } from "@/src/contexts/authContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { formatarValor, GetForm } from "@/utils";
import { Typography } from "@material-tailwind/react";
import { Check, Eye, X } from "lucide-react";
import { useMemo, useState } from "react";
import { toast } from "react-toastify";
import FormItemComposto from "../CXESCAD026/ItensCompostos/FormItensCompostos";
import VisualizacaoTabelaPrecoLinha from "../CXESCAD026/TabelaPrecos/VisualizacaoTabelaPrecoLinha";
import {
  formatarIdentificadorItemComponente,
  isComponenteTabelaPreco,
  obterDescricaoTabelaPrecoComponente,
} from "@/utils/tabelaPrecos";

const ItemComponenteProposta = ({
  componente,
  canEditKit,
  itemIndex,
  itemCompostos,
  dadosDistribuidoresCredenciais,
  itensComp,
  submitEditItemKit,
  submitDeleteItemKit,
  componentesKit,
  potenciaSistema,
  tabelasPrecos = [],
  itensKitTabelaPreco = [],
}: any) => {
  const [isOpenDatasheet, setIsOpenDatasheet] = useState(false);
  const [isEditingQtd, setIsEditingQtd] = useState(false);
  const [isEditingValue, setIsEditingValue] = useState(false);
  const [openModalItemComposto, setOpenModalItemComposto] = useState(false);
  const [openModalTabelaPreco, setOpenModalTabelaPreco] = useState(false);
  const { usuario } = useAuth();
  const [openItemComposto, setOpenItemComposto] = useState<any>();
  const { handleSubmit: handleSubmitQtd, ...formItemQtd } = GetForm();
  const { handleSubmit: handleSubmitValue, ...formItemValue } = GetForm();
  const { isMobile } = useScreenContext();

  function submitEdicaoItemQtd(data: any) {
    setIsEditingQtd(false);
    return submitEditItemKit({
      ...componente,
      id_item: componente.id_item,
      qtd_item: +data.qtd_item,
    });
  }
  function submitEdicaoItemValue(data: any) {
    setIsEditingValue(false);
    return submitEditItemKit({
      ...componente,
      id_item: componente.id_item,
      precoUnitario_item: +data.precoUnitario_item,
      precoUnitario_original_item:
        +componente.precoUnitario_original_item ||
        +componente.precoUnitario_item,
    });
  }

  function getValuesFunction(value: number) {
    if (componente.codDistribuidor_kit !== "2") return value;

    const dadosCredenciais = dadosDistribuidoresCredenciais.find(
      (d: any) => d.codDistribuidor_credencial == componente.codDistribuidor_kit
    );

    if (!dadosCredenciais) return value;

    const { modalidadeFreteWEG_credencial, fatorPrecificacaoWEG_credencial } =
      dadosCredenciais;

    if (!modalidadeFreteWEG_credencial || !fatorPrecificacaoWEG_credencial)
      return value;

    const fator = parseFloat(
      fatorPrecificacaoWEG_credencial.toString().replace(",", ".")
    );
    const frete = parseFloat(modalidadeFreteWEG_credencial.toString());

    if (isNaN(fator) || isNaN(frete)) return value;

    const fatorMultiplicador = fator * frete;
    return Number(value) * fatorMultiplicador;
  }

  const precoUnitarioCalculado = useMemo(() => {
    return getValuesFunction(componente.precoUnitario_item);
  }, [
    componente.precoUnitario_item,
    componente.codDistribuidor_kit,
    dadosDistribuidoresCredenciais,
  ]);

  const classes =
    "p-4 max-sm:p-2 border-b dark:border-boxdark border-blue-gray-50";
  // A coluna de ações é sempre renderizada (mesmo vazia) para que todas as linhas
  // tenham a mesma quantidade de células do cabeçalho — senão a tabela desalinha.
  const podeRemover =
    canEditKit || componente.codDistribuidor_item == "2";
  const isTabelaPreco = String(componente.tabela_preco) === "1";
  const exibirOlhoDetalhes = Boolean(componente?.item_composto) || isTabelaPreco;
  const idItemExibido = formatarIdentificadorItemComponente(
    componente,
    itensKitTabelaPreco
  );
  const descricaoExibida = isComponenteTabelaPreco(componente)
    ? obterDescricaoTabelaPrecoComponente(componente, tabelasPrecos)
    : componente.descricao_item;
  return (
    <>
      <tr
        onClick={() => setIsOpenDatasheet(!isOpenDatasheet)}
        className="hover:bg-[rgba(0,0,0,0.05)] hover:cursor-pointer z-2"
      >
        {isMobile && (
          <td className={classes}>
            {podeRemover &&
              !isEditingQtd &&
              componente.id_tipo_item != "9" &&
              (componente.codDistribuidor_item == "2"
                ? componente.id_tipo_item != "8"
                : true) && (
                <div
                  className="hover:bg-error/60 rounded p-[1px] bg-error text-white w-fit"
                  onClick={(e) => {
                    e.stopPropagation();
                    handleSweetAlert(
                      {
                        icon: "warning",
                        title: `Remover Componente`,
                        html: `
                      <div>
                        <span>
                          Confirmar a remoção do item?
                        </span>
                        <div>${componente.descricao_item}</div>
                      </div>
                      `,
                      },
                      async () =>
                        submitDeleteItemKit({
                          id_item: componente.id_item,
                        })
                    );
                  }}
                >
                  <X size={20} />
                </div>
              )}
          </td>
        )}
        <td className={classes}>
          <div className="flex items-center gap-3">
            <div className="flex flex-row items-center">
              <Typography
                variant="small"
                color="blue-gray"
                className="font-normal  max-sm:text-xs"
              >
                {componente.nome_tipo_item}
              </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  max-sm:text-xs"
              >
                {idItemExibido}{" "}
              </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  max-sm:text-xs"
              >
                {descricaoExibida}{" "}
                {componente.tipo_item == 8 && componente.potencia_item + "kWp"}
              </Typography>
            </div>
          </div>
        </td>
        <td
          className={classes}
          onClick={(e) => {
            e.stopPropagation();

            // Allow editing composed items' quantity when kit is editable.
            if (componente.item_composto && componente.tipo_item !== "13") {
              if (!canEditKit) {
                return;
              }
            }
            if (componente.id_tipo_item == "9") {
              // if (componente.type == "module") {
              toast.warning(
                "Para mudar a quantidade de módulos é necessário redistribuir os módulos"
              );
            } else {
              if (canEditKit) {
                setIsEditingQtd(true);
              }
            }
          }}
        >
          <div className="flex flex-row items-center gap-3">
            {isEditingQtd && componente.id_tipo_item != "9" ? (
              <div>
                <Input
                  name="qtd_item"
                  formulario={formItemQtd}
                  defaultValue={componente.qtd_item}
                  onKeyDown={(e: any) => {
                    e.stopPropagation();
                    if (e.key.includes("Enter")) {
                      e.preventDefault();
                      handleSubmitQtd(submitEdicaoItemQtd)(e);
                    }
                  }}
                  className={"w-15"}
                  width={"w-fit"}
                  mascara="numerico"
                  required
                  error="Informe a quantidade"
                  prefixWidth="0"
                />
                <div className="flex flex-row flex-nowrap justify-between w-full gap-[1px]">
                  <div
                    onClick={handleSubmitQtd(submitEdicaoItemQtd)}
                    className="bg-success text-white rounded p-1 flex-1 flex flex-col items-center justify-center"
                  >
                    <Check size={15} />
                  </div>
                  <div
                    onClick={(e) => {
                      e.stopPropagation();
                      setIsEditingQtd(false);
                    }}
                    className="bg-error text-white rounded p-1 flex-1 flex flex-col items-center justify-center"
                  >
                    <X size={15} />
                  </div>
                </div>
              </div>
            ) : (
              <div className="flex flex-row lg:justify-between flex-nowrap w-full justify-center">
                <Typography
                  variant="small"
                  color="blue-gray"
                  className="font-normal  max-sm:text-xs"
                >
                  {componente.qtd_item}
                </Typography>
              </div>
            )}
          </div>
        </td>
        {
          // (kitManual || componente.codDistribuidor_item == "2") &&
          usuario.visualiza_custo_kit_usuario == "1" && (
            // &&
            //   componentesKit.some(
            //     (componente: any) => +componente.precoUnitario_item != 0
            // )
            <>
              {/* {Ternário para editar} */}
              <td
                className={`${classes} ${canEditKit &&
                    (+componente.precoUnitario_item === 0 ||
                      usuario.permite_alterar_valor_componente_kit_proposta_usuario ==
                      "1")
                    ? "hover:bg-blue-gray-100 cursor-pointer"
                    : ""
                  }`}
                onClick={(e) => {
                  e.stopPropagation();

                  if (
                    canEditKit &&
                    (usuario.permite_alterar_valor_componente_kit_proposta_usuario ==
                      "1" ||
                      +componente.precoUnitario_item === 0)
                  ) {
                    setIsEditingValue(true);
                  }
                }}
              >
                <div className="flex flex-row items-center gap-3">
                  {isEditingValue ? (
                    <div>
                      <Input
                        name="precoUnitario_item"
                        formulario={formItemValue}
                        defaultValue={precoUnitarioCalculado}
                        onKeyDown={(e: any) => {
                          e.stopPropagation();
                          if (e.key.includes("Enter")) {
                            e.preventDefault();
                            handleSubmitValue(submitEdicaoItemValue)(e);
                          }
                        }}
                        className={"w-full"}
                        width={"w-fit"}
                        mascara="numero"
                        prefix={"R$"}
                        required
                        error="Informe o valor"
                      // prefixWidth="0"
                      />
                      <div className="flex flex-row flex-nowrap justify-between w-full gap-[1px]">
                        <div
                          onClick={handleSubmitValue(submitEdicaoItemValue)}
                          className="bg-success text-white rounded p-1 flex-1 flex flex-col items-center justify-center"
                        >
                          <Check size={15} />
                        </div>
                        <div
                          onClick={(e) => {
                            e.stopPropagation();
                            setIsEditingValue(false);
                          }}
                          className="bg-error text-white rounded p-1 flex-1 flex flex-col items-center justify-center"
                        >
                          <X size={15} />
                        </div>
                      </div>
                    </div>
                  ) : (
                    <div className="flex flex-row lg:justify-between flex-nowrap w-full justify-center">
                      {formatarValor(precoUnitarioCalculado)}
                    </div>
                  )}
                </div>
              </td>
              <td className={classes}>
                {formatarValor(+precoUnitarioCalculado * +componente.qtd_item)}
              </td>
            </>
          )
        }

        {(canEditKit || componente.codDistribuidor_item == "2") &&
          // !componente?.item_composto &&
          !isMobile && (
            <td className={classes}>
              {podeRemover && !isEditingQtd &&
                !isEditingValue &&
                componente.id_tipo_item != "9" &&
                (componente.codDistribuidor_item == "2" &&
                  componente.tipoOrigem_item == "1"
                  ? componente.id_tipo_item != "8"
                  : true) && (
                  <div
                    className={`flex lfex-col gap-4 items-center ${!exibirOlhoDetalhes && "pl-9"} justify-center`}
                  >
                    {exibirOlhoDetalhes && (
                      <div
                        className=" p-[1px] text-blue"
                        onClick={(e) => {
                          e.stopPropagation();
                          setOpenItemComposto(componente);
                          if (isTabelaPreco) {
                            setOpenModalTabelaPreco(true);
                          } else {
                            setOpenModalItemComposto(true);
                          }
                        }}
                      >
                        <Eye size={25} />
                      </div>
                    )}
                    <div
                      className="hover:bg-error/60 rounded p-[1px] bg-error text-white"
                      onClick={(e) => {
                        e.stopPropagation();
                        handleSweetAlert(
                          {
                            icon: "warning",
                            title: `Remover Componente`,
                            html: `
                      <div>
                        <span>
                          Confirmar a remoção do item?
                        </span>
                        <div>${componente.descricao_item}</div>
                      </div>
                      `,
                          },
                          async () =>
                            submitDeleteItemKit({
                              id_item: componente.id_item,
                            })
                        );
                      }}
                    >
                      <X size={20} />
                    </div>
                  </div>
                )}
            </td>
          )}
      </tr>
      <ModalComponente
        opened={openModalItemComposto}
        size="md"
        denyButtonText="Fechar"
        hasDenyButton={true}
        hasSaveButton={false}
        onDeny={() => setOpenModalItemComposto(false)}
        onClose={() => setOpenModalItemComposto(false)}
      >
        <div>
          {openItemComposto && (
            <FormItemComposto
              visualMode={true}
              defaultValues={(() => {
                return {
                  id_item: openItemComposto.id_item,
                  descricao_item: openItemComposto.descricao_item,
                  precoUnitario_item: openItemComposto.precoUnitario_item,
                  potenciaDe_item: openItemComposto.potenciaDe_item,
                  potenciaAte_item: openItemComposto.potenciaAte_item,
                  fases_item: openItemComposto.fases_item,
                  possui_itens_item: openItemComposto.possui_itens_item,
                  origem:
                    openItemComposto.nome_tipo_item === "Stringbox"
                      ? "stringbox"
                      : "itens_compostos",
                  potenciaInversor: openItemComposto.potencia_item,
                  potenciaSistema,
                  itens: itensComp?.filter(
                    (item: any) =>
                      item.cod_item_itens_compostos == openItemComposto.id_item
                  ),
                  faixas: openItemComposto.faixas,
                };
              })()}
            />
          )}
        </div>
      </ModalComponente>
      <ModalComponente
        opened={openModalTabelaPreco}
        size="lg"
        denyButtonText="Fechar"
        hasDenyButton={true}
        hasSaveButton={false}
        onDeny={() => setOpenModalTabelaPreco(false)}
        onClose={() => setOpenModalTabelaPreco(false)}
      >
        <VisualizacaoTabelaPrecoLinha
          componente={openItemComposto || componente}
          tabelasPrecos={tabelasPrecos}
          itensKitTabelaPreco={itensKitTabelaPreco}
          exibirCusto={usuario.visualiza_custo_kit_usuario == "1"}
        />
      </ModalComponente>
    </>
  );
};

export default ItemComponenteProposta;