import { ImportOutlined } from "@ant-design/icons";
import { Button } from "antd";
import { useState } from "react";
import { MODES } from "../../config.js";
import { useMode } from "../../stores/useMode.js";
import { MergePointsModal } from "./MergePointsModal.jsx";
import { PointsFileUploadModal } from "./PointsFileUploadModal.jsx";

export const ImportModeSidebarButtons = () => {
  const { mode, isImportMode, setImportMode } = useMode();
  const [uploadModalOpen, setUploadModalOpen] = useState(false);
  const [addPointsModalOpen, setAddPointsModalOpen] = useState(false);

  const onCancel = () => {
    setImportMode(false);
  };

  const onImport = () => {
    setImportMode(true);
    setUploadModalOpen(true);
  };

  const canEdit = true

  if (isImportMode) {
    return (
      <div className="flex flex-row flex-0 gap-2 border-t-[1px] border-b-[1px]">
        <Button type="default" onClick={onCancel}>
          Отмена
        </Button>
        <Button type="primary" className="flex-1" onClick={() => setAddPointsModalOpen(true)}>
          Добавить в базу
        </Button>
        {uploadModalOpen &&
          <PointsFileUploadModal
            isOpened={uploadModalOpen}
            onClose={() => setUploadModalOpen(false)}
          />
        }
        {addPointsModalOpen &&
          <MergePointsModal
            isOpened={addPointsModalOpen}
            onClose={() => setAddPointsModalOpen(false)}
          />
        }

      </div>
    );
  }

  return mode === MODES.PENDING && canEdit && (
    <div className="flex flex-col flex-0 border-t-[1px] border-b-[1px]">
      <Button type="default" onClick={onImport}>
        <ImportOutlined />
        Импортировать
      </Button>
    </div>
  );
}
