import styled, { css } from 'styled-components';
import { animated } from 'react-spring';
import { IPlacement } from './types';
export const Wrapper = styled.div`
    display: inline-block;
`;

export const PopupContainer = styled(animated.div)<any>`
    z-index: 9999;
    padding: 16px;
    font-size: 14px;
    position: absolute;
    display: inline-block;
    will-change: transform, opacity;
    background: ${p => (p['data-contrast'] ? 'rgba(64,64,64,0.85)' : 'white')};
    color: ${p => (p['data-contrast'] ? 'white' : '#101934')};
    letter-spacing: 0.3px;
    text-align: left;
    line-height: 20px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    border-radius: 2px;
`;

const ArrowPlacement = (placement: IPlacement, contrast: boolean) => {
    switch (placement) {
        case 'topLeft':
            return css`
                bottom: -4px;
                left: 16px;
                border-right-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-bottom-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-top-color: transparent;
                border-left-color: transparent;
                box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.07);
            `;
        case 'top':
            return css`
                left: calc(50% - 4px);
                bottom: -4px;
                border-right-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-bottom-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-top-color: transparent;
                border-left-color: transparent;
                box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.07);
            `;
        case 'topRight':
            return css`
                right: 16px;
                bottom: -4px;
                border-right-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-bottom-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-top-color: transparent;
                border-left-color: transparent;
                box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.07);
            `;
        case 'rightTop':
            return css`
                left: -4px;
                top: 12px;
                border-left-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-bottom-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-top-color: transparent;
                border-right-color: transparent;
                box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.07);
            `;
        case 'right':
            return css`
                left: -4px;
                top: calc(50% - 4px);
                border-left-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-bottom-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-top-color: transparent;
                border-right-color: transparent;
                box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.07);
            `;
        case 'rightBottom':
            return css`
                left: -4px;
                bottom: 12px;
                border-left-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-bottom-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-top-color: transparent;
                border-right-color: transparent;
                box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.07);
            `;
        case 'bottomLeft':
            return css`
                left: 12px;
                top: -4px;
                border-left-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-top-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-bottom-color: transparent;
                border-right-color: transparent;
                box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.07);
            `;
        case 'bottom':
            return css`
                left: calc(50% - 4px);
                top: -4px;
                border-left-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-top-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-bottom-color: transparent;
                border-right-color: transparent;
                box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.07);
            `;
        case 'bottomRight':
            return css`
                right: 16px;
                top: -4px;
                border-left-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-top-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-bottom-color: transparent;
                border-right-color: transparent;
                box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.07);
            `;
        case 'leftTop':
            return css`
                right: -4px;
                top: 12px;
                border-right-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-top-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-bottom-color: transparent;
                border-left-color: transparent;
                box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.07);
            `;
        case 'left':
            return css`
                right: -4px;
                top: calc(50% - 4px);
                border-right-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-top-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-bottom-color: transparent;
                border-left-color: transparent;
                box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.07);
            `;
        case 'leftBottom':
            return css`
                right: -4px;
                bottom: 12px;
                border-right-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-top-color: ${contrast ? 'rgba(64,64,64,0.85)' : 'white'};
                border-bottom-color: transparent;
                border-left-color: transparent;
                box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.07);
            `;
    }
};

export const Arrow = styled.div<{
    contrast: boolean;
    placement: any;
    side?: 'top' | 'bottom' | 'left' | 'right';
    position?: 'start' | 'middle' | 'end';
}>`
    position: absolute;
    background: ${p => (p.contrast ? 'transparent' : 'white')};
    transform: rotate(45deg);
    width: 0;
    height: 0;
    ${p => ArrowPlacement(p.placement, p.contrast)};
    border-width: 4px;
    border-style: solid;
`;

export const ChildrenSibling = styled.div`
    display: none;
`;