/* eslint-disable react/jsx-sort-default-props */
/* eslint-disable react/sort-prop-types */
/* eslint-disable jsx-a11y/anchor-is-valid */
/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import { memo } from 'react';
import { formatNumber, styled } from '@superset-ui/core';
const StyledLegend = styled.div `
  ${({ theme }) => `
    font-size: ${theme.typography.sizes.s}px;
    position: absolute;
    background: ${theme.colors.grayscale.light5};
    box-shadow: 0 0 ${theme.gridUnit}px ${theme.colors.grayscale.light2};
    margin: ${theme.gridUnit * 6}px;
    padding: ${theme.gridUnit * 3}px ${theme.gridUnit * 5}px;
    outline: none;
    overflow-y: scroll;
    max-height: 200px;

    & ul {
      list-style: none;
      padding-left: 0;
      margin: 0;

      & li a {
        display: flex;
        color: ${theme.colors.grayscale.base};
        text-decoration: none;
        padding: ${theme.gridUnit}px 0;

        & span {
          margin-right: ${theme.gridUnit}px;
        }
      }
    }
  `}
`;
const categoryDelimiter = ' - ';
const Legend = ({ format: d3Format = null, forceCategorical = false, position = 'tr', categories: categoriesObject = {}, toggleCategory = () => { }, showSingleCategory = () => { }, }) => {
    const format = (value) => {
        if (!d3Format || forceCategorical) {
            return value;
        }
        const numValue = parseFloat(value);
        return formatNumber(d3Format, numValue);
    };
    const formatCategoryLabel = (k) => {
        if (!d3Format) {
            return k;
        }
        if (k.includes(categoryDelimiter)) {
            const values = k.split(categoryDelimiter);
            return format(values[0]) + categoryDelimiter + format(values[1]);
        }
        return format(k);
    };
    if (Object.keys(categoriesObject).length === 0 || position === null) {
        return null;
    }
    const categories = Object.entries(categoriesObject).map(([k, v]) => {
        const style = { color: `rgba(${v.color.join(', ')})` };
        const icon = v.enabled ? '\u25FC' : '\u25FB';
        return (<li key={k}>
        <a href="#" role="button" onClick={() => toggleCategory(k)} onDoubleClick={() => showSingleCategory(k)}>
          <span style={style}>{icon}</span> {formatCategoryLabel(k)}
        </a>
      </li>);
    });
    const vertical = position?.charAt(0) === 't' ? 'top' : 'bottom';
    const horizontal = position?.charAt(1) === 'r' ? 'right' : 'left';
    const style = {
        position: 'absolute',
        [vertical]: '0px',
        [horizontal]: '10px',
    };
    return (<StyledLegend className="dupa" style={style}>
      <ul>{categories}</ul>
    </StyledLegend>);
};
export default memo(Legend);
//# sourceMappingURL=Legend.jsx.map