import React from 'react';
import { useTransition } from 'react-spring';
import {
    Img,
    ImgProgress,
    OverLay,
    PicWrap,
    PlusIcon,
    Preview,
    ProgressClose,
    ProgressTips,
    Remove,
    Span,
    UploadBtn,
    UploadedPic,
    AnimatedWrap,
} from '../style';
type IProps = {
    state: any;
    onRemove: (index: number, isLoading: boolean) => void;
    maxUpload: number;
    fileInput: any;
};
const Component = function({ state, onRemove, maxUpload, fileInput }: IProps) {
    const transitions = useTransition(state.files, k => k.uid, {
        from: { width: 0, height: 0 },
        leave: { width: 0, height: 0 },
        enter: { width: 100, height: 100 },
        config: {
            tension: 300,
            clamp: true,
        },
    });
    return (
        <PicWrap>
            {transitions.map(({ item, props, key }, index) => (
                <AnimatedWrap key={item.uid} style={props}>
                    <UploadedPic isError={item.isError}>
                        {(item.isLoading || item.isError) && (
                            <>
                                <ProgressTips isError={item.isError}>
                                    {item.isError ? '上传失败' : '文件上传中'}
                                </ProgressTips>
                                <ImgProgress current={item.progress} isError={item.isError} />
                                <ProgressClose
                                    onClick={() => {
                                        onRemove(index, item.isLoading);
                                    }}
                                />
                            </>
                        )}
                        {!item.isLoading && !item.isError && <Img src={item.data} />}
                        {!item.isLoading && !item.isError && (
                            <OverLay className="overlay">
                                <div>
                                    <Preview />
                                    <Remove
                                        onClick={() => {
                                            onRemove(index, item.isLoading);
                                        }}
                                    />
                                </div>
                            </OverLay>
                        )}
                    </UploadedPic>
                </AnimatedWrap>
            ))}
            {state.files.length < maxUpload && (
                <UploadBtn onClick={() => (fileInput.current as HTMLInputElement).click()}>
                    <PlusIcon />
                    <Span>上传图片</Span>
                </UploadBtn>
            )}
        </PicWrap>
    );
};
export default Component;