import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { Filter, Loader2 } from "lucide-react";
import { UserTypeChartResponse } from "@/admin/types.ts";
import Tips from "@/components/Tips.tsx";
import { DonutChart, Legend } from "@tremor/react";
import { Button } from "@/components/ui/button.tsx";
import { MultiCombobox } from "@/components/ui/multi-combobox.tsx";

type UserTypeChartProps = {
  data: UserTypeChartResponse;
};

enum UserType {
  normal = "normal",
  api_paid = "api_paid",
  basic_plan = "basic_plan",
  standard_plan = "standard_plan",
  pro_plan = "pro_plan",
}

type UserStatus = {
  name: string;
  value: number;
};

function UserTypeChart({ data }: UserTypeChartProps) {
  const { t } = useTranslation();

  const [display, setDisplay] = useState<UserType[]>([
    UserType.normal,
    UserType.api_paid,
    UserType.basic_plan,
    UserType.standard_plan,
    UserType.pro_plan,
  ]);

  const chart = useMemo((): UserStatus[] => {
    return [
      display.includes(UserType.normal) && {
        name: t("admin.identity.normal"),
        value: data.normal,
      },
      display.includes(UserType.api_paid) && {
        name: t("admin.identity.api_paid"),
        value: data.api_paid,
      },
      display.includes(UserType.basic_plan) && {
        name: t("admin.identity.basic_plan"),
        value: data.basic_plan,
      },
      display.includes(UserType.standard_plan) && {
        name: t("admin.identity.standard_plan"),
        value: data.standard_plan,
      },
      display.includes(UserType.pro_plan) && {
        name: t("admin.identity.pro_plan"),
        value: data.pro_plan,
      },
    ].filter((item) => item) as UserStatus[];
  }, [display, data, t("admin.identity.normal")]);

  return (
    <div className={`chart`}>
      <p className={`chart-title mb-2`}>
        <p className={`flex flex-row items-center w-full`}>
          <p>
            {t("admin.user-type-chart")}
            <Tips
              className={`translate-y-[2px]`}
              content={t("admin.user-type-chart-tip")}
            />
          </p>
          {data.total === 0 && (
            <Loader2 className={`h-4 w-4 ml-1 animate-spin`} />
          )}
          <div className={`grow`} />
          <MultiCombobox
            value={display}
            align={`end`}
            onChange={(value) => setDisplay(value as UserType[])}
            list={[
              UserType.normal,
              UserType.api_paid,
              UserType.basic_plan,
              UserType.standard_plan,
              UserType.pro_plan,
            ]}
            listTranslate={`admin.identity`}
          >
            <Button variant={`ghost`} size={`icon-sm`}>
              <Filter className={`h-4 w-4`} />
            </Button>
          </MultiCombobox>
        </p>
      </p>
      <div className={`flex flex-row`}>
        <DonutChart
          className={`common-chart p-4 w-[50%]`}
          variant={`donut`}
          data={chart}
          showAnimation={true}
          colors={["blue", "cyan", "indigo", "violet", "fuchsia"]}
        />
        <Legend
          className={`common-chart p-4 w-[50%]`}
          categories={chart.map((item) => item.name)}
          colors={["blue", "cyan", "indigo", "violet", "fuchsia"]}
        />
      </div>
    </div>
  );
}

export default UserTypeChart;
