import styled, { css } from 'styled-components';
import { convertToTransientProps, getColorAlias, getFontSize, getSpacing } from '../../utils/index.js';
import Close from '../../icons/Close.js';

const sheetLayout = (orientation = 'right', fixed = false, isOpen = false, width = '25%') => {
    if (fixed) {
        if (orientation === 'right') {
            return css `
        width: ${width};
        right: 0;
        bottom: 0;
      `;
        }
        return css `
      width: ${width};
      left: 0;
      bottom: 0;
    `;
    }
    if (orientation === 'right') {
        return css `
      top: 0;
      right: 0;
      transform: translateX(${isOpen ? '0' : '100%'});
    `;
    }
    return css `
    top: 0;
    left: -${width};
    transform: translateX(${isOpen ? '100%' : '0'});
  `;
};
const SideSheetContainer = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps([
        'isOpen',
        'fixed',
        'orientation',
        'width',
    ]),
}) `
  height: 100vh;
  background: ${getColorAlias('containerDefault')};
  color: ${getColorAlias('contentDefault')};
  position: fixed;
  z-index: 1200;
  width: ${(props) => props.width};
  ${(props) => sheetLayout(props.orientation, props.fixed, props.isOpen, props.width)}
  transition: ${({ theme }) => `all ${theme.motion.speed.defaultS} ${theme.motion.easing.easeDefault}`};
  box-shadow: ${(props) => props.theme.elevation.e2};
  font-family: ${(props) => props.theme.font.familyPrimary};
  font-size: ${getFontSize('size16')};
`;
const SideSheetContentWrapper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['customContent']),
}) `
  ${(props) => props.customContent
    ? css `
          padding: ${getSpacing('s00', 's00')};
        `
    : css `
          padding: ${getSpacing('s00', 's04')};
        `};
`;
const HeaderWrapper = styled.div `
  width: 100%;
  height: 80px;
  font-family: ${(props) => props.theme.font.familyPrimary};
  font-weight: ${(props) => props.theme.font.weightBold};
  display: flex;
  justify-content: space-between;
  align-items: center;
`;
const TitleWrapper = styled.div ``;
const BackDrop = styled.div `
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: ${getColorAlias('backgroundDark')};
  opacity: 0.5;
  z-index: 100;
  top: 0;
  right: 0;
`;
const CloseButton = styled(Close) `
  fill: ${getColorAlias('contentDefault')};
  cursor: pointer;
  padding-bottom: 4px;
  width: 25px;
  height: 25px;
`;

export { BackDrop, CloseButton, HeaderWrapper, SideSheetContainer, SideSheetContentWrapper, TitleWrapper };
