import { listItemButtonClasses } from '@mui/material/ListItemButton';
import { ChevronDOutlineMd } from '../../../../icons/ChevronDOutlineMd';
import { PageDotOutlineMd } from '../../../../icons/PageDotOutlineMd';
import { ListItemButton } from '../../../ListItemButton';
import { ListItemIcon } from '../../../ListItemIcon';
import { OverflowTypography } from '../../../OverflowTypography';
import { svgIconClassnames } from '../../../SvgIcon';
import { styled } from '../../../styled';
import { UpDownTransition } from '../../../styled/mixins';
import { navMenuItemButtonClassnames } from './constants';
export const StyledListItemButton = styled(ListItemButton) `
  overflow: hidden;

  box-sizing: border-box;
  min-height: 44px;
  padding: ${({ theme }) => theme.microSpacing(6, 5)};
  
  border-radius: ${({ theme }) => theme.shape.small};
  
  &.${listItemButtonClasses.selected} {
    color: ${({ theme }) => theme.palette.grey[900]};

    background-color: ${({ theme }) => theme.palette.primary[100]};

    &::before {
      content: '';

      position: absolute;
      inset: 0;

      width: 10px;

      border-left: 3px solid ${({ theme }) => theme.palette.primary[800]};
    }
    
    &:hover {
      background-color: ${({ theme }) => theme.palette.primary[100]};
    }

    &.${navMenuItemButtonClassnames.hasGroup} {
      background-color: inherit;

      &:hover {
        background-color: inherit;
      }
    }
  }

  &:hover {
    color: ${({ theme }) => theme.palette.primary['800']};

    background-color: inherit;
  }

  &:active {
    color: ${({ theme }) => theme.palette.primary['900']};
  }

  &:focus-visible {
    color: ${({ theme }) => theme.palette.primary[900]};

    background-color: unset;
    border-radius: ${({ theme }) => theme.shape.small};
    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
    outline-offset: -2px;
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    overflow: hidden;

    min-height: 48px;
    padding: ${({ theme }) => theme.spacing(3, 2, 3, 4)};

    border-radius: ${({ theme }) => theme.shape.small};
    
    &.Mui-selected {
      &::before {
        border-radius: 0;
      }
    }
  }
`;
export const NavMenuItemButtonIcon = styled(ListItemIcon) `
  min-width: unset;
  
  .${svgIconClassnames.root} {
    width: 20px;
    height: 20px;
  }
`;
export const NavMenuItemButtonText = styled(OverflowTypography) `
  margin-left: ${({ theme }) => theme.spacing(3)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: auto;
    margin-left: 0;
  }
`;
export const NavMenuItemButtonChevron = styled(ChevronDOutlineMd, {
    shouldForwardProp: (prop) => !['$opened', '$collapsedIn'].includes(prop),
}) `
  width: 20px;
  height: 20px;

  ${({ $opened }) => UpDownTransition($opened)}

  ${({ $collapsedIn }) => `visibility: ${$collapsedIn ? 'visible' : 'hidden'}`};

  transition: ${({ theme }) => {
    return theme.transitions.create('transform', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
    });
}};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: 24px;
    height: 24px;
  }
`;
export const EndAdornmentWrapper = styled.div `
  display: ${({ $collapsedIn }) => ($collapsedIn ? 'flex' : 'none')};
  gap: ${({ theme }) => theme.spacing(2)};
  align-items: center;  

  margin-left: auto;
`;
export const StyledPageDotOutlineMd = styled(PageDotOutlineMd) `
  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: 24px;
    height: 24px;
  }
`;
