import React, { useState } from 'react';
import { FileListContainer, UploadedItem, AttachIcon, Progress, ItemName, Close, Spinner } from '../style';
import { useTransition, animated } from 'react-spring';
import theme from 'styles/theme';

export type FileDesc = {
    isLoading: boolean;
    isError: boolean;
    progress: number;
    data: any;
    name: string;
    uid: string;
    file: File;
};
type IProps = {
    uploaded: FileDesc[];
    width: number | string;
    onRemove: (index: number, isLoading: boolean) => void;
};
const FileList = function({ uploaded, width, onRemove }: IProps) {
    const transitions = useTransition(uploaded, (k: FileDesc) => k.uid + k.isLoading, {
        from: { height: 0 },
        enter: (item: any) => ({ height: item.isLoading ? 48 : 32 }),
        leave: { height: 0, overflow: 'hidden' },
        unique: true,
        config: {
            tension: 300,
            clamp: true,
        },
    } as any);
    return (
        <FileListContainer>
            {transitions.map(({ item, props, key }, index) => (
                <animated.div key={key} style={props}>
                    <UploadedItem isLoading={item.isLoading} isError={item.isError} width={width}>
                        <AttachIcon />
                        {/*{item.isLoading ? <Spinner /> : }*/}
                        <ItemName width={width}>{item.name}</ItemName>
                        {item.isLoading && <Progress current={item.progress} width={288} />}
                        <Close className="upload-item-close" onClick={() => onRemove(index, item.isLoading)} />
                    </UploadedItem>
                </animated.div>
            ))}
        </FileListContainer>
    );
};
FileList.defaultProps = {
    theme,
};
export default FileList;