import LoaderSun from "@/components/common/Loader/LoaderSun";
import { listarTicketMedio } from "@/requests/CRUD/Propostas/listarPropostas";
import { useEffect, useState } from "react";

const GraficoTicketMedio = ({
  data,
  usuarios,
  lojas,
  periodoSelecionado,
  tipoNegocio,
  classificacaoNegocio,
}: any) => {
  const [ticketMedio, setTicketMedio] = useState<any>("");
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    atualizarAtividades();
  }, [periodoSelecionado, usuarios, lojas, tipoNegocio, classificacaoNegocio]);

  function atualizarAtividades() {
    setIsLoading(true);
    listarTicketMedio(periodoSelecionado, usuarios, lojas, tipoNegocio, classificacaoNegocio)
      .then((res: any) => {
        const soma = res?.reduce((acc: any, item: any) => {
          return acc + parseFloat(item.valorTotal_proposta || 0);
        }, 0);
        setTicketMedio(
          (soma / (res.length || 1))?.toLocaleString("pt-BR", {
            style: "currency",
            currency: "BRL",
          })
        );
      })
      .finally(() => {
        setIsLoading(false);
      });
  }

  return (
    <div className="bg-white rounded ml-3 p-4 mt-3 w-1/1 dark:bg-boxdark dark:text-white">
      <div className="flex flex-row justify-between">
        <p className="font-medium mr-5 text-sm text-black">
          {data.nome_grafico}
        </p>
      </div>
      <div className="grid grid-cols-1 w-full">
        {isLoading ? (
          <div className="loader mt-3">
            <p className="font-semibold">Aguarde...</p>
          </div>
        ) : (
          <div className="flex justify-center gap-15">
            <div className="grid text-center">
              <p className=" mt-2 text-xl font-bold">
                {ticketMedio || "Sem dados"}
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default GraficoTicketMedio;