import styled, { css } from 'styled-components';
import { cssUnitCalc } from 'utils';
import OriProgress from '../progress';
import { SIcon as InputClose } from '../input/style';
import Btn from '../button';
import Ico from 'kwai-icon';
import React from 'react';
import { animated } from 'react-spring';
export { Spinner } from '../spinner';
import theme from 'styles/theme';

export const Close = styled(InputClose).attrs(() => ({ name: 'Close' }))`
    &&& {
        cursor: pointer;

        width: 18px;
        height: 18px;
    }
`;

export const Wrapper = styled.div`
    position: relative;
    display: inline-block;
`;

export const Button = styled(Btn).attrs(p => ({
    size: 'medium',
    color: 'select',
}))<any>`
    background: white;
    border: 1px solid #dadcdf;
    color: #747a8c;
    transition: none;
    &&&:not(:disabled) svg path:first-child {
        fill: #747a8c;
    }

    &&&:hover:not(:disabled) {
        background: ${p => p.theme.brand};
        border: 1px solid ${p => p.theme.brand};
        color: white;
        svg path:first-child {
            fill: white;
        }
    }
`;
Button.defaultProps = { theme };

export const DropArea = styled.div<any>`
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    cursor: ${p => (p.disabled ? 'not-allowed' : 'pointer')};
    background: #fbfbfb;
    border: 1px dashed #dadcdf;
    border-radius: 2px;
    width: 416px;
    height: 200px;

    &:hover {
        border-color: ${p => p.theme.brand};
        border-width: 2px;
        svg {
            transform: scale(1.1);
            transition: transform 0.3s ease-out;
        }
    }
`;
DropArea.defaultProps = { theme };

export const DropTitle = styled.div`
    font-size: 14px;
    color: #101934;
    line-height: 20px;
    margin-bottom: 8px;
    margin-top: 24px;
`;

export const DropDesc = styled.div`
    font-size: 14px;
    color: #747a8c;
    line-height: 20px;
`;

export const DropIcon = styled(Ico).attrs(() => ({
    name: 'UploadCloud',
    color: '#00A5AA',
    size: 'large',
    fillColorRule: '&&& path:last-child',
}))`
    &&& {
        width: 48px;
        height: 48px;
        path:first-child {
            fill: none;
        }
    }
`;

//export const UploadIcon = styled(Ico).attrs(() => ({
//    name: 'Upload',
//    color: 'white',
//    size: 'small',
//    fillColorRule: '&&& path:last-child',
//}))``;

export const AttachIcon = styled(Ico).attrs(() => ({
    name: 'Attachment',
    size: 'small',
    color: '#747a8c',
}))`
    position: absolute;
    left: 8px;
    top: 6px;
`;

export const FileListContainer = styled.div`
    margin-top: 16px;
    display: flex;
    flex-direction: column;
`;

export const UploadedItem = styled.div<{ width: number | string; isError: boolean; isLoading: boolean }>`
    position: relative;
    box-sizing: border-box;
    user-select: none;
    padding: 0 12px;
    line-height: 26px;
    :hover {
        background: #f1f9fa;
        .upload-item-close {
            display: inline-block;
        }
    }
    .upload-item-close {
        display: none;
    }
    height: ${p => (p.isLoading ? '48px' : '32px')};
    transition: height 0.3s ease-in-out;
    width: ${p => cssUnitCalc(p.width)};
    vertical-align: middle;
    svg {
        vertical-align: middle;
    }
    ${p =>
        p.isError &&
        css`
            &&& {
                background: rgba(255, 74, 74, 0.04);
                color: #ff5a5e;
                svg path:first-child {
                    fill: #ff5a5e;
                }
            }
        `}
`;
export const ItemName = styled.span<any>`
    margin-left: 24px;
    width: ${p => cssUnitCalc(p.width - 70)};
    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;
    display: inline-block;
`;
export const HiddenFileInput = styled.input.attrs(() => ({
    type: 'file',
}))`
    display: none;
`;

export const Progress = styled(OriProgress)`
    display: block;
    margin-left: 24px;
`;

export const ProgressTips = styled.span<any>`
    font-size: 12px;
    color: ${p => (p.isError ? '#FF1644' : '#747a8c')};
    letter-spacing: 0.3px;
    line-height: 20px;
`;

// double styled
export const ImgProgress = styled(OriProgress)<any>`
    width: 80px;
    margin-top: 16px;
    .progressBar {
        background-color: ${p => (p.isError ? '#FF1644' : p.theme.brand)};
    }
`;
ImgProgress.defaultProps = { theme };

export const ProgressClose = styled(Ico).attrs(() => ({
    name: 'Close',
    color: '#747A8C',
    size: 'small',
}))<any>`
    position: absolute;
    right: 4px;
    top: 4px;
`;

const PicUploadStyle = css<any>`
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #fbfbfb;
    border: 1px dashed ${p => (p.isError ? '#FF1644' : '#dadcdf')};
    border-radius: 2px;
    &:hover {
        border-color: ${p => (p.isError ? '#FF1644' : p.theme.brand)};
    }
`;

export const UploadBtn = styled.div<any>`
    ${PicUploadStyle}
`;
UploadBtn.defaultProps = { theme };
export const AnimatedWrap = styled(animated.div)`
    display: inline-block;
`;

export const UploadedPic = styled.div<any>`
    :hover .overlay {
        bottom: 0;
        height: calc(100% + 2px);
    }
    ${PicUploadStyle}
`;
UploadedPic.defaultProps = { theme };

export const PlusIcon = styled(Ico).attrs(() => ({
    name: 'Add',
    color: '#747A8C',
    size: 'large',
}))<any>``;

export const Span = styled.span`
    font-size: 14px;
    color: #747a8c;
    letter-spacing: 0.3px;
    line-height: 20px;
    margin-top: 12px;
`;

export const OverLay = styled.div`
    position: absolute;
    border-radius: 2px;
    bottom: calc(100% + 2px);
    top: -1px;
    left: -1px;
    background: rgba(0, 0, 0, 0.4);
    overflow: hidden;
    width: calc(100% + 2px);
    height: 0;
    transition: 0.08s ease;
    display: inline-flex;
    justify-content: center;
    align-items: center;
`;

export const PicWrap = styled.div`
    display: flex;
    flex-wrap: wrap;
    > div {
        margin-right: 16px;
        margin-bottom: 16px;
    }
`;

export const Img = styled.img`
    border-radius: 2px;

    position: absolute;
    object-fit: cover;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
`;

export const Preview = styled(Ico).attrs(() => ({
    name: 'Eye',
    color: 'white',
    size: 'large',
}))<any>`
    margin-right: 20px;
`;

export const Remove = styled(Ico).attrs(() => ({
    name: 'Trash',
    color: 'white',
    size: 'large',
}))<any>``;