import React, { forwardRef, useCallback } from 'react';
import ArrowDownSm from '@lunit/design-system-icons/ArrowDownSm';
import { DropdownProps } from './Dropdown.types';
import { StyledSelect } from './Dropdown.styled';
import { SvgIconProps } from '@mui/material';

const Dropdown = forwardRef((props: DropdownProps, ref) => {
  const { select = 'single', size = 'medium', className, children, sx, ...restProps } = props;
  const IconComponent = useCallback(
    (iconProps: SvgIconProps) => <ArrowDownSm {...iconProps} />,
    [],
  );

  return (
    <StyledSelect
      className={className}
      variant="standard" // variant standard 기준으로 스타일링 되어있음. 다른 variant 사용 시 스타일이 틀어질 수 있음
      multiple={select === 'multiple'}
      IconComponent={IconComponent}
      MenuProps={{
        anchorOrigin: {
          vertical: 'bottom',
          horizontal: 'left',
        },
        transformOrigin: {
          vertical: 'top',
          horizontal: 'left',
        },
        PaperProps: {
          sx: {
            marginTop: '4px',
            padding: '0px 8px',
            borderRadius: '8px',
            backgroundColor: (theme) => theme.palette.lunit_token.core.bg_02,
          },
          className: `elevation2 ${className || 'light1'}`,
        },
        slotProps: {
          list: {
            sx: {
              '& .singleChecked': {
                display: select === 'single' ? 'inherit' : 'none',
              },
              '& .multipleChecked': {
                display: select === 'multiple' ? 'inherit !important' : 'none',
              },
            },
          },
        },
      }}
      sx={sx}
      selectSize={size}
      {...restProps}
      ref={ref}
    >
      {children}
    </StyledSelect>
  );
});

export default Dropdown;