import React from 'react';
import { Box, Divider, ListSubheader, SxProps } from '@mui/material';
import Check from '@lunit/design-system-icons/Check';

import Checkbox from '../Checkbox';
import Typography from '../Typography';

import { DropdownItemProps } from './Dropdown.types';
import { StyledIconWrapper, StyledMenuItem } from './Dropdown.styled';

export function DropdownItem(props: DropdownItemProps) {
  const {
    leftIcon,
    rightText,
    selected,
    isFilledStyle, // 체크 아이콘이나 체크박스 대신 bg 색깔로 선택된 상태를 표현하기 위한 prop. 일부 상황에서만 사용되고 대부분은 체크 아이콘이나 체크박스 사용
    children,
    sx,
    ...restProps
  } = props;

  return (
    <StyledMenuItem
      className={isFilledStyle && selected ? 'filledStyle' : undefined}
      sx={sx}
      {...restProps}
    >
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'flex-start',
        }}
      >
        {!isFilledStyle && (
          <>
            <StyledIconWrapper className="singleChecked">
              {selected && <Check fontSize="small" />}
            </StyledIconWrapper>
            <Checkbox className="multipleChecked" sx={{ mr: 2 }} checked={selected} />
          </>
        )}
        {leftIcon && (
          <StyledIconWrapper>
            {leftIcon}
            {/* <Demo fontSize="small" /> // TODO: icon fontSize 가 항상 small(width, height: 20px) 이어야함. 여기서 값을 고정시킬 방법은?
             */}
          </StyledIconWrapper>
        )}
        {children}
      </Box>
      <Box>
        {rightText && (
          <Typography
            variant="body2_14_medium"
            sx={{
              color: (theme) => theme.palette.lunit_token.core.text_light,
            }}
          >
            {rightText}
          </Typography>
        )}
      </Box>
    </StyledMenuItem>
  );
}

export function DropdownDivider({ sx }: { sx?: SxProps }) {
  return (
    <Divider
      sx={{
        margin: '8px -8px',
        borderColor: (theme) => theme.palette.lunit_token.component.dropdown_divider_border,
        ...sx,
      }}
    />
  );
}

export function DropdownSubtitle({ title, sx }: { title: string; sx?: SxProps }) {
  return (
    <ListSubheader
      sx={{
        typography: 'body3_12_semibold',
        padding: '4px 8px',
        color: (theme) => theme.palette.lunit_token.core.text_light,
        backgroundColor: 'transparent',
        ...sx,
      }}
    >
      {title}
    </ListSubheader>
  );
}
// 참조 : https://mui.com/material-ui/react-select/#grouping
DropdownSubtitle.muiSkipListHighlight = true;