import styled, { css } from 'styled-components';
import { animated } from 'react-spring';
import { default as KwaiInput } from '../input';
import { Wrapper as DropWrapper, DownIcon as Icon, Menu as DropMenu, MenuItem as DropItem } from '../dropdown/style';
import { cssUnitCalc } from 'utils';
import KIcon from 'kwai-icon';
import theme from 'styles/theme';

export const Check = styled(KIcon).attrs(() => ({
    name: 'Checked',
    color: '#00A5AA',
    fillColorRule: '&&& path:last-child',
}))<any>`
    &&& {
        position: absolute;
        cursor: pointer;
        right: 12px;
        top: 8px;
        width: 20px;
        height: 20px;
    }
    &&& path:first-child {
        fill: transparent;
    }
`;
export const Close = styled(KIcon).attrs(() => ({ name: 'Close', color: '#888FA3' }))<any>`
    &&& {
        cursor: pointer;
        margin: 4px;
        transform: translateY(1px);
        width: 16px;
        height: 16px;
    }
`;
export const Clear = styled(KIcon).attrs(() => ({ name: 'CloseInvert', color: '#b6bbc7' }))<any>`
    &&& {
        position: absolute;
        cursor: pointer;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
    }
`;
export const DownIcon = styled(Icon)`
    position: absolute;
    right: 0.45em;
    top: 0.45em;
`;

export const Menu = animated(DropMenu);
export const Wrapper = styled(DropWrapper)<any>`
    cursor: ${p => (p.disabled ? 'not-allowed' : 'pointer')};
    input {
        background: ${p => (p.disabled ? '#f5f5f5' : 'white')};
        cursor: inherit;
    }
    ${p =>
        p.multiple &&
        css<any>`
            padding: 6px 8px 2px 8px;
            box-shadow: inset 0 0 0 1px #dadcdf;
            border-radius: 2px;
            :focus-within {
                box-shadow: inset 0 0 0 2px ${p => p.theme.brand};
                border-radius: 4px;
            }
            width: ${p => cssUnitCalc(p.width ? p.width : 168)};
            box-sizing: border-box;
            min-height: 36px;
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            cursor: text;
            input {
                height: 24px;
            }
        `}
`;
Wrapper.defaultProps = { theme };
export const Input = styled(KwaiInput)<any>`
    background: ${p => (p.disabled ? '#f5f5f5' : '')};
    cursor: ${p => (p.disabled ? 'not-allowed' : 'pointer')};
`;

export const MenuItem = styled(DropItem)<any>`
    outline: none;
    position: relative;
    cursor: pointer;
    background: ${p => (p.selected ? p.theme.selected : 'white')};
`;
MenuItem.defaultProps = { theme };
export const NoData = styled.div<any>`
    text-align: center;
    width: ${p => cssUnitCalc(p.width ? p.width : 168)};
`;
export const MultiWrap = styled.div<any>`
    padding: 6px 8px 2px 8px;
    box-shadow: inset 0 0 0 1px #dadcdf;
    border-radius: 2px;
    :focus-within {
        box-shadow: inset 0 0 0 2px ${p => p.theme.brand};
        border-radius: 4px;
    }
    width: ${p => cssUnitCalc(p.width ? p.width : 168)};
    box-sizing: border-box;
    min-height: 36px;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    cursor: text;
    input {
        height: 24px;
    }
`;
MultiWrap.defaultProps = { theme };
export const MultiItem = animated(styled.div`
    background: #f5f5f5;
    will-change: transform, opacity;
    border-radius: 2px;
    display: inline-flex;
    font-size: 14px;
    color: #101934;
    cursor: pointer;
    letter-spacing: 0.3px;
    line-height: 24px;
    padding-left: 8px;
    height: 24px;
    margin-right: 4px;
    margin-bottom: 4px;
    position: relative;
`);

export const MultiInput = styled(KwaiInput).attrs(() => ({ width: 'auto' }))<any>`
    margin-bottom: 4px;
    flex: 1;
    input {
        padding: 0;
        box-shadow: none;
        width: calc(100% - 50px);
        min-width: 1px;
        &:focus {
            box-shadow: none;
        }
    }
`;

export const SelectInputWrap = styled.div`
    display: inline-flex;

    // select input
    > div > div > input {
        border-radius: 2px 0 0 2px;
        &:focus {
            border-radius: 4px 0 0 4px;
        }
    }
    // input
    > div > input {
        border-radius: 0 2px 2px 0;
        transform: translateX(-1px);
        &:focus {
            border-radius: 0 4px 4px 0;
        }
    }
`;