import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { useMemo } from "react";
import useSWR from "swr";
// buzzwareTech package imports
import { useTranslation } from "@buzzwaretech/i18n";
import { AreaChart } from "@buzzwaretech/propel/charts/area-chart";
import { EmptyStateCompact } from "@buzzwaretech/propel/empty-state";
import type { IChartResponse, TChartData } from "@buzzwaretech/types";
import { renderFormattedDate } from "@buzzwaretech/utils";
// hooks
import { useAnalytics } from "@/hooks/store/use-analytics";
// services
import { AnalyticsService } from "@/services/analytics.service";
// buzzwareTech web components
import AnalyticsSectionWrapper from "../analytics-section-wrapper";
import { ChartLoader } from "../loaders";

const analyticsService = new AnalyticsService();
const CreatedVsResolved = observer(function CreatedVsResolved() {
  const {
    selectedDuration,
    selectedDurationLabel,
    selectedProjects,
    selectedCycle,
    selectedModule,
    isPeekView,
    isEpic,
  } = useAnalytics();
  const params = useParams();
  const { t } = useTranslation();
  const workspaceSlug = params.workspaceSlug.toString();
  const { data: createdVsResolvedData, isLoading: isCreatedVsResolvedLoading } =
    useSWR(
      `created-vs-resolved-${workspaceSlug}-${selectedDuration}-${selectedProjects}-${selectedCycle}-${selectedModule}-${isPeekView}-${isEpic}`,
      () =>
        analyticsService.getAdvanceAnalyticsCharts<IChartResponse>(
          workspaceSlug,
          "work-items",
          {
            // date_filter: selectedDuration,
            ...(selectedProjects?.length > 0 && {
              project_ids: selectedProjects?.join(","),
            }),
            ...(selectedCycle ? { cycle_id: selectedCycle } : {}),
            ...(selectedModule ? { module_id: selectedModule } : {}),
            ...(isEpic ? { epic: true } : {}),
          },
          isPeekView,
        ),
    );
  const parsedData: TChartData<string, string>[] = useMemo(() => {
    if (!createdVsResolvedData?.data) return [];
    return createdVsResolvedData.data.map((datum) => ({
      ...datum,
      [datum.key]: datum.count,
      name: renderFormattedDate(datum.key) ?? datum.key,
    }));
  }, [createdVsResolvedData]);

  const areas = useMemo(
    () => [
      {
        key: "completed_issues",
        label: "Resolved",
        fill: "#19803833",
        fillOpacity: 1,
        stackId: "bar-one",
        showDot: false,
        smoothCurves: true,
        strokeColor: "#198038",
        strokeOpacity: 1,
      },
      {
        key: "created_issues",
        label: "Created",
        fill: "#1192E833",
        fillOpacity: 1,
        stackId: "bar-one",
        showDot: false,
        smoothCurves: true,
        strokeColor: "#1192E8",
        strokeOpacity: 1,
      },
    ],
    [],
  );

  return (
    <AnalyticsSectionWrapper
      title={t("workspace_analytics.created_vs_resolved")}
      subtitle={selectedDurationLabel}
      className="col-span-1"
    >
      {isCreatedVsResolvedLoading ? (
        <ChartLoader />
      ) : parsedData && parsedData.length > 0 ? (
        <AreaChart
          className="h-[350px] w-full"
          data={parsedData}
          areas={areas}
          xAxis={{
            key: "name",
            label: t("date"),
          }}
          yAxis={{
            key: "count",
            label: t("common.no_of", {
              entity: isEpic ? t("common.epics") : t("work_items"),
            }),
            offset: -60,
            dx: -24,
          }}
          legend={{
            align: "left",
            verticalAlign: "bottom",
            layout: "horizontal",
            wrapperStyles: {
              justifyContent: "start",
              alignContent: "start",
              paddingLeft: "40px",
              paddingTop: "10px",
            },
          }}
        />
      ) : (
        <EmptyStateCompact
          assetKey="unknown"
          assetClassName="size-20"
          rootClassName="border border-subtle px-5 py-10 md:py-20 md:px-20"
          title={t("workspace_empty_state.analytics_work_items.title")}
        />
      )}
    </AnalyticsSectionWrapper>
  );
});

export default CreatedVsResolved;