import styled, { css } from 'styled-components';
import theme from 'styles/theme';
import { animated } from 'react-spring';
import { WrapperStyle } from '../modal/style';
import { IDrawer } from './types';
import { cssUnitCalc } from 'utils';
import Icon from 'kwai-icon';

export const DefaultSize = 400;
export const CloseSize = 16;

const getWrapStyle = (p: IDrawer) => {
    switch (p.placement) {
        case 'top':
            return css`
                justify-content: center;
                align-items: flex-start;
            `;
        case 'bottom':
            return css`
                justify-content: center;
                align-items: flex-end;
            `;
        case 'right':
            return css`
                justify-content: space-between;
                flex-direction: row-reverse;
                align-items: center;
            `;
        case 'left':
            return css`
                justify-content: space-between;
                align-items: center;
            `;
    }
};

export const Wrapper = animated(styled.div<any>`
    display: ${p => (p.visible ? 'flex' : 'none')};
    ${WrapperStyle}
    ${getWrapStyle}
    ${p =>
        !p.dimBackground
            ? css`
                  background: transparent;
                  .drawer-body {
                      box-shadow: -6px 0 30px 0 rgba(0, 0, 0, 0.16) !important;
                  }
              `
            : css`
                  background: rgba(0, 0, 0, 0.5);
              `}
`);
const getDrawerStyle = (p: IDrawer) => {
    switch (p.placement) {
        case 'top':
            return css`
                height: ${cssUnitCalc(p.size || DefaultSize)};
                width: 100vw;
                border-radius: 0 0 2px 2px;
            `;
        case 'bottom':
            return css`
                height: ${cssUnitCalc(p.size || DefaultSize)};
                width: 100vw;
                border-radius: 2px 2px 0 0;
            `;
        case 'right':
            return css`
                width: ${cssUnitCalc(p.size || DefaultSize)};
                border-radius: 2px 0 0 2px;
                height: 100vh;
            `;
        case 'left':
            return css`
                width: ${cssUnitCalc(p.size || DefaultSize)};
                border-radius: 0 2px 2px 0;
                height: 100vh;
            `;
    }
};
export const DrawerWrap = animated(styled.div<any>`
    background: #ffffff;
    will-change: opacity, transform;
    box-shadow: 0 10px 30px 0 rgba(89, 118, 178, 0.05);
    position: relative;
    padding: 32px;
    overflow-y: auto;
    ${getDrawerStyle}
`);

const getCloseStyle = (p: IDrawer) => {
    switch (p.placement) {
        case 'top':

        case 'bottom':

        case 'right':
        case 'left':
            return css`
                top: ${CloseSize}px;
                right: ${CloseSize}px;
            `;
    }
};
export const CloseWrap = styled.div<any>`
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    pointer-events: none;
    box-shadow: 0 10px 30px 0 rgba(89, 118, 178, 0.05);
    width: 24px;
    height: 24px;
    ${getCloseStyle}
`;
export const Close = styled(Icon).attrs(() => ({
    name: 'Close',
    color: '#888fa3',
    size: 'large',
}))<any>`
    cursor: pointer;
    pointer-events: auto;
`;