import InputSelectComponent from "@/components/Forms/InputSelect";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { atividadeCards } from "@/requests/CRM/Dashboard/listarDashboard";
import { useAuth } from "@/src/contexts/authContext";
import { ApexOptions } from "apexcharts";
import dynamic from "next/dynamic";
import { useEffect, useState } from "react";

const ReactApexChart = dynamic(() => import("react-apexcharts"), {
  ssr: false,
});

const GraficoAtividadeLeads = ({ data, usuarios }: any) => {
  const { valuesSession, perfil } = useAuth();
  const { session } = valuesSession();
  const id_usuario = session.id_usuario;
  const [series, setSeries] = useState<any[]>([]);
  const [usuarioSelecionado, setUsuarioSelecionado] = useState<any>(
    perfil.visualiza_todos_contatos_perfil == "0" ? id_usuario : "*"
  );
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    atualizarAtividades();
  }, [usuarioSelecionado]);

  useEffect(() => {
    if (usuarioSelecionado) {
      atualizarAtividades(
        usuarioSelecionado == "*" ? undefined : usuarioSelecionado
      );
    }
  }, [usuarioSelecionado]);

  function atualizarAtividades(vendedor: string | undefined = undefined) {
    setIsLoading(true);
    atividadeCards(vendedor)
      .then((res: any) => {
        setSeries([+res.quantidade_ativos, +res.quantidade_inativos]);
      })
      .finally(() => {
        setIsLoading(false);
      });
  }

  const options: ApexOptions = {
    chart: {
      height: 390,
      type: "pie",
    },

    plotOptions: {
      radialBar: {
        offsetY: 0,
        startAngle: 0,
        endAngle: 270,
        hollow: {
          margin: 5,
          size: "30%",
          background: "transparent",
          image: undefined,
        },
        dataLabels: {
          name: {
            show: false,
          },
          value: {
            show: false,
          },
        },
      },
    },
    colors: ["#4CAF50", "#2196F3", "#FFC107", "#FF5722", "#800080", "#FF9800"],

    labels: ["Ativo", "Inativo"],
    legend: {
      show: true,
      floating: true,
      fontSize: "16px",
      position: "left",
      offsetX: 160,
      offsetY: 15,
      labels: {
        useSeriesColors: true,
      },
      markers: {},
      formatter: function (seriesName, opts) {
        return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex];
      },
      itemMargin: {
        vertical: 3,
      },
    },
    noData: {
      text: "Nenhum Dado Disponível",
      align: "center",
      verticalAlign: "middle",
      offsetX: 0,
      offsetY: 0,
      style: {
        fontSize: "20px",
        color: "#888",
      },
    },
    responsive: [
      {
        breakpoint: 480,
        options: {
          legend: {
            show: false,
          },
        },
      },
    ],
  };

  return (
    <div className="bg-white rounded ml-3 p-4 mt-3 w-1/1 dark:bg-boxdark dark:text-white">
      <p className="font-semibold">{data.nome_grafico}</p>
      <div className="flex flex-row justify-between items-center gap-2 pt-2">
        <InputSelectComponent
          options={
            usuarios?.length > 0
              ? [
                  { label: "Todos Vendedores", value: "*" },
                  ...usuarios.map((usuario: any) => ({
                    label: usuario.nome_usuario,
                    value: usuario.id_usuario,
                  })),
                ]
              : []
          }
          onChange={(e: any) => setUsuarioSelecionado(e.value)}
          width="w-67"
          placeholder="Todos Vendedores"
          disabled={perfil.visualiza_todos_contatos_perfil == "0"}
          defaultValue={usuarioSelecionado}
        />
      </div>
      {isLoading ? (
        <div className="w-full h-[500px] flex flex-col justify-center items-center">
          <LoaderSun />
        </div>
      ) : (
        series[0] &&
        series.length > 0 && (
          <ReactApexChart
            options={options}
            series={series}
            type="pie"
            height={350}
          />
        )
      )}
    </div>
  );
};

export default GraficoAtividadeLeads;