/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState } from "react";
import ExportView from "./ExportView";
import ExportPopup, { ExportViewModel } from "./ExportPopup";
import { ExportDataScope } from "../../type";

export type ExportProps = {
  visible: boolean;
  disabled: boolean;
  exportTypes?: string[];
  dataScopes?: ExportDataScope[];
  config: { uiElementGroupId: string };
  onExport?: (
    callBack: ((args: any) => void) | null,
    exportViewModel: ExportViewModel
  ) => void;
  onExportDelete: (callBack: ((args: any) => void) | null, id: string) => void;
  onExportList: (callBack: ((args: any) => void) | null) => void;
  onExportDownload: (callBack: ((args: any) => void) | null, id: string) => void;
};

const Export = (props: ExportProps) => {
  const [togglePopup, setTogglePopup] = useState(false);

  const onClick = () => {
    setTogglePopup(!togglePopup);
  };

  const onExport = (
    callBack: () => void,
    exportViewModel: ExportViewModel
  ) => {
    if (exportViewModel.exportType) {
      props.onExport?.(callBack, exportViewModel);
    }
  };
  

  return props.visible ? (
    <div className="tmpl-export-container">
      <ExportView disabled={props.disabled} onClick={onClick} />
      {togglePopup && !props.disabled && (
        <ExportPopup
          setTogglePopup={setTogglePopup}
          onExport={onExport}
          onExportList={props.onExportList}
          onExportDownload={props.onExportDownload}
          onExportDelete={props.onExportDelete}
          exportTypes={props.exportTypes}
          dataScopes={props.dataScopes}
        />
      )}
    </div>
  ) : (
    <></>
  );
};
export default Export;