import { Box, styled } from '@mui/material'
import type { Theme } from '@mui/material'
import type { ProductMenuLinkProps } from '../layout'
import type { To } from 'react-router-dom'

const ProductMenuContainer = styled('div')(({ theme, ...rest }) => {
  const t = theme as Theme
  const isActive = rest.className === 'active'
  const contentBackgroundColor =
    t.palette.mode === 'dark' ? t.palette.yacolor.bg.dark : t.palette.grey[100]
  return {
    width: '100%',
    cursor: 'pointer',
    padding: '.4rem .6rem',
    borderRadius: '6px',
    boxSizing: 'border-box',
    backgroundColor: isActive ? contentBackgroundColor : 'unset',
    '&:hover': {
      backgroundColor: contentBackgroundColor,
      '& .desc': {
        opacity: 1,
        transform: 'translateY(0px)',
      },
    },
    '& svg': {
      width: '14px',
      height: '14px',
    },
    '& .name': {
      display: 'flex',
      flexWrap: 'nowrap',
      color: isActive && t.palette.primary.main,
      '& > .label': {
        display: 'block',
        fontSize: '14px',
        fontWeight: 'bold',
      },
    },
    '& .desc': {
      opacity: isActive ? 1 : 0,
      display: 'block',
      margin: 0,
      color: t.palette.grey[700],
      fontSize: '.6rem',
    },
  }
})

const ProductMenuLink: React.FC<ProductMenuLinkProps> = (props) => {
  const { icon, name, description, path, isActive, onClick } = props
  return (
    <ProductMenuContainer onClick={() => onClick(path as To)} className={isActive ? `active` : ''}>
      <div className="name">
        {icon && (
          <Box
            sx={{
              height: '14px',
              '& circle': {
                fill: (theme) =>
                  theme.palette.mode === 'dark'
                    ? theme.palette.primary[700]
                    : theme.palette.grey[100],
              },
            }}
          >
            {icon}
          </Box>
        )}
        <span className="label">{name}</span>
      </div>
      <p className="desc">{description}</p>
    </ProductMenuContainer>
  )
}

export default ProductMenuLink