/* eslint-disable react/require-default-props */
import PropTypes from 'prop-types';
import { Box, Chip, FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography } from '@mui/material';
import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
import { mergeSx } from '@arcblock/ux/lib/Util/style';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function SimpleSelect({
  fullWidth = false,
  multiple = false,
  required = false,
  label = '',
  placeholder = '',
  options = [],
  helperText = '',
  error = false,
  margin = '',
  size,
  slotProps = {},
  ...rest
}) {
  const defaultOption = options.find(item => item.value === rest.value);
  const defaultValue = defaultOption?.title;
  return /*#__PURE__*/_jsxs(FormControl, {
    margin: margin,
    fullWidth: fullWidth,
    error: error,
    sx: slotProps?.formControl?.sx,
    children: [/*#__PURE__*/_jsx(InputLabel, {
      size: size,
      sx: slotProps?.label?.sx,
      children: `${label}${required ? '*' : ''}`
    }), /*#__PURE__*/_jsxs(Select, {
      multiple: multiple,
      input: /*#__PURE__*/_jsx(OutlinedInput, {
        defaultValue: defaultValue,
        sx: {
          flex: 1
        },
        required: required,
        label: label,
        inputProps: {
          margin
        },
        size: size
      }),
      renderValue: selected => {
        if (multiple) {
          return /*#__PURE__*/_jsx(Box, {
            sx: {
              display: 'flex',
              flexWrap: 'wrap',
              gap: 0.5
            },
            children: selected.map(value => {
              const option = options.find(item => item.value === value);
              return option && option.title && /*#__PURE__*/_jsx(Chip, {
                size: "small",
                label: option.title
              }, value);
            })
          });
        }
        const option = options.find(item => item.value === selected);
        return option && option.title && /*#__PURE__*/_jsxs(Box, {
          children: [/*#__PURE__*/_jsx(Typography, {
            component: "span",
            children: option.title
          }), /*#__PURE__*/_jsx(Typography, {
            component: "span",
            variant: "body2",
            sx: {
              marginLeft: 1,
              color: 'text.secondary'
            },
            children: option.description
          })]
        });
      }
      // eslint-disable-next-line react/no-unstable-nested-components
      ,
      IconComponent: props => /*#__PURE__*/_jsx(ArrowDownwardIcon, {
        ...props,
        width: 20,
        height: 20
      }),
      ...rest,
      sx: mergeSx({
        '& .MuiInputBase-input': {
          width: 'calc(100% - 46px)',
          '& > .MuiBox-root:first-of-type': {
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap'
          }
        }
      }, rest.sx),
      children: [placeholder ? /*#__PURE__*/_jsx(MenuItem, {
        disabled: true,
        children: /*#__PURE__*/_jsx("em", {
          children: placeholder
        })
      }) : null, !required && !multiple && /*#__PURE__*/_jsx(MenuItem, {
        value: "",
        children: "None"
      }), options.map(option => option && option.value && /*#__PURE__*/_jsx(MenuItem, {
        value: option.value,
        disabled: option.disabled || false,
        children: /*#__PURE__*/_jsxs(Box, {
          sx: mergeSx({
            display: 'flex',
            flexDirection: 'column',
            gap: 1
          }, slotProps?.optionItem?.sx),
          children: [/*#__PURE__*/_jsx(Typography, {
            component: "span",
            children: option.title
          }), option.description && /*#__PURE__*/_jsx(Typography, {
            component: "span",
            variant: "body2",
            sx: {
              maxWidth: 510,
              fontSize: 12,
              whiteSpace: 'normal',
              color: 'text.secondary'
            },
            children: option.description
          })]
        })
      }, option.value))]
    }), /*#__PURE__*/_jsx(FormHelperText, {
      children: helperText
    })]
  });
}
SimpleSelect.propTypes = {
  error: PropTypes.bool,
  required: PropTypes.bool,
  multiple: PropTypes.bool,
  fullWidth: PropTypes.bool,
  label: PropTypes.string,
  placeholder: PropTypes.string,
  options: PropTypes.array,
  helperText: PropTypes.string,
  margin: PropTypes.string,
  size: PropTypes.string,
  height: PropTypes.number,
  textDirection: PropTypes.oneOf(['row', 'column']),
  slotProps: PropTypes.object
};
export default SimpleSelect;