/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import React from "react";
import type { LegendProps } from "recharts";
// plane imports
import type { TChartLegend } from "@plane/types";
import { cn } from "../../utils/classname";

export const getLegendProps = (args: TChartLegend): LegendProps => {
  const { align, layout, verticalAlign } = args;
  return {
    layout,
    align,
    verticalAlign,
    wrapperStyle: {
      display: "flex",
      overflow: "hidden",
      ...(layout === "vertical"
        ? {
            top: 0,
            alignItems: "center",
            height: "100%",
          }
        : {
            left: 0,
            bottom: 0,
            width: "100%",
            justifyContent: "center",
          }),
      ...args.wrapperStyles,
    },
    content: <CustomLegend {...args} />,
  };
};

const CustomLegend = React.forwardRef(function CustomLegend(
  props: React.ComponentProps<"div"> &
    Pick<LegendProps, "payload" | "formatter" | "onClick" | "onMouseEnter" | "onMouseLeave"> &
    TChartLegend,
  ref: React.ForwardedRef<HTMLDivElement>
) {
  const { formatter, layout, onClick, onMouseEnter, onMouseLeave, payload } = props;

  if (!payload?.length) return null;

  return (
    <div
      ref={ref}
      className={cn("vertical-scrollbar flex scrollbar-sm items-center overflow-scroll px-4", {
        "max-h-full flex-col items-start py-4": layout === "vertical",
      })}
    >
      {payload.map((item, index) => (
        <div
          key={item.value}
          className={cn("flex items-center gap-1.5 text-13 font-medium whitespace-nowrap text-tertiary", {
            "px-2": layout === "horizontal",
            "py-2": layout === "vertical",
            "pt-0 pl-0": index === 0,
            "pr-0 pb-0": index === payload.length - 1,
            "cursor-pointer": !!props.onClick,
          })}
          onClick={(e) => onClick?.(item, index, e)}
          onMouseEnter={(e) => onMouseEnter?.(item, index, e)}
          onMouseLeave={(e) => onMouseLeave?.(item, index, e)}
        >
          <div
            className="size-2 flex-shrink-0 rounded-xs"
            style={{
              backgroundColor: item.color,
            }}
          />
          {/* @ts-expect-error recharts types are not up to date */}
          {formatter?.(item.value, { value: item.value }, index) ?? item.payload?.name}
        </div>
      ))}
    </div>
  );
});
CustomLegend.displayName = "CustomLegend";
