import { bottomDrawerClassnames } from '../BottomDrawer';
import { OFFSET_TOP_SCREEN } from '../BottomDrawer/constants';
import { Grid } from '../Grid';
import { Popover } from '../Popover';
import { loadingPlaceholderClassnames } from '../placeholders/LoadingPlaceholder';
import { placeholderClassnames } from '../placeholders/Placeholder';
import { styled } from '../styled';
import { Typography } from '../Typography';
import { menuOrganizationClassnames, PLACEHOLDER_HEIGHT } from './constants';
export const ActionWrapper = styled.div `
  padding: ${({ theme }) => theme.spacing(2)};

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

  ${({ theme }) => theme.breakpoints.down('sm')} {
    padding: ${({ theme }) => theme.spacing(4)};
  }
`;
export const SearchWrapper = styled.div `
  max-width: 300px;
  padding: ${({ theme }) => theme.spacing(2, 3)};

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

  ${({ theme }) => theme.breakpoints.down('sm')} {
    max-width: unset;
    padding: ${({ theme }) => theme.spacing(3, 4)};
  }
`;
export const OrganizationsWrapper = styled.div `
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  box-sizing: ${({ $isLoading }) => ($isLoading ? 'content-box' : 'inherit')};
  width: 300px;
  min-height: ${({ $isLoading }) => ($isLoading ? PLACEHOLDER_HEIGHT : '64px')};
  max-height: 328px;

  & .${menuOrganizationClassnames.errorPlaceholder} {
    display: flex;
    gap: ${({ theme }) => theme.spacing(1)};

    height: ${PLACEHOLDER_HEIGHT};
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: 100%;
    height: 100%;
    max-height: unset;

    & .${loadingPlaceholderClassnames.root} {
      justify-content: unset;
    }

    & .${menuOrganizationClassnames.errorPlaceholder} {
      gap: ${({ theme }) => theme.spacing(6)};
      justify-content: center;

      height: 100%;

      & .${placeholderClassnames.title} {
        margin-bottom: unset;
      }

      & .${placeholderClassnames.footer} {
        margin-top: unset;
      }
    }
  }
`;
export const OrganizationData = styled(Grid) `
  display: flex;
  gap: ${({ theme }) => theme.spacing(2)};

  padding-top: ${({ theme }) => theme.spacing(1)};
`;
export const StyledTypography = styled(Typography) `
  color: ${({ theme }) => theme.palette.grey[600]};
`;
export const StyledPopover = styled(Popover) `

  ${({ theme }) => theme.breakpoints.down('sm')} {
    & .${bottomDrawerClassnames.content} {
      display: flex;
      flex-direction: column;

      height: calc(100vh - ${OFFSET_TOP_SCREEN});

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

`;
