/**
 * @file @todo abstract
 */
import React from 'react'

export const SidebarContainer = styled.div.className('sidebar-container') `
  display: flex;
  backface-visibility: hidden;
  will-change: transform, left, right, top, width;
  transform: translateX(0);
  transition: transform 400ms ease-in-out;

  /* @todo */
  /* &.closed {
    .sidebar-box {
      visibility: hidden;
    }
  } */

  ${props =>
    props.open &&
    props.right &&
    styled.css `
      transform: translateX(-240rem);
    `};

  ${props =>
    props.open &&
    props.left &&
    styled.css `
      transform: translateX(240rem);
    `};

  ${props =>
    props.open &&
    props.top &&
    styled.css `
      transform: translateY(240rem);
    `};

  ${props =>
    props.open &&
    props.bottom &&
    styled.css `
      transform: translateY(-240rem);
    `};
`

export const SidebarBody = styled.div.className('sidebar-body-container') `
  flex: 0 0 100vw;
  width: 100vw;
  overflow-x: hidden;
  transform: translateZ(0);
  will-change: transform;
  transition: transform 2s ease-in-out 1s;

  ${props =>
    props.open &&
    styled.css `
      overflow-y: hidden;
      max-height: 100vh;
    `};
`

/**
 * @note be careful with fixed - it can cause issues on safari
 */
export const SidebarInner = styled.div.className('sidebar-contents-container') `
  min-height: 100vh;
  max-height: 100vh;
  overflow: auto;

  z-index: 70;
  transition: transform 1s ease-in-out 2s, left 0.24s ease-in-out;
  width: $sidebar-nav-width;

  backface-visibility: hidden;
  will-change: transform, left, right, top, width;

  top: 0;
  bottom: 0;
  max-width: $sidebar-nav-width;
  pointer-events: none;

  ${props =>
    props.open &&
    styled.css `
      pointer-events: all;
    `};

  ${props =>
    props.right &&
    styled.css `
      max-width: $sidebar-cart-width;
    `};
`

export const StyledSidebarWrap = styled.div.className('sidebar-page-wrap') `
  top: 0;
  bottom: 0;
  overflow-y: auto;

  ${props =>
    props.left &&
    styled.css `
      left: 0;
    `};

  ${props =>
    props.right &&
    styled.css `
      right: 0;
      left: calc(100vw - $sidebar-cart-width);
      max-width: $sidebar-cart-width;
    `};

  ${props =>
    props.top &&
    styled.css `
      top: 0;
      left: calc(100vw - $sidebar-cart-width);
      max-width: $sidebar-cart-width;
    `};
`

export default {
  SidebarContainer,
  SidebarBody,
  SidebarInner,
  StyledSidebarWrap,
}