import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { useForm } from "react-hook-form";
// buzzwareTech package imports
import { useTranslation } from "@buzzwaretech/i18n";
import type { IAnalyticsParams } from "@buzzwaretech/types";
import { ChartXAxisProperty, ChartYAxisMetric } from "@buzzwaretech/types";
import { cn } from "@buzzwaretech/utils";
// buzzwareTech web components
import AnalyticsSectionWrapper from "../analytics-section-wrapper";
import { AnalyticsSelectParams } from "../select/analytics-params";
import PriorityChart from "./priority-chart";

const CustomizedInsights = observer(function CustomizedInsights({
  peekView,
  isEpic,
}: {
  peekView?: boolean;
  isEpic?: boolean;
}) {
  const { t } = useTranslation();
  const { workspaceSlug } = useParams();
  const { control, watch, setValue } = useForm<IAnalyticsParams>({
    defaultValues: {
      x_axis: ChartXAxisProperty.PRIORITY,
      y_axis: isEpic
        ? ChartYAxisMetric.EPIC_WORK_ITEM_COUNT
        : ChartYAxisMetric.WORK_ITEM_COUNT,
    },
  });

  const params = {
    x_axis: watch("x_axis"),
    y_axis: watch("y_axis"),
    group_by: watch("group_by"),
  };

  return (
    <AnalyticsSectionWrapper
      title={t("workspace_analytics.customized_insights")}
      className="col-span-1"
      headerClassName={cn(peekView ? "flex-col items-start" : "")}
      actions={
        <AnalyticsSelectParams
          control={control}
          setValue={setValue}
          params={params}
          workspaceSlug={workspaceSlug.toString()}
          isEpic={isEpic}
        />
      }
    >
      <PriorityChart
        x_axis={params.x_axis}
        y_axis={params.y_axis}
        group_by={params.group_by}
      />
    </AnalyticsSectionWrapper>
  );
});

export default CustomizedInsights;