import { useMobileScreen } from "@/app/utils";
import dynamic from "next/dynamic";
import {
    SideBarContainer,
    SideBarBody,
    SideBarHeader,
    SideBarTail,
    useDragSideBar,
    useHotKey,
} from "@/app/components/sidebar";
import { IconButton } from "@/app/components/button";
import ReturnIcon from "@/app/icons/return.svg";
import HistoryIcon from "@/app/icons/history.svg";
import Locale from "@/app/locales";
import { Path } from "@/app/constant";
import { useNavigate } from "react-router-dom";
import SDIcon from "@/app/icons/sd.svg";
import type { LocalData } from '@/app/types/zuotang';
import { ApiPath } from '@/app/constant';
import { message } from 'antd';

const BgPanel = dynamic(
    async () => (await import("@/app/components/bgRemoval")).BgPanel,
    {
        loading: () => null,
    },
);

export interface BgSiderBarProps {
    className?: string;
    fileData: Blob | null;
    setFileData: React.Dispatch<React.SetStateAction<Blob | null>>;
    previewUrl: string | null;
    setPreviewUrl: React.Dispatch<React.SetStateAction<string | null>>;
    isLoading: boolean;
    setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
}


export function BgSiderBar(props: BgSiderBarProps) {
    const isMobileScreen = useMobileScreen();
    const { onDragStart, shouldNarrow } = useDragSideBar();
    const navigate = useNavigate();
    useHotKey();
    const {
        className,
        fileData,
        setFileData,
        previewUrl,
        setPreviewUrl,
        isLoading,
        setIsLoading,
    } = props;
    return (
        <SideBarContainer
            onDragStart={onDragStart}
            shouldNarrow={shouldNarrow}
            className={className}
        >
            {isMobileScreen ? (
                <div
                    className="window-header"
                    data-tauri-drag-region
                    style={{
                        paddingLeft: 0,
                        paddingRight: 0,
                    }}
                >
                    <div className="window-actions">
                        <div className="window-action-button">
                            <IconButton
                                icon={<ReturnIcon />}
                                bordered
                                title={Locale.Sd.Actions.ReturnHome}
                                onClick={() => navigate(Path.Home)}
                            />
                        </div>
                    </div>
                    <SDIcon width={50} height={50} />
                    <div className="window-actions">
                        <div className="window-action-button">
                            <IconButton
                                icon={<HistoryIcon />}
                                bordered
                                title={Locale.Sd.Actions.History}
                                onClick={() => navigate(Path.SdNew)}
                            />
                        </div>
                    </div>
                </div>
            ) : (
                <SideBarHeader
                    title={
                        <IconButton
                            icon={<ReturnIcon />}
                            bordered
                            title={Locale.Sd.Actions.ReturnHome}
                            onClick={() => navigate(Path.Home)}
                        />
                    }
                    logo={<SDIcon width={38} height={"100%"} />}
                ></SideBarHeader>
            )}
            <SideBarBody>
                <BgPanel
                    fileData={fileData}
                    setFileData={setFileData}
                    previewUrl={previewUrl}
                    setPreviewUrl={setPreviewUrl}
                    isLoading={isLoading}
                    setIsLoading={setIsLoading}
                />
            </SideBarBody>
        </SideBarContainer>
    )
}