import styles from './bg-removal.module.scss'
import { IconButton } from "./button";
import Locale from '../locales'
import CloseIcon from "../icons/close.svg";
import { useNavigate } from "react-router-dom";
import { UploadOutlined } from '@ant-design/icons';
import type { UploadProps, UploadFile } from 'antd';
import { Button, Flex, Splitter, message, Upload } from 'antd';
import { useState, useRef, useEffect } from 'react';
import { FileList } from './bgRemoval/fileList'
import { BgRemovalRight } from './common/bgRemoval-right';
import clsx from 'clsx';
import LoadingIcon from "@/app/icons/loading.svg";
import BotIcon from "@/app/icons/bot.svg";

export function BgRemovalPage() {
    const navigate = useNavigate();
    const [fileData, setFileData] = useState<Blob | null>(null);   //储存上传图片
    const [previewUrl, setPreviewUrl] = useState<string | null>('');  //预览图片的URL
    const allowType: string[] = ['png', 'jpg']              //允许上传的图片类型
    const [fileList, setFileList] = useState<Blob[]>([])  //用户的图片列表 本地存储
    const [isLoading, setIsLoading] = useState(false)

    // 修改 useEffect 监听 fileData
    useEffect(() => {
        if (fileData) {
            // 创建 Blob 的临时 URL
            const objectUrl = URL.createObjectURL(fileData);
            setPreviewUrl(objectUrl);
            // 组件卸载时释放内存
            return () => URL.revokeObjectURL(objectUrl);
        }
    }, [fileData]);


    // 关闭图片
    const closePic = () => {
        setFileData(null);
        setPreviewUrl('');
    };
    //上传图片
    const onChange = (info: any) => {
        if (info.file.status === 'uploading') {
            return;
        }
        if (info.file.status === 'done') {
            // 获取上传的文件对象
            const file = info.file as UploadFile;
            const blob = file.originFileObj as Blob;
            setFileData(blob);
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
    };

    return (
        <>
            <div className="window-header">
                <div className="window-header-title">
                    <div className="window-header-main-title">
                        {Locale.BgRemoval.Title}
                    </div>
                </div>
                <div className="window-actions">
                    <div className="window-action-button">
                        <IconButton
                            icon={<CloseIcon />}
                            bordered
                            onClick={() => navigate(-1)}
                        />
                    </div>
                </div>
            </div>
            <div className={styles['removal-body']}>
                <Splitter className={styles['splitter']}>
                    <Splitter.Panel
                        defaultSize="70%"
                        min="60%"
                        max="70%"
                        className={styles['splitterPanel']}
                    >
                        <Flex vertical justify='center' align="center" gap="middle" className={styles['panelFlex']}>
                            {isLoading ? (
                                <div className={clsx("no-dark", styles["loading-content"])}>
                                    <BotIcon />
                                    <LoadingIcon />
                                </div>
                            ) : previewUrl ? (
                                <div className={styles['preview']}>
                                    <img src={previewUrl} alt="Preview" className={styles['previewImage']} />
                                    <IconButton icon={<CloseIcon />} bordered onClick={closePic} className={styles['icon']} />
                                </div>
                            ) : (
                                <Upload
                                    onChange={onChange}
                                    beforeUpload={(file) => {
                                        setFileData(file);
                                        return false;
                                    }}
                                    showUploadList={false}
                                    accept="image/*"
                                >
                                    <Button icon={<UploadOutlined />} size='large'>
                                        上传图片
                                    </Button>
                                </Upload>
                            )}
                        </Flex>
                    </Splitter.Panel>
                    <Splitter.Panel>
                        <BgRemovalRight
                            fileData={fileData}
                            setFileData={setFileData}
                            previewUrl={previewUrl}
                            setPreviewUrl={setPreviewUrl}
                            isLoading={isLoading}
                            setIsLoading={setIsLoading}
                        />
                    </Splitter.Panel>
                </Splitter>
            </div>
            <div>
                {/* <FileList filelist={filelist} /> */}
            </div>
        </>
    )
}