import { ArrowChevronDown16SecondaryIcon, ArrowChevronDown16BlueIcon, ArrowChevronUp16BlueIcon } from '@cloudtower/icons-react';
import Icon from '../Icon/index.js';
import { LineChartColorBlockStyle, LegendStyle, ExtraResource, LegendItemsStyleDropdown, LegendItemsStyle } from './styled.js';
import { ExtraOverflow } from '../Overflow/index.js';
import Truncate from '../Truncate/index.js';
import { Menu } from 'antd';
import cs from 'classnames';
import React__default from 'react';
import { Antd5Dropdown } from '../Antd5Dropdown/Antd5Dropdown.js';

const LineChartColorBlock = ({ background, borderd = false }) => /* @__PURE__ */ React__default.createElement(
  "div",
  {
    className: cs(
      LineChartColorBlockStyle,
      "color-block",
      borderd && "borderd"
    ),
    style: { background }
  }
);
const LineChartLegend = (props) => {
  const { deselected, onClick, legends, onHover, hovering, hovereringSelf } = props;
  const [isDropdownOpen, setIsDropdownOpen] = React__default.useState(false);
  return /* @__PURE__ */ React__default.createElement(
    ExtraOverflow,
    {
      className: LegendStyle,
      extraEl: (end) => /* @__PURE__ */ React__default.createElement(
        Antd5Dropdown,
        {
          overlayClassName: ExtraResource,
          trigger: ["click"],
          onVisibleChange: setIsDropdownOpen,
          overlay: /* @__PURE__ */ React__default.createElement(Menu, null, legends.slice(end).map((legend, idx) => {
            return /* @__PURE__ */ React__default.createElement(
              Menu.Item,
              {
                className: cs(
                  LegendItemsStyleDropdown,
                  deselected.includes(legend.id) && "deselected",
                  hovering.includes(legend.id) && "hovering",
                  hovereringSelf.includes(legend.id) && "hoverering-self"
                ),
                key: legend.id,
                onClick: () => onClick(legend.id),
                onMouseEnter: () => onHover("enter", legend.id),
                onMouseLeave: () => onHover("leave", legend.id)
              },
              /* @__PURE__ */ React__default.createElement(LineChartColorBlock, { background: legend.color }),
              /* @__PURE__ */ React__default.createElement("span", { className: "legend-name" }, legend.name)
            );
          }))
        },
        /* @__PURE__ */ React__default.createElement(
          Icon,
          {
            alt: "arrowChevronDownSmall16Secondary",
            className: "dropdown-trigger",
            src: ArrowChevronDown16SecondaryIcon,
            hoverSrc: ArrowChevronDown16BlueIcon,
            activeSrc: ArrowChevronUp16BlueIcon,
            active: isDropdownOpen
          }
        )
      ),
      els: legends.map((legend) => {
        return /* @__PURE__ */ React__default.createElement(
          "div",
          {
            className: cs(
              LegendItemsStyle,
              deselected.includes(legend.id) && "deselected",
              hovering.includes(legend.id) && "hovering",
              hovereringSelf.includes(legend.id) && "hoverering-self"
            ),
            key: legend.id,
            onMouseEnter: () => onHover("enter", legend.id),
            onMouseLeave: () => onHover("leave", legend.id),
            onClick: () => onClick(legend.id)
          },
          /* @__PURE__ */ React__default.createElement(LineChartColorBlock, { background: legend.color }),
          /* @__PURE__ */ React__default.createElement("span", { className: "legend-name" }, /* @__PURE__ */ React__default.createElement(Truncate, { text: legend.name, len: 50, backLen: 20 }))
        );
      })
    }
  );
};
var LineChartLegend$1 = LineChartLegend;

export { LineChartColorBlock, LineChartLegend$1 as default };
