import Button from '@mui/material/Button';
import Collapse, { collapseClasses } from '@mui/material/Collapse';
import { styled } from '../../styled';
import { PAGE_HEADER_HEIGHT_MOBILE } from '../constants';
import { MainActions } from '../PageActions';
export const Wrapper = styled.div `
  display: none;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    position: sticky;
    z-index: ${({ theme }) => theme.zIndex.speedDial};
    bottom: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    gap: 0;
    order: 5;

    width: 100%;

    /* Ограничиваем высоту */
    max-height: calc(100% - ${PAGE_HEADER_HEIGHT_MOBILE});
    margin-top: auto;
    padding: ${({ theme }) => theme.spacing(4)};

    background-color: ${({ theme }) => theme.palette.common.white};
    border-top-left-radius: ${({ theme }) => theme.shape.large};
    border-top-right-radius: ${({ theme }) => theme.shape.large};
    box-shadow: ${({ theme }) => theme.elevation.up[100]};
  }
`;
export const ShowMoreButton = styled(Button) `
  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: flex;

    height: 40px;
    min-height: 40px;
    padding: 0;

    &:hover {
      background-color: unset;
    }
  }
`;
export const StyledCollapse = styled(Collapse) `
  & .${collapseClasses.wrapper} > .${collapseClasses.wrapperInner} {
    display: flex;
    flex-direction: column;
  }
`;
export const ActionWrapper = styled.div `
  overflow: auto;
`;
export const SecondaryActionsWrapper = styled('div') `
  display: flex;
  flex-wrap: wrap;
  gap: ${({ theme }) => theme.spacing(2)};

  padding-bottom: ${({ theme }) => theme.spacing(2)};
`;
export const StyledMainActions = styled(MainActions, {
    shouldForwardProp: (prop) => !['$isVisibleShowMoreButton'].includes(prop),
}) `
  ${({ theme }) => theme.breakpoints.down('sm')} {
    padding-bottom: ${({ theme, $isVisibleShowMoreButton }) => $isVisibleShowMoreButton ? theme.spacing(2) : 0};
  }
`;
