import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { useChartLegend } from './ChartLegendWrapper';
import { Text } from '../text/Text.component';
import { chartColors } from '../../style/theme';
import { useCallback } from 'react';
const Legend = styled.div `
  display: flex;
  flex-direction: ${({ direction }) => direction === 'horizontal' ? 'row' : 'column'};
  gap: ${({ direction }) => (direction === 'horizontal' ? '16px' : '8px')};
  flex-wrap: wrap;
`;
export const LegendItem = styled.div `
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
  opacity: ${({ selected, disabled }) => (disabled ? 0.5 : selected ? 1 : 0.7)};
  transition: opacity 0.2s ease;

  &:hover {
    opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
  }
`;
export const LegendShape = styled.div `
  ${({ shape, color, chartColors }) => {
    if (shape === 'line') {
        return `
        width: 20px;
        height: 2px;
        background-color: ${chartColors[color] || color};
      `;
    }
    else if (shape === 'rectangle') {
        return `
        width: 12px;
        height: 12px;
        background-color: ${chartColors[color] || color};
        border-radius: 2px;
      `;
    }
    else {
        console.error('The shape is not valid. Please use "line" or "rectangle".');
    }
}}
`;
export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal', legendSize = 'Basic', }) => {
    const { listResources, getColor, isSelected, addSelectedResource, removeSelectedResource, selectAllResources, selectOnlyResource, isOnlyOneSelected, } = useChartLegend();
    const resources = listResources();
    const handleLegendClick = useCallback((resource, event) => {
        if (disabled)
            return;
        const isModifierClick = event.metaKey || event.ctrlKey;
        const itemIsSelected = isSelected(resource);
        if (isModifierClick) {
            if (itemIsSelected) {
                if (isOnlyOneSelected()) {
                    selectAllResources();
                }
                else {
                    removeSelectedResource(resource);
                }
            }
            else {
                addSelectedResource(resource);
            }
        }
        else if (itemIsSelected && isOnlyOneSelected()) {
            selectAllResources();
        }
        else {
            selectOnlyResource(resource);
        }
    }, [
        disabled,
        isSelected,
        addSelectedResource,
        removeSelectedResource,
        selectAllResources,
        selectOnlyResource,
        isOnlyOneSelected,
    ]);
    return (_jsx(Legend, { direction: direction, children: resources.map((resource) => {
            const color = getColor(resource);
            const selected = isSelected(resource);
            return (_jsxs(LegendItem, { disabled: disabled, selected: selected, "aria-label": `${resource} ${selected ? 'selected' : 'not selected'}`, onClick: (event) => handleLegendClick(resource, event), children: [_jsx(LegendShape, { color: color, shape: shape, chartColors: chartColors }), _jsx(Text, { variant: legendSize, children: resource })] }, resource));
        }) }));
};
