import ModalReact from "@/components/Modal/ModalReact";
import { FormatFields } from "@/utils";
import { useState } from "react";
import ButtonDownloadAnexoComplemento from "./ButtonDownloadAnexoComplemento";

const DetalhesComplementoCard = ({ complemento }: any) => {
  const [mostrarDetalhesComplemento, setMostrarDetalhesComplemento] =
    useState(false);

  return (
    <div
      className="bg-white text-black dark:text-white dark:bg-form-strokedark flex w-full justify-between rounded-md relative cursor-pointer hover:bg-white/[0.45]"
      onClick={() => setMostrarDetalhesComplemento(true)}
    >
      <div className="p-3 text-start">
        <p className="text-sm">
          Complemento Nº {complemento.id_complemento_card}
        </p>
        {complemento.tipo_complemento_card == "Outros" ? (
          <>
            <p className="font-semibold">Tipo: Outros</p>
            <p className="text-sm">
              Descrição: {complemento.descricao_complemento_card}
            </p>
            <ModalReact
              title={`Detalhes do Complemento`}
              open={mostrarDetalhesComplemento}
              onClose={() => setMostrarDetalhesComplemento(false)}
              className="md:w-1/2"
            >
              <div className="p-5 divide-y dark:divide-white">
                <div>
                  <div className="font-bold">Descrição</div>
                  <div>{complemento.descricao_complemento_card}</div>
                </div>
                <div className="p-2 flex flex-col gap-2 md:flex-row flex-wrap">
                  {complemento.anexos?.map((anexo: any, index: number) => (
                    <div key={index}>
                      <ButtonDownloadAnexoComplemento anexo={anexo} />
                    </div>
                  ))}
                </div>
              </div>
            </ModalReact>
          </>
        ) : (
          <>
            <p className="font-semibold">
              Tipo: {complemento.tipo_complemento_card}
            </p>
            <ModalReact
              title={`Detalhes do Complemento`}
              open={mostrarDetalhesComplemento}
              onClose={() => setMostrarDetalhesComplemento(false)}
              className="md:w-1/2"
            >
              <div className="p-5 divide-y dark:divide-white">
                <div>
                  <div className="font-bold">Módulo</div>
                  <div>
                    Fonte do modulo:{" "}
                    {complemento.isManual_modulo_complemento_card == "1"
                      ? "Manual"
                      : "Distribuidor"}
                  </div>
                  <div>
                    Fabricante:{" "}
                    {complemento.fabricante_modulo || "Não definido"}
                  </div>
                  <div>
                    Descrição do módulo:{" "}
                    {complemento.descricao_modulo_complemento_card}
                  </div>
                  <div>
                    Potência do módulo:{" "}
                    {complemento.potencia_modulo_complemento_card}
                  </div>
                  <div>
                    Quantidade de módulos:{" "}
                    {complemento.qtd_modulo_complemento_card}
                  </div>
                </div>
                <div className="pb-2">
                  <div className="font-bold">Inversores</div>
                  <div className="flex flex-col justify-evenly gap-2 md:flex-row flex-wrap">
                    {complemento.inversores?.map(
                      (inversor: any, index: number) => (
                        <div key={index} className="p-2 rounded bg-body/20">
                          <div>
                            Fonte Inversor:{" "}
                            {inversor.isManual_inversor_complemento_card == "1"
                              ? "Manual"
                              : "Distribuidor"}
                          </div>
                          <div>
                            Fabricante: {inversor.fabricante || "Não definido"}
                          </div>
                          <div>
                            Descrição do inversor:{" "}
                            {inversor.descricao_inversor_complemento_card}
                          </div>
                          <div>
                            Potência do inversor:{" "}
                            {inversor.potencia_inversor_complemento_card}
                          </div>
                          <div>
                            Quantidade do inversor:{" "}
                            {inversor.quantidade_inversor_complemento_card}
                          </div>
                        </div>
                      )
                    )}
                  </div>
                </div>
                <div className="p-2 flex flex-col gap-2 md:flex-row flex-wrap">
                  {complemento.anexos?.map((anexo: any, index: number) => (
                    <div key={index}>
                      <ButtonDownloadAnexoComplemento anexo={anexo} />
                    </div>
                  ))}
                </div>
              </div>
            </ModalReact>
          </>
        )}
        <p className="text-sm">
          {FormatFields.formatarDataHora(
            complemento.data_hora_complemento_card
          )}
        </p>
      </div>
    </div>
  );
};

export default DetalhesComplementoCard;