import { useRouter } from "next/router";
import { mutate } from "swr";

// components
import { AnalyticsGraph, AnalyticsTable } from "components/analytics";
// ui
import { Button, Loader } from "@plane/ui";
// helpers
import { convertResponseToBarGraphData } from "helpers/analytics.helper";
// types
import { IAnalyticsParams, IAnalyticsResponse } from "types";
// fetch-keys
import { ANALYTICS } from "constants/fetch-keys";

type Props = {
  analytics: IAnalyticsResponse | undefined;
  error: any;
  fullScreen: boolean;
  params: IAnalyticsParams;
};

export const CustomAnalyticsMainContent: React.FC<Props> = (props) => {
  const { analytics, error, fullScreen, params } = props;

  const router = useRouter();
  const { workspaceSlug } = router.query;

  const yAxisKey = params.y_axis === "issue_count" ? "count" : "estimate";
  const barGraphData = convertResponseToBarGraphData(analytics?.distribution, params);

  return (
    <>
      {!error ? (
        analytics ? (
          analytics.total > 0 ? (
            <div className="h-full overflow-y-auto">
              <AnalyticsGraph
                analytics={analytics}
                barGraphData={barGraphData}
                params={params}
                yAxisKey={yAxisKey}
                fullScreen={fullScreen}
              />
              <AnalyticsTable analytics={analytics} barGraphData={barGraphData} params={params} yAxisKey={yAxisKey} />
            </div>
          ) : (
            <div className="grid h-full place-items-center p-5">
              <div className="space-y-4 text-custom-text-200">
                <p className="text-sm">No matching issues found. Try changing the parameters.</p>
              </div>
            </div>
          )
        ) : (
          <Loader className="space-y-6 p-5">
            <Loader.Item height="300px" />
            <Loader className="space-y-4">
              <Loader.Item height="30px" />
              <Loader.Item height="30px" />
              <Loader.Item height="30px" />
              <Loader.Item height="30px" />
            </Loader>
          </Loader>
        )
      ) : (
        <div className="grid h-full place-items-center p-5">
          <div className="space-y-4 text-custom-text-200">
            <p className="text-sm">There was some error in fetching the data.</p>
            <div className="flex items-center justify-center gap-2">
              <Button
                variant="primary"
                onClick={() => {
                  if (!workspaceSlug) return;

                  mutate(ANALYTICS(workspaceSlug.toString(), params));
                }}
              >
                Refresh
              </Button>
            </div>
          </div>
        </div>
      )}
    </>
  );
};