import React from "react";
import Chip from '@material-ui/core/Chip';
import Divider from '@material-ui/core/Divider';
import Tooltip from '@material-ui/core/Tooltip';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import StarIcon from '@material-ui/icons/esm/Star';
import PropTypes from 'prop-types';
import { useRef, useState } from 'react';
import { DynamicContainerWithMenu } from '../containers/DynamicContainerWithMenu';
const useStyles = makeStyles((theme) => ({
    wrapper: {
        display: 'flex',
        gap: theme.spacing(1),
        flexWrap: 'noWrap',
        backgroundColor: `${theme.palette.secondary.light}80`, // The "80" sets the opacity to 0.5
        alignItems: 'center',
        flexGrow: 1,
        width: '100%'
    },
    chipHolder: {
        display: 'flex',
        gap: theme.spacing(1),
        flexWrap: 'noWrap',
        backgroundColor: `${theme.palette.secondary.light}80`, // The "80" sets the opacity to 0.5
        alignItems: 'center',
        overflow: 'scroll',
        '&::-webkit-scrollbar': {
            display: 'none'
        },
        flexGrow: 1
    },
    viewChip: {
        backgroundColor: theme.palette.secondary.main,
        color: 'white',
        maxWidth: '150px',
        transition: 'opacity 0.3s ease',
        marginLeft: theme.spacing(1)
    },
    menuItem: {
        backgroundColor: 'white'
    },
    filterChipMenuIcon: {
        background: theme.palette.common.grey,
        padding: theme.spacing(1),
        color: theme.palette.primary.main
    },
    additionalFilterChip: {},
    KPI: {
        marginLeft: 'auto',
        display: 'flex',
        gap: theme.spacing(1),
        color: 'grey',
        width: 'auto'
    },
    kpiValue: {
        color: 'black',
        fontSize: '1.1em'
    },
    kpiItem: {
        display: 'flex',
        justifyContent: 'center',
        width: 'max-content'
    },
    kpiLabel: {
        width: 'max-content',
        marginRight: theme.spacing(1)
    },
    clickedChip: {
        backgroundColor: theme.palette.primary.main,
        color: 'white',
        maxWidth: '150px'
    },
    filterChipLabel: {
        color: theme.palette.text.primary,
        whiteSpace: 'nowrap',
        marginRight: theme.spacing(1)
    },
    filterChipValue: {
        color: theme.palette.text.secondary,
        whiteSpace: 'nowrap'
    }
}));
export const ChipSection = (props) => {
    // ################### Props ###################
    const { filterChips = [], viewChips = [], additionalFilterChips = [], hideKpiSection = false, kpiValues = [], maxKPIsDisplayed = 4, handleDelete } = props;
    // ################### Custom hooks ###################
    const classes = useStyles();
    // ################### Refs ###################
    const chipRefs = useRef([]);
    const chipSectionContainerRef = useRef(null);
    const viewChipsContainerRef = useRef(null);
    const filterChipsContainerRef = useRef(null);
    const additionalFilterChipsContainerRef = useRef(null);
    const kpiContainerRef = useRef(null);
    // ################### States ###################
    const [selectedFilterChip, setSelectedFilterChip] = useState(null);
    // ################### Helper Function ###################
    const abbrNum = (number, decPlaces) => {
        if (typeof number === 'string' && !isNaN(Number(number))) {
            number = Number(number);
        }
        else if (typeof number !== 'number') {
            throw new Error('The input must be a number or a string that can be converted to a number.');
        }
        if (typeof decPlaces !== 'number') {
            return null;
        }
        decPlaces = Math.pow(10, decPlaces);
        let abbrev = ['k', 'm', 'b', 't'];
        for (let i = abbrev.length - 1; i >= 0; i--) {
            let size = Math.pow(10, (i + 1) * 3);
            if (size <= number) {
                number = Math.round((number * decPlaces) / size) / decPlaces;
                if (number === 1000 && i < abbrev.length - 1) {
                    number = 1;
                    i++;
                }
                number += abbrev[i];
                break;
            }
        }
        return number;
    };
    const isEmpty = (array) => Array.isArray(array) && array.length === 0;
    const abbreviateLabel = (label) => {
        const maxLength = 10;
        if (label.length > maxLength) {
            const newLabel = label.slice(0, maxLength - 3) + '...';
            return newLabel;
        }
        else {
            return null;
        }
    };
    const handleFilterChipToggle = (chip) => {
        setSelectedFilterChip(chip);
        if (typeof chip.onToggle === 'function') {
            chip.onToggle();
        }
    };
    const handleFilterChipUntoggle = () => {
        if (selectedFilterChip) {
            // if the user wants extra functionality when the filter chip is untoggled, call the function
            if (typeof selectedFilterChip.onUntoggle === 'function') {
                selectedFilterChip.onUntoggle();
            }
            setSelectedFilterChip(null);
        }
    };
    // ################### Render ###################
    return (React.createElement("div", { ref: chipSectionContainerRef, className: classes.wrapper, style: {
            display: [
                kpiValues,
                additionalFilterChips,
                viewChips,
                filterChips
            ].every((arr) => arr.length === 0)
                ? 'none'
                : 'flex'
        } }, React.createElement("div", { className: classes.chipHolder }, React.createElement("div", { ref: viewChipsContainerRef }, viewChips.map((chip, index) => (React.createElement(Chip, { onDelete: () => handleDelete('view', index), key: index, label: chip.label, className: classes.viewChip, icon: React.createElement(StarIcon, null), size: "small" })))), !isEmpty(viewChips) && !isEmpty(filterChips) && (React.createElement(Divider, { orientation: "vertical", flexItem: true })), !isEmpty(filterChips) && (React.createElement(DynamicContainerWithMenu, { className: classes.chipHolder, ref: filterChipsContainerRef }, selectedFilterChip && (React.createElement(Chip, { onDelete: handleFilterChipUntoggle, label: selectedFilterChip.label, className: classes.viewChip, size: "small" })), filterChips.map((chip, index) => {
        if (selectedFilterChip && chip.id === selectedFilterChip.id) {
            return null;
        }
        return (React.createElement(Tooltip, { title: chip.label }, React.createElement(Chip, { key: index, label: React.createElement("div", { style: {
                    display: 'flex',
                    flexWrap: 'noWrap'
                } }, React.createElement(Typography, { noWrap: true, className: chip.value ? classes.filterChipLabel : '' }, chip.label), React.createElement(Typography, { noWrap: true, className: classes.filterChipValue }, chip.value)), className: classes.filterChip, size: "small", onClick: () => handleFilterChipToggle(chip), ref: (el) => (chipRefs.current[index] = el) })));
    }))), !isEmpty(additionalFilterChips) && !isEmpty(filterChips) && (React.createElement(Divider, { orientation: "vertical", flexItem: true })), React.createElement("div", { ref: additionalFilterChipsContainerRef, style: { display: 'flex' } }, additionalFilterChips.map((chip, index) => (React.createElement(Chip, { variant: "outlined", onDelete: () => handleDelete('additionalFilter', index), key: index, label: chip.label, className: classes.additionalFilterChip, size: "small" }))))), !hideKpiSection && (React.createElement("div", { className: classes.KPI, ref: kpiContainerRef }, kpiValues.slice(0, 4).map((kpi, index) => (React.createElement(React.Fragment, null, React.createElement("div", { className: classes.kpiItem, id: index }, React.createElement("span", { className: classes.kpiLabel }, (abbreviateLabel(kpi.label) && (React.createElement(Tooltip, { title: kpi.label, arrow: true }, React.createElement(Typography, { noWrap: true }, React.createElement("span", null, kpi.label, ":"))))) || React.createElement(React.Fragment, null, kpi.label)), React.createElement("span", { className: classes.kpiValue }, React.createElement(Tooltip, { title: kpi.value, arrow: true }, React.createElement("span", null, abbrNum(kpi.value, 1))))), index !== maxKPIsDisplayed - 1 && (React.createElement(Divider, { orientation: "vertical", flexItem: true })))))))));
};
ChipSection.propTypes = {
    /**
     * An array of filter chips.
     */
    filterChips: PropTypes.arrayOf(PropTypes.shape({
        label: PropTypes.string.isRequired,
        value: PropTypes.string.isRequired
    })),
    /**
     * An array of view chips.
     */
    viewChips: PropTypes.arrayOf(PropTypes.shape({
        label: PropTypes.string.isRequired
    })),
    /**
     * An array of additional filter chips.
     */
    additionalFilterChips: PropTypes.arrayOf(PropTypes.shape({
        label: PropTypes.string.isRequired
    })),
    /**
     * Indicates whether to hide the KPI section.
     */
    hideKpiSection: PropTypes.bool,
    /**
     * An array of KPI values.
     */
    kpiValues: PropTypes.arrayOf(PropTypes.shape({
        label: PropTypes.string.isRequired,
        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
            .isRequired
    })),
    /**
     * The maximum number of KPIs to display.
     */
    maxKPIsDisplayed: PropTypes.number,
    /**
     * A function to handle chip deletion.
     */
    handleDelete: PropTypes.func,
    /**
     * The index of the selected filter chip.
     */
    selectedFilterChipsIndex: PropTypes.number,
    /**
     * A function to set the selected filter chip index.
     */
    setSelectedFilterChipsIndex: PropTypes.func
};
//# sourceMappingURL=ChipSection.js.map