import { FormatFields, GetGallery } from "@/utils";
import { useEffect, useState } from "react";
import ImagemConclusaoNegocio from "./ImagemConclusaoInstalacao";

import { format } from "date-fns";
import CamposPersonalizados from "../../campos_personalizados";

const ItemVisualizacaoCompraMaterial = ({
  fornecedores,
  itemCompra,
  indexItem,
  dadosCard,
  camposPersonalizados,
  form,
}: {
  fornecedores: any[];
  [x: string]: any;
}) => {
  const [anexos, setAnexos] = useState<any[]>(itemCompra.anexos || []);
  const [itemCompraMaterial, setItemCompraMaterial] = useState();

  const { openGallery, setGallery } = GetGallery();

  useEffect(() => {
    if (!itemCompraMaterial) {
      const [year, month, day] = itemCompra?.data_pendencia_compra_material
        .split("-")
        .map(Number);
      const data = new Date(year, month - 1, day);

      const dataFormat = format(data, "dd/MM/yyyy");
      setItemCompraMaterial({
        ...itemCompra,
        data_pendencia_compra_material: dataFormat,
      });
      setAnexos(
        itemCompra.anexos.map((anexo: any) => ({
          ...anexo,
          src: "",
        }))
      );
    }
  }, []);

  useEffect(() => {
    setGallery(
      anexos.map((anexos) => ({
        src: anexos.src,
        name: anexos.caminho_anexo_pendencia_compra_material.split("/").pop(),
      }))
    );
  }, [anexos]);

  return (
    <fieldset className="flex flex-col border-black/25 border rounded p-2 px-3 w-full">
      <div>
        <div>
          <div>
            Data:{" "}
            <span className="font-medium">
              {FormatFields.formatarData(
                itemCompra.data_pendencia_compra_material
              )}
            </span>
          </div>
          {itemCompra.numero_pedido_pendencia_compra_material &&
            itemCompra.numero_pedido_pendencia_compra_material != "0" && (
              <div>
                Numero do Pedido:{" "}
                <span className="font-medium">
                  {itemCompra.numero_pedido_pendencia_compra_material}
                </span>
              </div>
            )}

          <div>
            Descrição:{" "}
            <span className="font-medium">
              {itemCompra.descricao_pendencia_compra_material}
            </span>
          </div>
          <div>
            Observações:{" "}
            <span className="font-medium">
              {itemCompra.observacao_pendencia_compra_material}
            </span>
          </div>

          <div>
            <div>Anexos</div>
            <div className="flex flex-row flex-wrap gap-y-3 gap-x-2 justify-evenly max-h-[20vh] overflow-auto">
              {anexos?.map((anexo: any, index: number) => (
                <ImagemConclusaoNegocio
                  key={index}
                  caminho={anexo.caminho_anexo_pendencia_compra_material}
                  indexImagem={index}
                  setImagens={setAnexos}
                  onClick={() => openGallery(index)}
                />
              ))}
              {itemCompra.anexos?.length == 0 && (
                <div>Não há anexos do Pagamento</div>
              )}
            </div>
          </div>
          <div>
            {camposPersonalizados?.filter(
              (a: any) =>
                a.cadaTopico_campo_personalizado === "1" &&
                a.local_campo_personalizado === "5"
            ).length > 0 && (
                <CamposPersonalizados
                  formulario={form}
                  blockEditCard
                  localCampo="5"
                  customIndex={indexItem}
                  eachTopic={"1"}
                  manualCampos={camposPersonalizados?.filter(
                    (a: any) =>
                      a.cadaTopico_campo_personalizado === "1" &&
                      Number(a.indexCampo_gravacao_personalizado) === indexItem &&
                      a.local_campo_personalizado === "5"
                  )}
                  tipoNegocio={dadosCard?.tipoNegocio_coleta}
                  idLoja={dadosCard?.id_loja_coleta}
                  dataCard={dadosCard}
                />
              )}
          </div>
        </div>
      </div>
    </fieldset>
  );
};

export default ItemVisualizacaoCompraMaterial;