import React from 'react';
import classnames from 'classnames';
import { Tooltip, TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
import { CHART_LEGEND_ITEM_GLYPH_TYPES, ChartLegendItemGlyph } from './chart-legend-item-glyph';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function ChartLegendItem({
  item,
  isInteractive = false,
  onChange = () => {},
  onMouseEnter = () => {},
  onMouseLeave = () => {}
}) {
  const {
    key,
    label,
    color,
    className,
    isActive,
    glyphType = CHART_LEGEND_ITEM_GLYPH_TYPES.DISC,
    testId = 'chart-legend-item',
    tooltipText = '',
    isDisabled
  } = item;
  const id = `legend-item-${key}`;
  return /*#__PURE__*/_jsxs("div", {
    className: classnames('chart-legend-item', className),
    "test-id": testId,
    onMouseEnter: () => onMouseEnter({
      item
    }),
    onMouseLeave: () => onMouseLeave({
      item
    }),
    children: [isInteractive ? /*#__PURE__*/_jsx("input", {
      onChange: e => isDisabled ? null : onChange({
        item,
        isActive: e.target.checked
      }),
      id: id,
      "test-id": "chart-legend-item-input",
      type: "checkbox",
      checked: isActive,
      value: key,
      className: "chart-legend-item-checkbox",
      disabled: isDisabled
    }) : null, /*#__PURE__*/_jsx(Tooltip, {
      content: tooltipText,
      placement: TOOLTIP_PLACEMENT_TYPES.TOP,
      children: /*#__PURE__*/_jsxs("label", {
        htmlFor: id,
        className: "chart-legend-item-label",
        "aria-labelledby": `${id}-glyph ${id}-label`,
        children: [/*#__PURE__*/_jsx("span", {
          id: `${id}-glyph`,
          className: "chart-legend-glyph-wrapper",
          children: /*#__PURE__*/_jsx(ChartLegendItemGlyph, {
            glyphType: glyphType,
            color: color
          })
        }), /*#__PURE__*/_jsx("span", {
          id: `${id}-label`,
          children: label
        })]
      })
    })]
  });
}