import { MoreVert } from '@mui/icons-material'
import {
  alpha,
  Box,
  BoxProps,
  IconButton,
  Menu,
  MenuProps,
  Pagination,
  styled,
  TableRow,
} from '@mui/material'
import { Order } from './types'

export const StyledTableFooter = styled(Box)(({ theme }) => ({
  paddingTop: '1rem',
  width: '100%',
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
}))

export const StyledPagination = styled(Pagination)(({ theme }) => ({
  '& .MuiPaginationItem-root': {
    border: 'none',
    background: theme.palette.secondary.dark,
  },
  '& .MuiPaginationItem-previousNext': {
    border: theme.borders.grayLight,
    background: theme.palette.common.white,
  },
  '& .Mui-selected': {
    border: `2px solid ${theme.palette.common.yellow}`,
  },
  '& .MuiPaginationItem-ellipsis': {
    background: theme.palette.common.white,
  },
}))

export const StyledTableRow = styled(TableRow, {
  shouldForwardProp: (prop) => prop !== 'onRowClick',
})<{ isSelected?: boolean }>(({ theme, isSelected }) => ({
  background: isSelected && alpha(theme.palette.primary.main, 0.07),
}))

export const StyledActionsRow = styled(Box)(({ theme }) => ({
  display: 'flex',
  gap: '16px',
}))

export const StyledTableActionsHeader = styled(Box)(({ theme }) => ({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',

  height: '50px',
  border: theme.borders.grayLight,
  borderBottom: 'none',
  background: theme.palette.secondary.light,
  padding: '0 15px',

  '& .MuiTypography-root': {
    fontSize: '14px',
    '& > span': {
      color: theme.palette.secondary.main,
      fontWeight: 'bold',
    },
  },
}))

export const StyledActionIconButton = styled((props: BoxProps) => (
  <Box {...props}>
    <MoreVert color="secondary" fontSize="small" />
  </Box>
))(({ theme }) => ({
  border: `1px solid ${theme.palette.secondary.main} `,
  borderRadius: '5px',
  display: 'flex',
  alignItems: 'center',
  padding: '5px',
  transition: 'border 0.2s ease, background 0.2s ease',
  ':hover': {
    border: `1px solid ${alpha(theme.palette.secondary.main, 0.5)} `,
    background: alpha(theme.palette.secondary.main, 0.06),
  },
}))

export const StyledLimitMenu = styled((props: MenuProps) => (
  <Menu
    elevation={0}
    anchorOrigin={{
      vertical: 'top',
      horizontal: 'right',
    }}
    transformOrigin={{
      vertical: 'bottom',
      horizontal: 'right',
    }}
    {...props}
  />
))(({ theme, open }) => ({
  '& .MuiPaper-root': {
    borderRadius: open ? '4px 4px 0px 0px' : '4px',
    outline: theme.borders.grayLight,
    minWidth: 130,
    color: 'rgb(55, 65, 81)',
    '& .MuiMenu-list': {
      padding: '0',
    },
    '& .MuiMenuItem-root': {
      height: '40px',
      borderBottom: theme.borders.grayLight,
      align: 'center',
      '& .MuiSvgIcon-root': {
        fontSize: 18,
        color: theme.palette.text.secondary,
        marginRight: theme.spacing(1.5),
      },
      '&:active': {
        backgroundColor: alpha(theme.palette.primary.main, 0.2),
      },
    },
  },
}))

export const StyledLimitBox = styled(Box)<{ open: boolean }>(
  ({ theme, open }) => ({
    '& > .MuiBox-root': {
      padding: '0 10px',
      cursor: 'pointer',
      userSelect: 'none',
      height: '35px',
      borderRadius: open ? '0px 0px 4px 4px' : '4px',
      outline: theme.borders.grayLight,
      width: '130px',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      '& .MuiTypography-root': {
        fontWeight: 'bold',
      },
      '& .MuiSvgIcon-root': {
        rotate: open && '180deg',
      },
    },
  }),
)

export const StyledSortButton = styled(IconButton)<{
  sortOrder: Order
  dataIndex: string
}>(({ theme, sortOrder, dataIndex }) => ({
  marginLeft: '10px',
  ...(sortOrder === '' && {
    // '& .MuiSvgIcon-root': {
    //   // visibility: 'hidden',
    // },

    transition: 'transform 1s ease-in-out',
  }),
  ...(sortOrder === 'asc' && {
    transition: 'transform 1s ease-in-out',
  }),
  ...(sortOrder === 'desc' && {
    '& .MuiSvgIcon-root': {
      transform: 'rotate(180deg)',
    },
    transition: 'transform 1s ease-in-out',
  }),
}))
