import styled, { css } from 'styled-components';
import Icon from 'kwai-icon';
import { cssUnitCalc } from 'utils';
import theme from 'styles/theme';

export const Wrapper = styled.div`
    position: relative;
    display: inline-flex;
    align-items: center;
    user-select: none;
    cursor: pointer;
    font-size: 14px;
    color: #101934;
    svg {
        width: 20px;
        height: 20px;
    }
`;

export const DownIcon = styled(Icon).attrs(() => ({ name: 'DropDown' }))<any>`
    transition: all 0.15s linear;
    transform: rotate(${p => (p.isOpen ? 180 : 0)}deg);
`;

//noinspection CssInvalidPropertyValue
export const Menu = styled.div<any>`
    position: absolute;
    will-change: height, transform;
    top: 100%;
    z-index: 666;
    background: #ffffff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.24);
    border-radius: 2px;
    padding: 6px 0;
    max-height: 158px;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-y: overlay;

    ${p => {
        switch (p.position) {
            case 'middle':
                return css`
                    left: 50%;
                    transform: translate(-50%, 0);
                `;
            case 'end':
                return css`
                    right: 0;
                `;
            default:
                return css`
                    left: 0;
                `;
        }
    }}
`;

export const MenuItem = styled.div<any>`
    height: 36px;
    line-height: 36px;
    padding-left: 12px;
    font-size: 14px;
    color: #101934;
    box-sizing: border-box;
    width: ${p => cssUnitCalc(p.width ? p.width : 168)};
    &.item-selected {
        background: ${p => p.theme.selected};
    }
    &:hover {
        background: ${p => p.theme.hover};
    }
`;
MenuItem.defaultProps = { theme };