import { styled } from '@mui/material/styles';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

import { DropdownProps } from './Dropdown.types';
type StyledDropdownProps = Omit<DropdownProps, 'size'> & {
  selectSize: 'small' | 'medium' | 'large';
};

const valuesBySize = {
  small: {
    height: '28px',
    padding: '4px 12px',
    iconTop: '4px',
    iconRight: '12px',
  },
  medium: {
    height: '36px',
    padding: '8px 16px',
    iconTop: '8px',
    iconRight: '16px',
  },
  large: {
    height: '44px',
    padding: '10px 16px',
    iconTop: '12px', // large 의 text line height 가 medium, small 보다 4px 크기 때문에 그의 반절인 2px + padding 값 10px => 12px
    iconRight: '16px',
  },
};

export const StyledSelect = styled(Select, {
  shouldForwardProp: (prop: string) => {
    return !['selectSize', 'select'].includes(prop);
  },
})<StyledDropdownProps>(({ theme, selectSize }) => ({
  ...(selectSize === 'large'
    ? { ...theme.typography.body1_16_regular }
    : { ...theme.typography.body2_14_regular }),
  height: valuesBySize[selectSize || 'medium'].height,
  padding: valuesBySize[selectSize || 'medium'].padding,
  backgroundColor: theme.palette.lunit_token.component.textfield_bg,
  overflow: 'hidden',
  '& .MuiSelect-select': {
    paddingTop: 0,
    paddingBottom: 0,
    paddingRight: '28px !important', // icon width 20px + 아이콘과 텍스트 사이의 gap 8px
    color: theme.palette.lunit_token.core.text_normal,
  },
  '&.MuiInputBase-root': {
    borderRadius: '8px',
    border: 'none',

    '&:hover:not(.Mui-disabled, .Mui-error):before': {
      border: 'none',
    },
  },
  '& .MuiInput-input': {
    '&:focus': {
      backgroundColor: 'transparent',
    },
  },
  '&::after': {
    border: 'none',
  },
  '&::before': {
    border: 'none',
  },
  '&:hover': {
    position: 'relative',
    zIndex: 0,
    backgroundColor: theme.palette.lunit_token.component.textfield_bg,
    border: 'none',
  },
  '&:hover::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    zIndex: -1,
    backgroundColor: theme.palette.lunit_token.core.status_hover,
    border: 'none',
  },
  // .Mui-focused 컴포넌트에 바로 border를 적용하면 컴포넌트의 width, height 값이 border 값만큼 늘어나기 때문에 따로 엘리먼트를 만들어서 border 를 적용함.
  // 다른 :before 들도 동일한 이유로 작성
  '&.Mui-focused::before': {
    border: `1px solid ${theme.palette.lunit_token.core.status_focused}`,
    content: '""',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    borderRadius: '8px',
    transition: 'none',
  },
  '&.Mui-disabled': {
    opacity: 0.38,
  },
  '&.Mui-disabled:before': {
    borderBottomStyle: 'none',
  },
  '&.Mui-error::before': {
    border: `1px solid ${theme.palette.lunit_token.component.textfield_border_error}`,
    content: '""',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    borderRadius: '8px',
    transition: 'none',
  },
  '& .MuiSvgIcon-root': {
    width: '20px',
    height: '20px',
    top: valuesBySize[selectSize || 'medium'].iconTop, // mui 에서 이 icon position 이 position: absolute 로 되어 있어서 padding 값에 맞춰 포지션 조절
    right: valuesBySize[selectSize || 'medium'].iconRight,
    color: theme.palette.lunit_token.core.text_normal,
    '&.Mui-disabled': {
      color: theme.palette.lunit_token.core.text_normal,
    },
  },
}));

export const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
  ...theme.typography.body2_14_regular,
  padding: '8px',
  borderRadius: '8px',
  color: theme.palette.lunit_token.core.text_normal,
  backgroundColor: 'transparent',
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'space-between',
  gap: '8px',
  '&:hover': {
    backgroundColor: theme.palette.lunit_token.core.status_hover,
  },
  '&.Mui-focusVisible': {
    backgroundColor: 'transparent',
    '&:hover': {
      backgroundColor: theme.palette.lunit_token.core.status_hover,
    },
  },
  // TODO: 디자이너와 focus 디자인 확인 후 살리든 지우든 하기
  // "&:focus::before": {
  //   border: "1px solid",
  //   borderColor: theme.palette.lunit_token.core.status_focused,
  //   content: '""',
  //   position: "absolute",
  //   top: 0,
  //   bottom: 0,
  //   left: -8,
  //   right: -8,
  // },
  '& .multipleChecked': {
    display: 'none',
  },
  '&.filledStyle': {
    backgroundColor: theme.palette.lunit_token.core.status_selected,
  },
}));

export const StyledIconWrapper = styled('div')({
  width: '20px',
  height: '20px',
  marginRight: '8px',
});