import { useMobileScreen } from "@/app/utils";
import dynamic from "next/dynamic";
import {
  SideBarContainer,
  SideBarBody,
  SideBarHeader,
  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";

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

export interface BgSiderBarProps {
  className?: string;
  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, 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
          previewUrl={previewUrl}
          setPreviewUrl={setPreviewUrl}
          isLoading={isLoading}
          setIsLoading={setIsLoading}
        />
      </SideBarBody>
    </SideBarContainer>
  );
}