import { buttonClasses } from '@mui/material/Button';
import { styled } from '../../styled';
import { StaticCalendarButton } from '../StaticCalendarButton';
import { getBgColor, getLeftBorderRadius, getRightBorderRadius, getTextColor, } from './utils';
const nonForwardableProps = new Set([
    'isPreviousItemInSelectedRange',
    'isNextItemInSelectedRange',
    'isCurrentInUserLocalTime',
    'isOutOfAvailableRange',
    'isInSelectedRange',
    'isInHoveredRange',
    'lengthInRow',
    '$isNotInteractable',
    '$isDraggable',
    'isHoliday',
    'isPreviousItemInHoveredRange',
    'isNextItemInHoveredRange',
]);
export const StaticCalendarGridButton = styled(StaticCalendarButton, {
    shouldForwardProp: (propName) => !nonForwardableProps.has(propName),
}) `
  /* Причина игнора: Не поддерживается на мобильных устройствах. Не критично */
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  cursor: ${({ $isNotInteractable, $isDraggable }) => ($isDraggable && 'grab') || ($isNotInteractable && 'initial')};

  position: relative;

  width: 40px;

  font-weight: ${({ theme }) => theme.typography.fontWeightRegular};

  border-radius: ${(props) => getLeftBorderRadius(props)}
    ${(props) => getRightBorderRadius(props)}
    ${(props) => getRightBorderRadius(props)}
    ${(props) => getLeftBorderRadius(props)};
  
  transition: unset;

  &::after {
    content: '';

    position: absolute;
    bottom: ${({ theme }) => theme.spacing(1)};
    left: ${({ theme }) => theme.spacing(2)};

    display: ${({ isCurrentInUserLocalTime }) => isCurrentInUserLocalTime ? 'block' : 'none'};

    width: calc(100% - ${({ theme }) => theme.spacing(4)});
    height: 2px;

    color: currentColor;

    background-color: currentColor;
  }
  
  &:hover {
    border-radius: ${(props) => getLeftBorderRadius({ isHovered: true, ...props })}
    ${(props) => getRightBorderRadius({ isHovered: true, ...props })}
    ${(props) => getRightBorderRadius({ isHovered: true, ...props })}
    ${(props) => getLeftBorderRadius({ isHovered: true, ...props })};
  }

  &,
  &.${buttonClasses.disabled} {
    background-color: ${(props) => getBgColor(props)};
  }

  &,
  &.${buttonClasses.disabled}, &:hover {
    color: ${(props) => getTextColor(props)};
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: 100%;
    min-width: 48px;
    height: 48px;
  }
`;
