import { FOOTER_DESKTOP_HEIGHT, FOOTER_LAPTOP_HEIGHT } from '../constants';
import { PAGE_ASIDE_WIDTH } from '../PageAside';
import { css, styled } from '../styled';
import { pinnableAsideClassnames } from './constants';
export const Aside = styled('aside', {
    shouldForwardProp: (prop) => !['$isPinned'].includes(prop),
}) `
  position: relative;

  overflow: ${({ $isPinned }) => ($isPinned ? 'hidden' : 'unset')};
  grid-column: 2;
  grid-row: 2;

  height: 100%;

  border-bottom-right-radius: ${({ theme }) => theme.shape.medium};

  &:hover {
    .${pinnableAsideClassnames.content} {
      transform: translateX(0);
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    z-index: 0;

    overflow: unset;
    order: 3;

    width: ${({ theme }) => `calc(100% - ${theme.spacing(8)})`};
    margin: ${({ theme }) => theme.spacing(0, 4, 4)};

    background-color: ${({ theme }) => theme.palette.background.default};
    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
    border-radius: ${({ theme }) => theme.shape.medium};
  }
`;
export const Dummy = styled('div', {
    shouldForwardProp: (prop) => !['$isPinned'].includes(prop),
}) `
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 100%;

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

  ${({ $isPinned }) => $isPinned && 'display: none;'}
`;
const pinnedStyles = css `
  transform: translateX(0);
`;
const unpinnedStyles = css `
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(105%);
`;
export const Content = styled('div', {
    shouldForwardProp: (prop) => !['$isPinned'].includes(prop),
}) `
  position: relative;
  z-index: ${({ theme }) => theme.zIndex.appBar - 2};

  overflow: hidden;
  display: flex;
  grid-column: 2;
  grid-row: 2;
  flex-direction: column;

  width: ${PAGE_ASIDE_WIDTH};
  height: 100%;

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

  transition: ${({ theme }) => {
    return theme.transitions.create(['transform'], {
        duration: theme.transitions.duration.shorter * 2,
        easing: theme.transitions.easing.easeInOut,
        delay: theme.transitions.duration.shorter,
    });
}};

  ${({ $isPinned }) => ($isPinned ? pinnedStyles : unpinnedStyles)}
  
  ${({ $isPinned, theme }) => !$isPinned &&
    `
    box-shadow: 0px 0px 1px 0px #072D574F, -8px -5px 12px -6px #072D5726;
    border-radius: ${theme.shape.medium};
  `}

  ${({ theme }) => theme.breakpoints.down('sm')} {
    overflow: unset;
    order: -1;

    width: 100%;

    border-top: unset;
    border-left: 0;
    border-radius: ${({ theme }) => theme.shape.medium};
  }
`;
export const ChildrenWrapper = styled.div `
  overflow-y: auto;
  flex-grow: 1;

  padding: ${({ theme }) => theme.spacing(4, 6)};

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    padding: ${({ theme }) => theme.spacing(4)};
  }
`;
export const Footer = styled.footer `
  display: flex;
  flex-shrink: 0;

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

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

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

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