import { badgeClasses } from '@mui/material/Badge';
import { Counter } from '../Counter';
import { styled } from '../styled';
import { Typography } from '../Typography';
import { chipClassnames, chipSize } from './constants';
export const Wrapper = styled.div `
  cursor: pointer;
  user-select: none;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: ${({ theme }) => theme.spacing(0, 2)};

  background-color: ${({ theme }) => theme.palette.background.default};
  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
  border-radius: ${({ theme }) => theme.shape.medium};

  transition: ${({ theme }) => theme.transitions.create(['border-color', 'background-color'], {
    duration: theme.transitions.duration.shortest,
})};

  &:hover {
    background-color: ${({ theme }) => theme.palette.background.elementHover};
    border-color: ${({ theme }) => theme.palette.grey[400]};
  }

  &:active {
    background-color: ${({ theme }) => theme.palette.grey[100]};
    border-color: ${({ theme }) => theme.palette.grey[800]};
  }

  &.${chipClassnames.hasIcon}, 
  &.${chipClassnames.hasEndAdornment}:not(.${chipClassnames.hasStatusIcon}),
  &.${chipClassnames.hasCounter}:not(.${chipClassnames.hasStatusIcon}) {
    gap: ${({ theme }) => theme.spacing(1)};
  }

  &.${chipClassnames.hasStatusIcon} {
    & .${chipClassnames.label} {
      margin-left: ${({ theme }) => theme.microSpacing(1)};
    }

    &.${chipClassnames.hasCounter} .${chipClassnames.label},
    &.${chipClassnames.hasEndAdornment} .${chipClassnames.label} {
      margin-right: ${({ theme }) => theme.spacing(1)};
    }
  }

  &.${chipClassnames.hasStatusIcon} {
    padding-left: ${({ theme }) => theme.microSpacing(1)};
  }

  &.${chipClassnames.sizeSmall} {
    height: ${chipSize.small.desktop};

    ${({ theme }) => theme.breakpoints.down('sm')} {
        height: ${chipSize.small.mobile};
    }
  }

  &.${chipClassnames.sizeMedium} {
    height: ${chipSize.medium.desktop};

    ${({ theme }) => theme.breakpoints.down('sm')} {
        height: ${chipSize.medium.mobile};
    }
  }

  &.${chipClassnames.sizeLarge} {
    height: ${chipSize.large.desktop};
    padding: ${({ theme }) => theme.spacing(0, 3)};

    &.${chipClassnames.hasStatusIcon} {
      padding-left: ${({ theme }) => theme.spacing(2)};
    }

    ${({ theme }) => theme.breakpoints.down('sm')} {
      height: ${chipSize.large.mobile};
    }
  }

  &.${chipClassnames.selected} {
    background-color: ${({ theme }) => theme.palette.grey[100]};
    border-color: ${({ theme }) => theme.palette.grey[800]};

    &:hover {
      background-color: ${({ theme }) => theme.palette.background.elementHover};
      border-color: ${({ theme }) => theme.palette.grey[800]};
    }

    &:active {
      background-color: ${({ theme }) => theme.palette.grey[100]};
      border-color: ${({ theme }) => theme.palette.grey[400]};
    }
  }

  &.${chipClassnames.disabled} {
    cursor: default;

    background-color: ${({ theme }) => theme.palette.components.disabled};
    border-color: transparent;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    mix-blend-mode: luminosity;

    & .${chipClassnames.startAdornment},
    & .${chipClassnames.endAdornment},
    & .${chipClassnames.label} {
      opacity: 0.3;
    }
  }
`;
export const HiddenInput = styled.input `
  position: absolute;

  width: 0;
  height: 0;
`;
export const StyledCounter = styled(Counter) `
  display: flex;
  align-items: center;

  &::before {
    content: '';

    display: inline-block;

    width: 2px;
    height: 2px;

    /* Сдвигаем точку ниже, чтобы визуально выровнять её по центру строчных букв */
    margin-top: 0.15em;
    margin-right: ${({ theme }) => theme.spacing(1)};

    background-color: ${({ theme }) => theme.palette.grey[800]};
    border-radius: 50%;
  }

  .${badgeClasses.badge} {
    min-width: unset;
    padding: 0;

    font-size: ${({ theme }) => theme.typography.body1.fontSize};
    font-weight: ${({ theme }) => theme.typography.body1.fontWeight};

    ${({ theme }) => theme.breakpoints.down('sm')} {
      font-size: ${({ theme }) => theme.typography.body2.fontSize};
    }
  }
`;
export const AdornmentWrapper = styled(Typography) `
  display: flex;
  align-items: center;
`;
export const Label = styled.label `
  /* Убираем подсветку при нажатии на компонент */
  -webkit-tap-highlight-color: transparent;

  /* Причина игнора: Не критично для отображения */
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  &:has(> input:focus-visible) .${chipClassnames.root} {
    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
    outline-offset: 2px;
  }
`;
