"use client";
import { FC, Fragment } from "react";
import { observer } from "mobx-react";
// plane ui
import { Loader } from "@plane/ui";
// components
import ProgressChart from "@/components/core/sidebar/progress-chart";
import { validateCycleSnapshot } from "@/components/cycles";
// helpers
import { getDate } from "@/helpers/date-time.helper";
// hooks
import { useCycle } from "@/hooks/store";

type ProgressChartProps = {
  workspaceSlug: string;
  projectId: string;
  cycleId: string;
};
export const SidebarChart: FC<ProgressChartProps> = observer((props) => {
  const { workspaceSlug, projectId, cycleId } = props;

  // hooks
  const { getEstimateTypeByCycleId, getCycleById } = useCycle();

  // derived data
  const cycleDetails = validateCycleSnapshot(getCycleById(cycleId));
  const cycleStartDate = getDate(cycleDetails?.start_date);
  const cycleEndDate = getDate(cycleDetails?.end_date);
  const totalEstimatePoints = cycleDetails?.total_estimate_points || 0;
  const totalIssues = cycleDetails?.total_issues || 0;
  const estimateType = getEstimateTypeByCycleId(cycleId);

  const chartDistributionData =
    estimateType === "points" ? cycleDetails?.estimate_distribution : cycleDetails?.distribution || undefined;

  const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;

  if (!workspaceSlug || !projectId || !cycleId) return null;

  return (
    <div>
      <div className="relative flex items-center gap-2">
        <div className="flex items-center justify-center gap-1 text-xs">
          <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
          <span>Ideal</span>
        </div>
        <div className="flex items-center justify-center gap-1 text-xs">
          <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
          <span>Current</span>
        </div>
      </div>
      {cycleStartDate && cycleEndDate && completionChartDistributionData ? (
        <Fragment>
          <ProgressChart
            distribution={completionChartDistributionData}
            startDate={cycleStartDate}
            endDate={cycleEndDate}
            totalIssues={estimateType === "points" ? totalEstimatePoints : totalIssues}
            plotTitle={estimateType === "points" ? "points" : "issues"}
          />
        </Fragment>
      ) : (
        <Loader className="w-full h-[160px] mt-4">
          <Loader.Item width="100%" height="100%" />
        </Loader>
      )}
    </div>
  );
});