"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Footer = exports.SidebarContent = exports.SidebarHeader = exports.SidebarRoot = exports.StyledPaper = exports.Wrapper = void 0;
const constants_1 = require("../constants");
const constants_2 = require("../DashboardLayout/constants");
const constants_3 = require("../MenuOrganization/constants");
const OrganizationButton_1 = require("../MenuOrganization/OrganizationButton");
const Item_1 = require("../NavMenu/Item");
const Paper_1 = require("../Paper");
const PinButton_1 = require("../PinButton");
const styled_1 = require("../styled");
const constants_4 = require("./constants");
exports.Wrapper = (0, styled_1.styled)('div', {
    shouldForwardProp: (prop) => !['$isPinned', '$alertHeight'].includes(prop),
}) `
  position: relative;

  grid-column: 1;
  grid-row: 2 / -1;

  width: ${({ $isPinned }) => ($isPinned ? '242px' : '58px')};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    position: absolute;
    z-index: ${({ theme }) => theme.zIndex.appBar - 1};
    top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${constants_2.HEADER_HEIGHT_MOBILE}) `};
    bottom: 0;
    transform: ${({ $isPinned }) => $isPinned ? 'translateX(0px)' : 'translateX(-100vw)'};

    overflow: hidden auto;

    width: 100vw;
    min-width: 100vw;

    transition: ${({ theme }) => {
    return theme.transitions.create(['transform'], {
        duration: theme.transitions.duration.standard,
    });
}};

    &.${constants_4.dashboardSidebarClassnames.hasMenuOrganization}, &.${constants_4.dashboardSidebarClassnames.hasProfile} {
      top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${constants_2.HEADER_HEIGHT_MOBILE} + ${OrganizationButton_1.MOBILE_BUTTON_HEIGHT}) `};
    }
  }
`;
exports.StyledPaper = (0, styled_1.styled)(Paper_1.Paper) `
  display: flex;
  flex-direction: column;

  height: 100%;
  
  ${({ theme }) => theme.breakpoints.down('sm')} {
    border: unset;
    border-radius: 0;
  }
`;
exports.SidebarRoot = (0, styled_1.styled)('aside', {
    shouldForwardProp: (prop) => !['$isPinned', '$collapsedIn'].includes(prop),
}) `
  position: ${({ $isPinned }) => ($isPinned ? 'relative' : 'absolute')};
  z-index: ${({ theme }) => theme.zIndex.appBar - 1};

  width: ${({ $collapsedIn, $isPinned }) => $isPinned || (!$isPinned && $collapsedIn) ? '242px' : '58px'};
  height: 100%;

  background-color: ${({ theme }) => theme.palette.background.default};
  border-radius: ${({ theme }) => theme.shape.medium};
  box-shadow: ${({ theme, $isPinned, $collapsedIn }) => ($isPinned || !$collapsedIn ? 'unset' : theme.elevation[300])};
  
  transition: ${({ theme }) => {
    return theme.transitions.create(['min-width', 'width', 'box-shadow'], {
        duration: theme.transitions.duration.standard,
        easing: theme.transitions.easing.easeInOut,
    });
}};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    position: relative;

    width: 100vw;
    min-width: 100vw;

    background-color: ${({ theme }) => theme.palette.background.default};
    border-radius: 0;
  }
`;
exports.SidebarHeader = styled_1.styled.header `
  ${({ theme }) => theme.breakpoints.down('sm')} {
    padding: ${({ theme }) => theme.spacing(4)};

    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};

    /* Причина игнора: Не критично для отображения */
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    &:has(.${constants_3.menuOrganizationClassnames.button}) {
      padding: 0;
    }

    & .${constants_3.menuOrganizationClassnames.button} {
      height: ${OrganizationButton_1.MOBILE_BUTTON_HEIGHT};
      padding: ${({ theme }) => theme.spacing(3, 4)};
    }
  }
`;
exports.SidebarContent = styled_1.styled.div `
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: ${({ theme }) => theme.spacing(4)};

  width: ${({ $collapsedIn, $isPinned }) => $isPinned || (!$isPinned && $collapsedIn) ? '240px' : '56px'};
  padding: ${({ theme }) => theme.spacing(4, 2, 2)};

  transition: ${({ theme }) => {
    return theme.transitions.create(['width'], {
        duration: theme.transitions.duration.standard,
        easing: theme.transitions.easing.easeInOut,
    });
}};

  & .${Item_1.navMenuItemButtonClassnames.label} {
    width: ${constants_4.LABEL_WIDTH.default};

    &.${Item_1.navMenuItemButtonClassnames.labelHasCounter} {
      width: ${constants_4.LABEL_WIDTH.counter};
    }
  }

  & .${Item_1.navMenuItemButtonClassnames.hasGroup} {
    & .${Item_1.navMenuItemButtonClassnames.label} {
      width: ${constants_4.LABEL_WIDTH.group};

      &.${Item_1.navMenuItemButtonClassnames.labelHasCounter} {
        width: ${constants_4.LABEL_WIDTH.groupCounter};
      }
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: inherit;
    padding: ${({ theme, $hasHeader }) => theme.spacing($hasHeader ? 0 : 2, 0, 0, 0)};
  }
`;
exports.Footer = styled_1.styled.footer `
  display: flex;
  flex-shrink: 0;

  box-sizing: content-box;
  height: ${constants_1.FOOTER_DESKTOP_HEIGHT};
  margin-top: auto;

  background-color: ${({ theme }) => theme.palette.background.default};
  border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
  border-bottom-right-radius: ${({ theme }) => theme.shape.medium};
  border-bottom-left-radius: ${({ theme }) => theme.shape.medium};
  
  .${PinButton_1.pinButtonClassnames.root} {
    padding-left: ${({ theme }) => theme.microSpacing(9)};
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    height: ${constants_1.FOOTER_LAPTOP_HEIGHT};
  }
`;
