import { IconButton } from '@/app/components/button';
import {
  SideBarBody,
  SideBarContainer,
  SideBarHeader,
  SideBarTail,
  useDragSideBar,
  useHotKey,
} from '@/app/components/sidebar';
import { showToast } from '@/app/components/ui-lib';
import { Path, REPO_URL } from '@/app/constant';
import GithubIcon from '@/app/icons/github.svg';
import HistoryIcon from '@/app/icons/history.svg';

import ReturnIcon from '@/app/icons/return.svg';

import SDIcon from '@/app/icons/sd.svg';
import Locale from '@/app/locales';
import { useSdStore } from '@/app/store/sd';

import { useMobileScreen } from '@/app/utils';
import dynamic from 'next/dynamic';
import { useNavigate } from 'react-router-dom';
import { getModelParamBasicData, getParams } from './sd-panel';

const SdPanel = dynamic(
  async () => (await import('@/app/components/sd')).SdPanel,
  {
    loading: () => null,
  },
);

export function SideBar(props: { className?: string }) {
  useHotKey();
  const isMobileScreen = useMobileScreen();
  const { onDragStart, shouldNarrow } = useDragSideBar();
  const navigate = useNavigate();
  const sdStore = useSdStore();
  const currentModel = sdStore.currentModel;
  const params = sdStore.currentParams;
  const setParams = sdStore.setCurrentParams;

  const handleSubmit = () => {
    const columns = getParams?.(currentModel, params);
    const reqParams: any = {};
    for (let i = 0; i < columns.length; i++) {
      const item = columns[i];
      reqParams[item.value] = params[item.value] ?? null;
      if (item.required) {
        if (!reqParams[item.value]) {
          showToast(Locale.SdPanel.ParamIsRequired(item.name));
          return;
        }
      }
    }
    const data: any = {
      model: currentModel.value,
      model_name: currentModel.name,
      status: 'wait',
      params: reqParams,
      created_at: new Date().toLocaleString(),
      img_data: '',
    };
    sdStore.sendTask(data, () => {
      setParams(getModelParamBasicData(columns, params, true));
      navigate(Path.SdNew);
    });
  };

  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>
        <SdPanel />
      </SideBarBody>
      <SideBarTail
        primaryAction={(
          <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
            <IconButton icon={<GithubIcon />} shadow />
          </a>
        )}
        secondaryAction={(
          <IconButton
            text={Locale.SdPanel.Submit}
            type="primary"
            shadow
            onClick={handleSubmit}
          >
          </IconButton>
        )}
      />
    </SideBarContainer>
  );
}