import { DoubleRightOutlined } from '@ant-design/icons';
import { ColorBlockStyle, LegendStyle, ExtraResource, LegendItemStyle } from './styled.js';
import { ExtraOverflow } from '../Overflow/index.js';
import Truncate from '../Truncate/index.js';
import { Dropdown, Menu } from 'antd';
import cs from 'classnames';
import React__default from 'react';

const ColorBlock = ({ background }) => /* @__PURE__ */ React__default.createElement("div", { className: cs(ColorBlockStyle, "color-block"), style: { background } });
const MetricLegend = (props) => {
  const { deselected, onClick, legends } = props;
  return /* @__PURE__ */ React__default.createElement(
    ExtraOverflow,
    {
      className: LegendStyle,
      extraEl: (end) => /* @__PURE__ */ React__default.createElement(
        Dropdown,
        {
          overlayClassName: ExtraResource,
          overlay: /* @__PURE__ */ React__default.createElement(Menu, null, legends.slice(end).map((legend, idx) => {
            return /* @__PURE__ */ React__default.createElement(
              Menu.Item,
              {
                className: cs(
                  LegendItemStyle,
                  deselected.includes(legend.id) && "deselected"
                ),
                key: legend.id,
                onClick: () => onClick(legend.id)
              },
              /* @__PURE__ */ React__default.createElement(ColorBlock, { background: legend.color }),
              /* @__PURE__ */ React__default.createElement("span", null, legend.name)
            );
          }))
        },
        /* @__PURE__ */ React__default.createElement(DoubleRightOutlined, { rotate: 90 })
      ),
      els: legends.map((legend) => {
        return /* @__PURE__ */ React__default.createElement(
          "div",
          {
            className: cs(
              LegendItemStyle,
              deselected.includes(legend.id) && "deselected"
            ),
            key: legend.id,
            onClick: () => onClick(legend.id)
          },
          /* @__PURE__ */ React__default.createElement(ColorBlock, { background: legend.color }),
          /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(Truncate, { text: legend.name, len: 50, backLen: 20 }))
        );
      })
    }
  );
};
const LegendComponent = (props) => {
  const { name, color } = props;
  return /* @__PURE__ */ React__default.createElement("div", { className: cs(LegendItemStyle, "legend-component") }, /* @__PURE__ */ React__default.createElement(ColorBlock, { background: color }), /* @__PURE__ */ React__default.createElement("span", null, name));
};
var MetricLegend$1 = MetricLegend;

export { ColorBlock, LegendComponent, MetricLegend$1 as default };
