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";

export interface WriteSiderBarProps {
  className?: string;
  htmlCode: string;
  setHtmlCode: React.Dispatch<React.SetStateAction<string>>;
  loading: boolean;
  setLoading: React.Dispatch<React.SetStateAction<boolean>>;
  setWidth: React.Dispatch<React.SetStateAction<string>>;
  setHtmlheader: React.Dispatch<React.SetStateAction<string>>;
}

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

export function WriteSiderBar(props: WriteSiderBarProps) {
  const {
    className,
    htmlCode,
    setHtmlCode,
    loading,
    setLoading,
    setWidth,
    setHtmlheader,
  } = props;
  const isMobileScreen = useMobileScreen();
  const { onDragStart, shouldNarrow } = useDragSideBar();
  const navigate = useNavigate();
  useHotKey();
  return (
    <>
      <SideBarContainer
        onDragStart={onDragStart}
        shouldNarrow={shouldNarrow}
        {...props}
      >
        {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>
          <WritingPanel
            htmlCode={htmlCode}
            setHtmlCode={setHtmlCode}
            loading={loading}
            setLoading={setLoading}
            setWidth={setWidth}
            setHtmlheader={setHtmlheader}
          />
        </SideBarBody>
      </SideBarContainer>
    </>
  );
}