/* eslint-disable @typescript-eslint/no-explicit-any */
import { useEffect, useRef, useState } from "react";
import { ExportType } from "./type";

import FactoryRenderer from "../../../../Renderer";
import { ExportDataScope } from "../../type";
import useClickOutside from "../../../../utils/useClickOutside";

interface ExportPopupProps {
  setTogglePopup: React.Dispatch<React.SetStateAction<boolean>>;
  onExport: (callBack: () => void, 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;
  exportTypes?: string[];
  dataScopes?: ExportDataScope[];
}

export type ExportViewModel = {
  exportType: string;
} & ExportDataScope;

enum Status {
  IN_PROGRESS = "InProcess",
  COMPLETED = "Success",
  FAILED = "Error",
  SCHEDULED = "Scheduled",
}

type ExportHistoryViewModel = {
  id: string;
  fileName: string;
  exportType: ExportType;
  exportDataScope: string;
  date: string;
  status: string;
  src: string;
  referenceId: string;
};

const DEFAULT_EXPORT_TYPES = Object.values(ExportType) as string[];
const DEFAULT_DATA_SCOPES: ExportDataScope[] = [
  { label: "Header List", type: "header", entity: "header" },
];

const ExportPopup = (props: ExportPopupProps) => {
  const exportTypes = props.exportTypes?.length
    ? props.exportTypes
    : DEFAULT_EXPORT_TYPES;
  const dataScopes = props.dataScopes?.length
    ? props.dataScopes
    : DEFAULT_DATA_SCOPES;
  const popupRef = useRef<HTMLDivElement>(null);
  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const [exporHistoryList, setExporHistoryList] = useState<
    ExportHistoryViewModel[]
  >([]);

  useEffect(() => {
    props.onExportList((list: ExportHistoryViewModel[]) => {
      setExporHistoryList(list);
    });
  }, []);

  // The popup only exists while it is open, so the listener is always wanted.
  useClickOutside(
    popupRef,
    true,
    () => {
      popupRef.current?.classList.add("tmpl-popup-animation-reverse");
      // Restart the close timer rather than stacking another one, otherwise a
      // second outside click races the first and can close after unmount.
      if (closeTimerRef.current !== null) {
        clearTimeout(closeTimerRef.current);
      }
      closeTimerRef.current = setTimeout(() => {
        closeTimerRef.current = null;
        props.setTogglePopup(false);
      }, 200);
    },
    (target) => Boolean(target.closest(`.tmpl-prvent-outside-click-close`)),
  );

  useEffect(() => {
    return () => {
      if (closeTimerRef.current !== null) {
        clearTimeout(closeTimerRef.current);
        closeTimerRef.current = null;
      }
    };
  }, []);

  const handleExportClick = (
    exportType: string,
    dataScope: ExportDataScope,
  ) => {
    const exportViewModel: ExportViewModel = {
      exportType,
      ...dataScope,
    };
    props.onExport(() => {
      props.onExportList((list: ExportHistoryViewModel[]) => {
        setExporHistoryList(list);
      });
    }, exportViewModel);
  };

  const downloadResultHandler = (response: any, fileName: string) => {
    const blob = new Blob([response]);
    const downloadUrl = window.URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = downloadUrl;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(downloadUrl);
    document.body.removeChild(link);
  };

  const handleDownload = async (fileUrl: string, fileName: string) => {
    try {
      props.onExportDownload(
        (res) => downloadResultHandler(res, fileName),
        fileUrl,
      );
    } catch (error) {
      console.error("Download failed:", error);
    }
  };

  return (
    <div className="tmpl-export-popup" ref={popupRef}>
      <div className="tmpl-export-scope-container">
        {dataScopes.map((scope) => (
          <div key={scope.label} className="tmpl-export-scope-section">
            <h4 className="qo-label tmpl-export-scope-header">{scope.label}</h4>
            <div className="tmpl-export-options-grid">
              {exportTypes.map((type) => (
                <button
                  type="button"
                  title={`${type} - ${scope.label}`}
                  key={`${type}-${scope.label}`}
                  className="tmpl-export-option-card"
                  onClick={() => handleExportClick(type, scope)}
                >
                  <span className="tmpl-export-option-type">{type}</span>
                </button>
              ))}
            </div>
          </div>
        ))}
      </div>
      <h4 className="qo-label tmpl-export-history-header">Previous Exports</h4>
      <div className="tmpl-export-history-items-container">
        {exporHistoryList?.map((exportHistoryViewModel) => {
          return (
            <div
              className="tmpl-export-history-item"
              key={exportHistoryViewModel.id}
            >
              <div className="tmpl-export-history-item-info">
                <p>{exportHistoryViewModel.fileName}</p>
                <p>{exportHistoryViewModel.date}</p>
              </div>
              <div className="tmpl-export-history-item-action">
                {exportHistoryViewModel.status === Status.COMPLETED ? (
                  <FactoryRenderer
                    name="download"
                    uiElementType="WIDGET"
                    widgetStyle={{
                      className: "qo-btn tmpl-button-icon qo-text-default",
                    }}
                    widgetType="ICON"
                    fillMode="clear"
                    title="Download"
                    aria-label="Download export"
                    onClick={() =>
                      handleDownload(
                        exportHistoryViewModel.referenceId,
                        exportHistoryViewModel.fileName,
                      )
                    }
                  />
                ) : exportHistoryViewModel.status === Status.FAILED ? (
                  <FactoryRenderer
                    widgetStyle={{ className: "qo-btn tmpl-button-icon qo-text-warning" }}
                    name="error"
                    uiElementType="WIDGET"
                    widgetType="ICON"
                    fillMode="clear"
                    title="Failed"
                    aria-label="Export failed"
                  />
                ) : (
                  <FactoryRenderer
                    name="load"
                    uiElementType="WIDGET"
                    widgetType="ICON"
                    widgetStyle={{ className: "qo-btn tmpl-button-icon qo-text-primary" }}
                    fillMode="clear"
                    title="In Process"
                    aria-label="Export in process"
                  />
                )}
                <FactoryRenderer
                  name="delete"
                  uiElementType="WIDGET"
                  widgetType="ICON"
                  fillMode="clear"
                  title="Delete"
                  aria-label="Delete export"
                  widgetStyle={{ className: "qo-btn tmpl-button-icon qo-text-danger" }}
                  onClick={() =>
                    props.onExportDelete(() => {
                      props.onExportList((list: ExportHistoryViewModel[]) => {
                        setExporHistoryList(list);
                      });
                    }, exportHistoryViewModel.id)
                  }
                />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};
export default ExportPopup;