import { atividadeCards } from "@/requests/CRM/Dashboard/listarDashboard";
import { ApexOptions } from "apexcharts";
import dynamic from "next/dynamic";
import { useEffect, useState } from "react";
import { BsThreeDotsVertical } from "react-icons/bs";

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

const GraficoAtividadeLeads = ({ data }: any) => {
  const [series, setSeries] = useState<any[]>([]);
  const [groups, setGroups] = useState<any[]>([]);
  const [dropdownVisible, setDropdownVisible] = useState(false);
  const [periodoSelecionado, setPeriodoSelecionado] = useState("dia");

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

  function atualizarAtividades(grupo: string) {
    setDropdownVisible(false);
    atividadeCards(grupo).then((res: any) => {
      setPeriodoSelecionado(grupo);
      setGroups(res.map((e: any) => e.data || "Não definido"));
      setSeries([
        {
          name: "Ativos",
          data: res.map((e: any) => e.quantidade_ativos),
        },
        {
          name: "Inativos",
          data: res.map((e: any) => e.quantidade_inativos),
        },
      ]);
    });
  }

  const options: ApexOptions = {
    chart: {
      type: "bar",
      height: 350,
      stacked: true,
      stackType: "100%",
    },
    responsive: [
      {
        breakpoint: 480,
        options: {
          legend: {
            position: "bottom",
            offsetX: -10,
            offsetY: 0,
          },
        },
      },
    ],
    xaxis: {
      categories: groups,
    },
    fill: {
      opacity: 1,
    },
    legend: {
      position: "right",
      offsetX: 0,
      offsetY: 50,
    },
  };

  return (
    <div className="bg-white rounded ml-3 p-4 mt-3 w-1/1 dark:bg-boxdark dark:text-white">
      <div className="flex w-full max-w-50 justify-end">
        <button
          className="rounded-full md:hidden  py-2 px-4 text-sm font-medium text-black bg-white dark:bg-black dark:text-white  hover:bg-white hover:shadow-card"
          onClick={() => setDropdownVisible(!dropdownVisible)}
        >
          <BsThreeDotsVertical />
        </button>
        {dropdownVisible && (
          <ul className="absolute  z-1 right-0 mt-2 w-48 bg-white border border-gray-200 dark:bg-boxdark rounded-md shadow-lg">
            <li
              className="py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
              onClick={() => atualizarAtividades("dia")}
            >
              Por Dia
            </li>

            <li
              className="py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
              onClick={() => atualizarAtividades("semana")}
            >
              Por Semana
            </li>
            <li
              className="py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
              onClick={() => atualizarAtividades("mes")}
            >
              Por Mês
            </li>
          </ul>
        )}
        <div className="inline-flexc hidden md:inline-flex items-center rounded-md bg-whiter p-1.5 dark:bg-meta-4">
          <button
            className={`rounded py-1 px-3 text-xs font-medium text-black dark:text-white ${
              periodoSelecionado === "dia"
                ? "bg-white shadow-card dark:bg-black"
                : "hover:bg-white hover:shadow-card dark:hover:bg-boxdark"
            }`}
            onClick={() => atualizarAtividades("dia")}
          >
            Dia
          </button>
          <button
            className={`rounded py-1 px-3 text-xs font-medium text-black dark:text-white ${
              periodoSelecionado === "semana"
                ? "bg-white shadow-card dark:bg-black"
                : "hover:bg-white hover:shadow-card dark:hover:bg-boxdark"
            }`}
            onClick={() => atualizarAtividades("semana")}
          >
            Semana
          </button>
          <button
            className={`rounded py-1 px-3 text-xs font-medium text-black dark:text-white ${
              periodoSelecionado === "mes"
                ? "bg-white shadow-card dark:bg-black"
                : "hover:bg-white hover:shadow-card dark:hover:bg-boxdark"
            }`}
            onClick={() => atualizarAtividades("mes")}
          >
            Mês
          </button>
        </div>
      </div>
      {series[0] && series.length > 0 && (
        <ReactApexChart options={options} series={series} type="bar" height={350} />
      )}
    </div>
  );
};

export default GraficoAtividadeLeads;