import { dialogContentClasses } from '@mui/material/DialogContent';
import { dialogTitleClasses } from '@mui/material/DialogTitle';
import Drawer, { drawerClasses } from '@mui/material/Drawer';
import { BottomDrawer, bottomDrawerClassnames } from '../BottomDrawer';
import { sideDialogHeaderClassnames } from '../SideDialogHeader/constants';
import { styled } from '../styled';
import { SIDE_DIALOG_SCREEN_OFFSET, SIZES } from './constants';
const getSize = (size) => {
    return SIZES[size] || SIZES.sm;
};
export const StyledDrawer = styled(Drawer, {
    shouldForwardProp: (prop) => !['$size'].includes(prop),
}) `
  height: 100vh;

  /* Причина игнора: Прогрессивное улучшение */
  /* stylelint-disable plugin/no-unsupported-browser-features */
  @supports (height: 100dvh) {
    height: 100dvh;
  }
  /* stylelint-enable plugin/no-unsupported-browser-features */

  .${drawerClasses.paper} {
    width: ${({ $size }) => getSize($size)};
    height: calc(100% - ${SIDE_DIALOG_SCREEN_OFFSET});
    margin: ${({ theme }) => theme.spacing(4)};

    border-radius: calc(${({ theme }) => theme.shape.medium} * 2);
    box-shadow: 0 12px 24px 0 #00000038;
  }

  & .${dialogTitleClasses.root} + .${dialogContentClasses.root} {
    padding-top: ${({ theme }) => theme.spacing(4)};
  }
`;
export const StyledBottomDrawer = styled(BottomDrawer) `
  ${({ theme }) => theme.breakpoints.down('sm')} {
    /* Причина игнора: Не критично для отображения */
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    &:has(.${sideDialogHeaderClassnames.root}) {
      & .${bottomDrawerClassnames.header} {
        display: none;
      }
    }
  }
`;
