import { Close, KeyboardArrowDown } from '@mui/icons-material'
import {
  Autocomplete,
  AutocompleteInputChangeReason,
  Checkbox,
  CircularProgress,
  Popper,
  alpha,
  styled,
} from '@mui/material'
import { ReactNode } from 'react'
import { BpCheckedIcon, BpIcon } from './SingleCheckbox'
import TextField from './TextField'
import { IOption } from './types'

export const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
  '& .MuiAutocomplete-tag': {
    border: '1px solid #D1D1D1',
    background: '#F8F8F8',
    borderRadius: '5px',
    height: '38px',
    '& .MuiSvgIcon-root': {
      fontSize: '15px',
      marginLeft: '5px',
      fontWeight: 700,
      color: theme.palette.secondary.main,
      '&:hover': {
        color: alpha(theme.palette.secondary.main, 0.8),
      },
    },
  },
}))

export const StyledPopper = styled(Popper)(({ theme }) => ({
  '& .MuiPaper-root': {
    borderRadius: '10px',
    borderTopRightRadius: 0,
    borderTopLeftRadius: 0,
    boxShadow: '0px 4px 16px #0000000F',
    marginTop: '1px',
    '& .MuiAutocomplete-listbox': {
      minWidth: '240px',
      padding: '10px',
      '& .MuiAutocomplete-option': {
        padding: '10px',
        background: 'none',
        '&.Mui-focused': {
          background: 'none',
        },
      },
      '& .MuiCheckbox-root': {
        padding: 0,
        marginRight: '10px',
      },
    },
    '&::-webkit-scrollbar': {
      width: '0.5em',
      height: '0.5em',
    },

    '&::-webkit-scrollbar-thumb': {
      backgroundColor: 'rgba(0, 0, 0, 0.15)',
      borderRadius: '3px',

      '&:hover': {
        background: 'rgba(0, 0, 0, 0.2)',
      },
    },
  },
}))

interface MultiSelectProps {
  label: ReactNode
  name?: string
  options: IOption[]
  placeholder?: string
  loading?: boolean
  value: IOption[] | IOption
  onChange: (value: IOption[] | IOption) => void
  onInputChange?: (
    event: React.SyntheticEvent,
    value: string,
    reason: AutocompleteInputChangeReason,
  ) => void
  required?: boolean
  disabled?: boolean
  error?: boolean
  helperText?: string
  multiple?: boolean
  limitTags?: number
  onOpen?: (e: any) => void
  noOptionsText?: string
  size?: any
}
export default function MultiSelect({
  name,
  options,
  label,
  loading,
  value,
  onChange,
  onInputChange,
  required,
  disabled = false,
  error,
  noOptionsText,
  helperText,
  multiple = true,
  limitTags = -1,
  ...props
}: MultiSelectProps) {
  return (
    <StyledAutocomplete
      noOptionsText={noOptionsText}
      multiple={multiple}
      value={value}
      loading={loading}
      fullWidth
      getOptionLabel={(option: any) => option?.label || ''}
      options={options || []}
      onChange={(e, value: any) => {
        if (!onChange) return
        onChange(value)
      }}
      onOpen={props.onOpen}
      onInputChange={onInputChange}
      limitTags={limitTags}
      isOptionEqualToValue={(option: any, value: any) =>
        option?.value === value?.value
      }
      disableCloseOnSelect
      disabled={disabled}
      PopperComponent={StyledPopper}
      renderOption={(props, option: any, { selected }) => (
        <li {...props}>
          <Checkbox
            icon={<BpIcon />}
            checkedIcon={<BpCheckedIcon />}
            checked={selected}
          />
          {option.label}
        </li>
      )}
      popupIcon={<KeyboardArrowDown />}
      ChipProps={{ deleteIcon: <Close /> }}
      renderInput={(params) => (
        <TextField
          error={error}
          helperText={helperText}
          label={label}
          required={required}
          disabled={disabled}
          InputProps={{
            ...params.InputProps,
            endAdornment: (
              <>
                {loading ? (
                  <CircularProgress color="inherit" size={20} />
                ) : null}
                {params.InputProps.endAdornment}
              </>
            ),
          }}
          {...params}
        />
      )}
      {...props}
    />
  )
}
