import CheckIcon from '../../../../../../node_modules/@mui/icons-material/esm/CheckRounded.mjs';
import DoneAllIcon from '../../../../../../node_modules/@mui/icons-material/esm/DoneAll.mjs';
import ExpandMore from '../../../../../../node_modules/@mui/icons-material/esm/ExpandMore.mjs';
import RemoveIcon from '../../../../../../node_modules/@mui/icons-material/esm/RemoveRounded.mjs';
import React__default from 'react';
import { useUniqueId } from '../../../utils/uniqueId.mjs';
import { DEFAULT_GRID_COLUMN_WIDTH } from './constants.mjs';
import Select from '../../../../../../node_modules/@mui/material/Select/Select.mjs';
import styled from '../../../../../../node_modules/@mui/material/styles/styled.mjs';

const MULTISELECT_VALUE = 'all_values';
const SelectContainer = styled('div')(({ theme, fullWidth, readOnly })=>[
        {
            [theme.breakpoints.down('md')]: {
                width: '100%',
                minWidth: 'unset',
                flex: 1
            },
            width: fullWidth ? '100%' : DEFAULT_GRID_COLUMN_WIDTH,
            minWidth: DEFAULT_GRID_COLUMN_WIDTH,
            display: 'flex',
            flexDirection: 'column',
            gap: theme.spacing(0.5)
        },
        readOnly && {
            // Need this to wrap text and ellipsis after two lines
            display: '-webkit-box',
            '-webkit-line-clamp': 2,
            '-webkit-box-orient': 'vertical',
            overflow: 'hidden'
        }
    ]);
const SelectCore = ({ caption, disabled, fullWidth, id, label, menuAnchorHorizontal, selectItems, multiple, onChange, placeholder, readOnly, required, value, checkIconSx, selectSx, LabelComponent: Label, MenuItemComponent: MenuItem, TypographyComponent: Typography })=>{
    const selectId = useUniqueId(id);
    const totalOptions = selectItems.filter((item)=>!item.disabled).length;
    // If multiple = true, MUI will error if value is not an array.
    const isMultiSelect = multiple && Array.isArray(value);
    const hasMoreThanOneChild = totalOptions > 1;
    let MultiSelectIcon;
    let canSelectAll;
    if (isMultiSelect && hasMoreThanOneChild) {
        if (value.length > 0) {
            // At least 1 item has been selected
            MultiSelectIcon = RemoveIcon;
            canSelectAll = false;
        } else {
            MultiSelectIcon = DoneAllIcon;
            canSelectAll = true;
        }
    }
    const handleChange = (event)=>{
        // Don't call onChange when the 'All' multiselect value is selected.
        if (Array.isArray(event.target.value) && event.target.value.includes(MULTISELECT_VALUE)) {
            return;
        }
        onChange?.(event.target.value);
    };
    // Select all function called for multiselect.
    const selectAll = ()=>{
        if (!isMultiSelect || !hasMoreThanOneChild || !onChange) {
            return;
        }
        // Set event.target.value to be an array that includes all menu item values.
        const newValue = selectItems.filter((item)=>!item.disabled).map((item)=>item.value);
        onChange(newValue);
    };
    // Deselect all function called for multiselect.
    const deselectAll = ()=>{
        if (!isMultiSelect || !hasMoreThanOneChild || !onChange) {
            return;
        }
        // Set event.target.value to be empty array.
        const newValue = [];
        onChange(newValue);
    };
    const getRenderValue = (value)=>{
        if (value === undefined || value === null || Array.isArray(value) && value.length === 0) {
            return null;
        }
        // If multiselect, render the labels of the items selected.
        if (Array.isArray(value)) {
            const valueSet = new Set(value);
            return selectItems.filter((item)=>valueSet.has(item.value)).map((item)=>item.label).join(', ');
        }
        // Otherwise render the selected item label.
        return selectItems.find((item)=>item.value === value)?.label;
    };
    // Value that will be rendered in Select input.
    const renderValue = (val)=>{
        const renderText = getRenderValue(val);
        if (!renderText) {
            // If no value, render a placeholder.
            return placeholder || 'Select option...';
        } else if (Array.isArray(val) && val.length === totalOptions && hasMoreThanOneChild) {
            // Else if all selected, render 'All'.
            return 'All';
        }
        return renderText;
    };
    const shouldDisable = disabled && !readOnly;
    return /*#__PURE__*/ React__default.createElement(SelectContainer, {
        fullWidth: fullWidth,
        readOnly: readOnly
    }, label && /*#__PURE__*/ React__default.createElement(Label, {
        variant: "caption",
        disabled: shouldDisable,
        htmlFor: selectId,
        required: required
    }, label), readOnly && /*#__PURE__*/ React__default.createElement(Typography, null, getRenderValue(value) ?? 'None selected'), !readOnly && /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Select, {
        sx: selectSx,
        IconComponent: ExpandMore,
        MenuProps: {
            anchorOrigin: {
                horizontal: menuAnchorHorizontal ?? 'center',
                vertical: 'bottom'
            },
            transformOrigin: {
                horizontal: 'center',
                vertical: 'top'
            }
        },
        disableUnderline: true,
        disabled: shouldDisable,
        displayEmpty: true,
        fullWidth: true,
        id: selectId,
        multiple: multiple,
        onChange: handleChange,
        renderValue: (value)=>/*#__PURE__*/ React__default.createElement(Typography, {
                variant: "body2"
            }, renderValue(value)),
        value: value ?? ''
    }, isMultiSelect && hasMoreThanOneChild && /*#__PURE__*/ React__default.createElement(MenuItem, {
        Icon: MultiSelectIcon ? /*#__PURE__*/ React__default.createElement(MultiSelectIcon, {
            fontSize: "small"
        }) : /*#__PURE__*/ React__default.createElement("div", null),
        forceSelected: !!MultiSelectIcon,
        label: canSelectAll ? 'Select all' : 'Unselect',
        onClick: canSelectAll ? selectAll : deselectAll,
        value: MULTISELECT_VALUE
    }), selectItems.map((menuItem)=>/*#__PURE__*/ React__default.createElement(MenuItem, {
            Icon: /*#__PURE__*/ React__default.createElement(CheckIcon, {
                sx: checkIconSx,
                fontSize: "small"
            }),
            key: menuItem.value,
            ...menuItem
        }))), caption && /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "caption",
        disabled: shouldDisable
    }, caption)));
};

export { SelectContainer, SelectCore };
//# sourceMappingURL=Select.mjs.map
