import React, { FC, useEffect, useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import * as pdfjs from "pdfjs-dist";
import { apiCall } from "../../untils/apiCall";
import PdfReader from "./PdfReader";
import { getFileUrl } from "../../helpers/fileHelper";
import {
  getMapElementForPage,
  getPoints,
  getPointsForList,
  getPointsForListWithKKS,
  getSpoolsForCanvas,
  setNewPointName,
} from "../../helpers/pdfHelpers";
import {
  clearSelection,
  generateDuplicateElement,
  getDeatilsData,
  isJoint,
  setDotElement,
  setOptionAddElement,
  updateStateRemoveElement,
  updateStateShowEdit,
  setTriageElement,
  setEdgeElement,
  setOptionMapElement,
  setOptionsSaveElement,
  setCloudElement,
  getElement,
  setOptionAddReference,
  getReferenceElement,
  setOptionsSaveReferencElement,
  setOptionsSaveSourceElement,
  getMapElement,
  setOptionAddSpool,
  setOptionsSaveSpool,
  serializeSaveSpool,
  setOptionAddSpoolInstance,
} from "./sectionModel";
import { Content, ContentFull, ContentWrapper } from "../components";
import { ItemList } from "../ItemList";
import { IElementType, IReferenceElement } from "../../definitions/element";
import { ItemDetailPanel } from "../ItemDetailPanel";
import { MapHeader } from "./MapHeader";
import {
  emptyDetailsProps,
  emptyFocused,
  emptyModalProps,
  initialSiteProps,
} from "./sectionConst";
import { SectionModals } from "./SectionsModal";
import { LoadingContent } from "../layouts/Loading";
import { Aligment, Card } from "venice-ui";
import { dictionary } from "../../untils/dictionary";
import { useStoreActions, useStoreState } from "../../store";
import { AddRevisionModal } from "../Modals/AddRevisionModal";
import {
  ADDITIONAL_TYPES,
  IAddtionalElements,
  TAdditionalType,
} from "../../definitions/additional";
import { PointModal } from "../Modals/PointModal";
import { IJointType, getJointDefinition } from "../../definitions/joint";
import { pdfMapGenerator, xlsxListGenrator } from "../../helpers/generators";
import { t } from "../../helpers/userHelper";
import { getSectionDetails } from "../../helpers/projectHelper";
import { ifHaveReferences } from "../../helpers/weldHelpers";
import { getConfig, setHeaders } from "../../definitionsNew/setFieldsHelper";
import { Scopes } from "../../definitionsNew/fields";
import { TScopesType } from "../../untils/const";
import { EditSectionModal, ExportModal, EditSpoolModal } from "../Modals";
import { ISpoolCanvas } from "../../definitions/spools";
import { SectionHeader } from "./SectionHeader";
pdfjs.GlobalWorkerOptions.workerSrc =
  "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.5.141/build/pdf.worker.min.js";

export interface ModalProps {
  show: boolean;
  x?: number;
  y?: number;
  type: string;
  mode: string;
  data?: IElementType;
}
export interface IDetailsProps {
  type: string;
  data?: IElementType | IAddtionalElements;
  active: string;
  action: boolean;
}
export interface ExportModalProps {
  show: boolean;
}
export interface DeleteModalProps {
  show: boolean;
  id: string;
}
export interface DeleteSectionModal {
  show: boolean;
  id: string;
}
export interface SpooolDetailsModal {
  show: boolean;
  spoolID: string;
}
export interface SpooolDeletesModal {
  show: boolean;
  spoolID: string;
}
export interface IFocusedProps {
  id: string;
  type: string;
}

export interface SiteProps {
  file: pdfjs.PDFDocumentProxy | null;
  fileUrl: string;
  fileName: string;
  fileDBName: string;
  loading: boolean;
  kks: string;
  drawMode: TAdditionalType;
  editMode: boolean;
  referal: string | undefined;
  name: string;
  modal: ModalProps;
  export: ExportModalProps;
  details: IDetailsProps;
  delete: DeleteModalProps;
  deleteSection: DeleteSectionModal;
  scale: number;
  scaleDirection: string;
  buttonLoader: boolean;
  revision: number;
  spoolDetails: SpooolDetailsModal;
  spoolDelete: SpooolDeletesModal;
  focused: IFocusedProps;
  inputFocused: string;
  activePanelTab: string;
}

const Section: FC = () => {
  const navigate = useNavigate();
  const { sectionID, pageID, projectID } = useParams();

  const [editSectionModal, toggleEditSectionModal] = useState(false);
  const [showJointWeld, toogleShowJointWeld] = useState(false);
  const [newRevision, toggleNewRevision] = useState(false);
  const [siteProps, _updateSiteProps] = useState<SiteProps>(initialSiteProps);
  const { orgID, uid, configs } = useStoreState(
    (state) => state.user.userDetails,
  );
  const { elements, references, sections, projectName, mapElements, spools } =
    useStoreState((state) => state.projectDetails.projectDetails);

  const { projects } = useStoreState((state) => state.projects);
  const { contracts, orgRole } = useStoreState(
    (state) => state.user.userDetails,
  );

  const [pageNumber, _setPageNumber] = useState(pageID ? pageID : 1);

  const pageNumberRef = React.useRef(pageNumber);
  const setPageNumber = (x: number) => {
    pageNumberRef.current = x;
    _setPageNumber(x);
  };

  useEffect(() => {
    setPageNumber(pageID ? parseInt(pageID) : 1);
  }, [pageID]);

  const elementsRef = useRef(elements);
  const referencesRef = useRef(references);
  const {
    addElement,
    updateElement,
    removeElement,
    updateSection,
    addReference,
    updateReference,
    removeReference,
    clearReferences,
    addMapElements,
    updateMapElements,
    removeMapElements,
    removeSection,
    addSpool,
    updateSpool,
    updateDetailsSpool,
    removeSpoolInstance,
    addSpoolInstance,
  } = useStoreActions((actions) => actions.projectDetails);

  const myStateRef = React.useRef(siteProps);

  const handleShortcut = (
    action: string,
    elementID: string,
    elementType: string,
  ) => {
    if (
      !myStateRef.current.modal.show &&
      !myStateRef.current.export.show &&
      !myStateRef.current.delete.show &&
      !myStateRef.current.deleteSection.show &&
      !myStateRef.current.spoolDetails.show &&
      !myStateRef.current.spoolDelete.show &&
      !newRevision
    ) {
      if (elementType === "joint" || elementType === "ref") {
        switch (action) {
          case "delete":
            showDeleteModal(elementID);
            break;
          case "edit":
            showEditModal(elementID, elementType === "ref");
            break;
          case "duplicate":
            duplicateElement(elementID);
            break;
          case "setReference":
            setReferalPoint(elementID);
            break;
          case "clearReference":
            clearReferalPoint();
            break;
          default:
            break;
        }
      } else if (elementType === "spool") {
        switch (action) {
          case "delete":
            showDeleteSpoolModal(elementID);
            break;
          case "edit":
            showSpoolEditModal(elementID);
            break;
          default:
            break;
        }
      } else if (elementType === "mapElement") {
        switch (action) {
          case "delete":
            showDeleteModal(elementID);
            break;
          default:
            break;
        }
      }
    }
  };
  const updateSiteProps = (x: SiteProps) => {
    myStateRef.current = x;
    _updateSiteProps(x);
  };

  const [activeTab, updateActiveTab] = useState("map");
  const tabActionClick = (value: string) => {
    resetSelection();
    updateActiveTab(value);
  };
  const setLoading = () => {
    updateSiteProps({
      ...myStateRef.current,
      buttonLoader: true,
    });
  };
  const getPageNumber = () => {
    return pageID ? parseInt(pageID) : 1;
  };

  const setInputFocused = (name: string) => {
    updateSiteProps({
      ...myStateRef.current,
      inputFocused: name,
    });
  };
  const setBlurInput = () => {
    updateSiteProps({
      ...myStateRef.current,
      inputFocused: "",
    });
  };
  const showAddModal = (x: number, y: number, type: string) => {
    updateSiteProps({
      ...myStateRef.current,
      modal: {
        show: true,
        x: x,
        y: y,
        type: type,
        mode: "add",
        data: undefined,
        // predefineName: newName,
      },
    });
  };
  const resetSelection = () => {
    updateSiteProps(clearSelection(myStateRef.current));
  };
  const hideElementModal = () => {
    updateSiteProps({
      ...myStateRef.current,
      modal: {
        ...emptyModalProps,
      },
    });
  };

  const hideDeleteModal = () => {
    updateSiteProps({
      ...myStateRef.current,
      delete: {
        show: false,
        id: "",
      },
    });
  };

  const hideDeleteSectionModal = () => {
    updateSiteProps({
      ...myStateRef.current,
      deleteSection: {
        show: false,
        id: "",
      },
    });
  };

  const hideExportModal = () => {
    updateSiteProps({
      ...myStateRef.current,
      export: {
        show: false,
      },
    });
  };

  const setActivePanelTab = (tab: string) => {
    if (tab !== myStateRef.current.activePanelTab) {
      updateSiteProps({
        ...myStateRef.current,
        editMode: tab === "elements" ? true : false,
        activePanelTab: tab,
        referal: undefined,
        details: {
          ...emptyDetailsProps,
        },
      });
    }
  };

  const getDetails = async () => {
    const details = getSectionDetails(sectionID!, sections);
    const fileUrl = await getFileUrl(`${orgID}/${projectID}/${details.file}`);
    const loadingTask = pdfjs.getDocument(fileUrl);
    const pdf = await loadingTask.promise;

    updateSiteProps({
      ...myStateRef.current,
      file: pdf,
      fileUrl: fileUrl,
      fileName: details.fileName as string,
      loading: false,
      name: details.sectionName as string,
      fileDBName: details.file as string,
      kks: details.kks as string,
      revision: details.revision as number,
    });
  };
  useEffect(() => {
    getDetails();
  }, [sections]);

  useEffect(() => {
    elementsRef.current = elements;
  }, [elements]);

  const addPoint = (x: number, y: number, type: string) => {
    if (orgRole !== "readOnly") {
      if (myStateRef.current.referal) {
        const duplicateElement = generateDuplicateElement(
          myStateRef.current.referal,
          elementsRef.current,
          referencesRef.current,
          parseInt(pageNumberRef.current as string),
          x,
          y,
        );
        createElement(duplicateElement, "duplicate");
      } else {
        showAddModal(x, y, type);
      }
    }
  };

  //ToDo refactor after finish
  const createMapElement = (x: number, y: number, type: string) => {
    const numberOfPage = parseInt(pageNumberRef.current as string);
    if (type === ADDITIONAL_TYPES.dot) {
      createElement(setDotElement(x, y, projectID!, sectionID!, numberOfPage));
    }
    if (type === ADDITIONAL_TYPES.triage) {
      createElement(
        setTriageElement(x, y, projectID!, sectionID!, numberOfPage),
      );
    }
    if (type === ADDITIONAL_TYPES.edge) {
      createElement(
        setEdgeElement(
          x,
          y,
          x + 45,
          y + 45,
          projectID!,
          sectionID!,
          numberOfPage,
        ),
      );
    }
    if (type === ADDITIONAL_TYPES.cloud) {
      createElement(
        setCloudElement(x, y, 100, 100, projectID!, sectionID!, numberOfPage),
      );
    }
  };

  const showExportModal = async () => {
    updateSiteProps({
      ...myStateRef.current,
      export: {
        show: true,
      },
      focused: { ...emptyFocused },
    });
  };

  const showDeleteSectionModal = async () => {
    updateSiteProps({
      ...myStateRef.current,
      deleteSection: {
        show: true,
        id: sectionID!,
      },
      focused: { ...emptyFocused },
    });
  };

  const showEditModal = (id: string, isReference: boolean) => {
    updateSiteProps(
      updateStateShowEdit(
        myStateRef.current,
        elements,
        references,
        id,
        isReference,
      ),
    );
  };

  const showSpoolEditModal = (spoolID: string) => {
    const selectedID = spools.find((_spool) =>
      _spool.instances
        .map((_instance) => _instance.instanceID)
        .includes(spoolID),
    )?.spoolID;
    updateSiteProps({
      ...myStateRef.current,
      spoolDetails: {
        spoolID: selectedID || "",
        show: true,
      },
      focused: { ...emptyFocused },
    });
  };

  const hideSpoolDetailsModal = () => {
    updateSiteProps({
      ...myStateRef.current,
      spoolDetails: {
        spoolID: "",
        show: false,
      },
      focused: { ...emptyFocused },
    });
  };
  const setReferalPoint = (id: string) => {
    const element = getElement(
      id,
      elements,
      references,
      parseInt(pageNumberRef.current as string),
    );
    updateSiteProps({
      ...myStateRef.current,
      referal: element.id,
      details: {
        type: "",
        data: undefined,
        active: "",
        action: false,
      },
      focused: { ...emptyFocused },
    });
  };

  const clearReferalPoint = () => {
    updateSiteProps({
      ...myStateRef.current,
      referal: "",
      details: {
        type: "",
        data: undefined,
        active: "",
        action: false,
      },
      focused: { ...emptyFocused },
    });
  };

  const showDetails = (
    id: string,
    isMapElement: boolean,
    isReference: boolean,
  ) => {
    const element = isMapElement
      ? getMapElement(id, mapElements)
      : isReference
        ? getReferenceElement(id, references, elements)
        : getElement(id, elements);

    updateSiteProps({
      ...myStateRef.current,
      details: {
        type: element ? element.type : "",
        data: element,
        active: id,
        action: false,
      },
      focused: { ...emptyFocused },
      activePanelTab: element?.type === "joint" ? "joints" : "elements",
    });
  };

  const showSpoolDetails = (spoolID: string) => {
    updateSiteProps({
      ...myStateRef.current,
      details: {
        type: "spool",
        data: undefined,
        active: spoolID,
        action: false,
      },
      focused: { ...emptyFocused },
      activePanelTab: "spools",
    });
  };

  const hideDetails = () => {
    updateSiteProps({
      ...myStateRef.current,
      details: {
        type: "",
        data: undefined,
        active: "",
        action: false,
      },
      focused: { ...emptyFocused },
    });
  };

  const setAction = () => {
    updateSiteProps({
      ...myStateRef.current,
      details: {
        ...myStateRef.current.details,
        action: true,
      },
      focused: { ...emptyFocused },
    });
  };

  const cancelAction = () => {
    updateSiteProps({
      ...myStateRef.current,
      details: {
        ...myStateRef.current.details,
        action: false,
      },
      focused: { ...emptyFocused },
    });
  };

  const showDeleteModal = (id: string) => {
    updateSiteProps({
      ...myStateRef.current,
      delete: {
        show: true,
        id: id,
      },
      focused: { ...emptyFocused },
    });
  };

  const showDeleteSpoolModal = (id: string) => {
    updateSiteProps({
      ...myStateRef.current,
      spoolDelete: {
        show: true,
        spoolID: id,
      },
      focused: { ...emptyFocused },
    });
  };

  const hideSpoolDeleteModal = () => {
    updateSiteProps({
      ...myStateRef.current,
      spoolDelete: {
        show: false,
        spoolID: "",
      },
      focused: {
        id: "",
        type: "",
      },
    });
  };

  const handleShowFocusedItem = (type: string, id?: string) => {
    updateSiteProps({
      ...myStateRef.current,
      focused: {
        id: id ? id : "",
        type: id ? type : "",
      },
    });
  };

  const setMode = (drawMode: TAdditionalType) => {
    updateSiteProps({
      ...myStateRef.current,
      drawMode: drawMode,
    });
  };

  const addReferenceElement = async (sourceId: string) => {
    const settings = setOptionAddReference(
      sourceId,
      siteProps.modal,
      projectID!,
      sectionID!,
      getPageNumber(),
      orgID,
    );
    await apiCall("projects/addReference", settings, (response: any) => {
      addReference(response.newReferenceElement);

      updateSiteProps({
        ...myStateRef.current,
        buttonLoader: false,
        modal: {
          ...emptyModalProps,
        },
        details: {
          ...myStateRef.current.details,
        },
      });
    });
  };

  const createSpool = async (spoolName: string) => {
    const settings = setOptionAddSpool(
      spoolName,
      siteProps.modal,
      projectID!,
      sectionID!,
      parseInt(pageNumberRef.current as string),
      orgID,
    );

    await apiCall("projects/addSpool", settings, (response: any) => {
      addSpool({
        spoolID: response.newElement.spoolID,
        spoolName: spoolName,
        sectionID: sectionID!,
        instances: [serializeSaveSpool(response.newElement) as ISpoolCanvas],
      });
      updateSiteProps({
        ...myStateRef.current,
        buttonLoader: false,
        details: {
          type: "spool",
          data: undefined,
          active: response.newElement.spoolID,
          action: false,
        },
        modal: emptyModalProps,
      });
    });
  };

  const createExistingSpool = async (spoolID: string) => {
    const settings = setOptionAddSpoolInstance(
      siteProps.modal,
      projectID!,
      sectionID!,
      spoolID,
      parseInt(pageNumberRef.current as string),
      orgID,
    );

    await apiCall("projects/addSpoolInstance", settings, (response: any) => {
      addSpoolInstance({
        spoolID: spoolID,
        instance: response.newInstance,
      });
      updateSiteProps({
        ...myStateRef.current,
        buttonLoader: false,
        details: {
          type: "spool",
          data: undefined,
          active: response.newInstance.spoolID,
          action: false,
        },
        modal: emptyModalProps,
      });
    });
  };

  const createElement = async (
    element: IElementType | IAddtionalElements,
    mode?: string,
  ) => {
    const settings = isJoint(element)
      ? setOptionAddElement(
          element as IElementType,
          siteProps.modal,
          projectID!,
          sectionID!,
          parseInt(pageNumberRef.current as string),
          orgID,
          mode!,
        )
      : setOptionMapElement(element as IAddtionalElements, orgID, projectID!);

    await apiCall("projects/addElement", settings, (response: any) => {
      const newElement = response.newElement;
      const isReference =
        "sourceElementID" in element! && newElement !== undefined;

      if (isJoint(element)) {
        addElement(response.newElement);
      } else if (isReference) {
        addReference(response.newElement);
      } else {
        addMapElements(response.newElement);
      }
      updateSiteProps({
        ...myStateRef.current,
        buttonLoader: false,
        details: {
          type: newElement ? newElement.type : "",
          data: newElement,
          active: newElement.id,
          action: false,
        },
        modal: isJoint(element) ? emptyModalProps : myStateRef.current.modal,
      });
    });
  };

  const duplicateElement = (id: string) => {
    const element = generateDuplicateElement(
      id,
      elements,
      references,
      parseInt(pageNumberRef.current as string),
    );
    createElement(element, "duplicate");
  };

  //ToDo to update
  const toggleLockElement = async (
    id: string,
    lock: boolean,
    isMapElement: boolean,
  ) => {
    await apiCall(
      "projects/toggleLockElement",
      {
        userID: uid,
        projectID: projectID,
        sectionID: sectionID,
        elementID: id,
        lock: lock,
        mapElement: isMapElement,
      },
      (response: any) => {
        updateSiteProps({
          ...myStateRef.current,
          //ToDo to update
          // elements: toggleElementLock(elements, id, lock),
        });
      },
    );
  };

  //ToDo sprawdizc elementID i wyrporostowac ta fukncje
  const saveElement = async (
    element: IElementType | IAddtionalElements,
    isSource: boolean,
  ) => {
    const isReference =
      "sourceElementID" in element! && element.sourceElementID !== undefined;

    if (isReference) {
      if (isSource) {
        const sourceElement = getElement(
          element.sourceElementID as string,
          elements,
        );
        const sourceOptions = setOptionsSaveSourceElement(
          element as IElementType,
          sourceElement,
          orgID!,
          projectID!,
        );
        await apiCall(
          "projects/saveElement",
          sourceOptions,
          (response: any) => {
            updateElement(element);
            updateSiteProps({
              ...myStateRef.current,
              buttonLoader: false,
              details: {
                type: element.type,
                data: element,
                active: element.id,
                action: false,
              },
            });
          },
        );
      } else {
        const referenceOptions = setOptionsSaveReferencElement(
          element as IReferenceElement,
          uid!,
          projectID!,
        );
        await apiCall(
          "projects/saveReference",
          referenceOptions,
          (response: any) => {
            updateReference(element as IReferenceElement);
            updateSiteProps({
              ...myStateRef.current,
              buttonLoader: false,
              details: {
                type: element.type,
                data: element,
                active: element.id,
                action: false,
              },
            });
          },
        );
      }
    } else {
      const options = isJoint(element)
        ? setOptionsSaveElement(element as IElementType, orgID, projectID!)
        : setOptionMapElement(element as IAddtionalElements, orgID, projectID!);
      await apiCall("projects/saveElement", options, (response: any) => {
        isJoint(element)
          ? updateElement(element as IElementType)
          : updateMapElements(element as IAddtionalElements);
      });
      updateSiteProps({
        ...myStateRef.current,
        buttonLoader: false,
        details: {
          ...myStateRef.current.details,
          data: element,
        },
        modal: {
          ...emptyModalProps,
        },
      });
    }
  };

  const saveSpoolChanges = async (spool: ISpoolCanvas) => {
    const options = setOptionsSaveSpool(spool, orgID, projectID!);
    await apiCall("projects/saveSpool", options, (response: any) => {
      const instance = { ...options.spool };
      instance.instanceID = spool.instanceID;
      updateSpool({
        spoolID: options.spoolID,
        instanceID: spool.instanceID,
        instance: instance as ISpoolCanvas,
      });
    });

    updateSiteProps({
      ...myStateRef.current,
      buttonLoader: false,
      details: {
        ...myStateRef.current.details,
        data: undefined,
      },
      modal: {
        ...emptyModalProps,
      },
    });
  };
  const updateSpoolDetails = async (
    spool: Record<string, string | number | undefined>,
    spoolID: string,
  ) => {
    const options = {
      spool,
      orgID,
      projectID,
      spoolID,
    };
    await apiCall("projects/updateSpool", options, (response: any) => {
      const instance = { ...options.spool };
      instance.instanceID = spool.instanceID;
      updateDetailsSpool({
        spoolID,
        spool,
      });
      hideSpoolDetailsModal();
    });
  };

  const deleteElement = async (
    id: string,
    isMapElement: boolean,
    isReference: boolean,
  ) => {
    await apiCall(
      "projects/removeElement",
      {
        orgID: orgID,
        projectID: projectID,
        elementID: id,
        mapElement: isMapElement,
        isReference: isReference,
      },
      (response: any) => {
        if (isMapElement) {
          removeMapElements(id);
        } else if (isReference) {
          removeReference(id);
        } else {
          if (ifHaveReferences(id, references)) {
            clearReferences(id);
          }
          removeElement(id);
        }
        updateSiteProps(updateStateRemoveElement(myStateRef.current, id));
      },
    );
  };

  const deleteSection = async (id: string) => {
    await apiCall(
      "projects/removeSection",
      {
        orgID: orgID,
        projectID: projectID,
        sectionID: id,
        fileName: myStateRef.current.fileDBName,
      },
      (response: any) => {
        removeSection(id);
        navigate(`/project/${projectID}`);
      },
    );
  };

  const deleteSpool = async (instanceID: string) => {
    const spoolID =
      spools.find((_spool) =>
        _spool.instances
          .map((_instance) => _instance.instanceID)
          .includes(instanceID),
      )?.spoolID || "";
    await apiCall(
      "projects/removeSpoolInstance",
      {
        orgID: orgID,
        projectID: projectID,
        spoolID: spoolID,
        instanceID: instanceID,
      },
      (response: any) => {
        removeSpoolInstance({ instanceID, spoolID });
        hideSpoolDeleteModal();
      },
    );
  };

  const onSubmitEditSection = (
    newData: Record<string, string | number | undefined | File | boolean>,
  ) => {
    // updateSiteProps({
    //   ...myStateRef.current,
    //   name: newData.sectionName,
    //   kks: newData.kks,
    // });

    toggleEditSectionModal(false);
  };

  const onSubmitNewRevision = async (fileUpdate: TScopesType) => {
    const fileUrl = await getFileUrl(
      `${orgID}/${projectID}/${fileUpdate.file}`,
    );
    const loadingTask = await pdfjs.getDocument(fileUrl);
    const pdf = await loadingTask.promise;

    updateSection(fileUpdate);
    updateSiteProps({
      ...myStateRef.current,
      file: pdf,
      fileUrl: fileUrl,
      fileName: fileUpdate.fileName as string,
      fileDBName: fileUpdate.file as string,
      revision: fileUpdate.revision as number,
      loading: false,
    });

    toggleNewRevision(false);
  };
  const updateScale = (direction: string) => {
    updateSiteProps({
      ...myStateRef.current,
      scaleDirection: direction,
    });
  };

  const setScale = (scale: number) => {
    updateSiteProps({
      ...myStateRef.current,
      scaleDirection: "none",
      scale: scale,
    });
  };

  const exportAction = () => {
    showExportModal();
  };
  const handleExport = () => {
    if (activeTab === "map") {
      pdfMapGenerator(
        myStateRef.current.fileUrl,
        myStateRef.current.fileName,
        getPointsForList(elements, sectionID!, references, true),
        mapElements,
        spools,
        sectionID as string,
      );
    } else {
      xlsxListGenrator(
        getPointsForListWithKKS(
          elements,
          sectionID!,
          references,
          sections,
          projectID!,
          projects,
          contracts,
        ),
        setHeaders(getConfig(configs, Scopes.ListSection), "export"),
        projectName,
        sections,
      );
    }
    hideExportModal();
  };
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (
        !myStateRef.current.modal.show &&
        !myStateRef.current.export.show &&
        !myStateRef.current.delete.show &&
        !myStateRef.current.deleteSection.show &&
        !myStateRef.current.spoolDetails.show &&
        !myStateRef.current.spoolDelete.show &&
        !newRevision
      ) {
        if (e.key === "Escape") {
          e.stopPropagation();
          hideDetails();
        } else if (e.key === "r" || e.key === "R") {
          if (e.shiftKey) {
            e.preventDefault();
            clearReferalPoint();
          }
        }
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  if (siteProps.loading) {
    return (
      <ContentFull>
        <LoadingContent />
      </ContentFull>
    );
  }
  return (
    <Content>
      <Card
        handleClick={exportAction}
        componentHeight={"calc(100vh - 4rem)"}
        noVerticalPadding={true}
        customHeader={
          <SectionHeader
            title={projectName}
            sectionTitle={myStateRef.current.name}
            revision={myStateRef.current.revision}
            handleBack={() => navigate(`/project/${projectID}`)}
            actionLabel={t(dictionary.export)}
            handleClick={exportAction}
            activeTab={activeTab}
            handleEditSection={() => toggleEditSectionModal(true)}
            handleNewRevision={() => toggleNewRevision(true)}
          />
        }
        shadow={false}
      >
        {myStateRef.current.modal.show && (
          <PointModal
            isOpen={myStateRef.current.modal.show}
            handleCancel={hideElementModal}
            handleSave={saveElement}
            handleDelete={deleteElement}
            handleAdd={createElement}
            handleAddReference={addReferenceElement}
            handleAddSpool={createSpool}
            handleAddSpoolReference={createExistingSpool}
            elementID={siteProps.details.active}
            element={getJointDefinition(
              getConfig(configs, Scopes.JointDetail),
              siteProps.modal.data as IJointType,
            )}
            modalMode={siteProps.modal.mode}
            loading={siteProps.buttonLoader}
            setLoading={setLoading}
            predefineName={
              siteProps.modal.mode === "add"
                ? setNewPointName(
                    elements,
                    sectionID as string,
                    myStateRef.current.referal ?? myStateRef.current.referal,
                  )
                : ""
            }
            sectionID={sectionID!}
            elementTypeMode={siteProps.activePanelTab}
          />
        )}
        {myStateRef.current.spoolDetails.show && (
          <EditSpoolModal
            isOpen={myStateRef.current.spoolDetails.show}
            handleClose={hideSpoolDetailsModal}
            spoolID={myStateRef.current.spoolDetails.spoolID}
            handleUpdateSpoolDetails={updateSpoolDetails}
          />
        )}
        <>
          <SectionModals
            siteProps={myStateRef.current}
            deleteSection={deleteSection}
            hideDeleteModal={hideDeleteModal}
            deleteElement={deleteElement}
            hideDeleteSectionModal={hideDeleteSectionModal}
            hideSpoolDeleteModal={hideSpoolDeleteModal}
            deleteSpool={deleteSpool}
          />
          {myStateRef.current.export.show && (
            <ExportModal
              handleCancel={hideExportModal}
              handleConfirm={handleExport}
              weldmap={activeTab === "map"}
              sectionLevel={true}
              name={myStateRef.current.name}
              isOpen={myStateRef.current.export.show}
            />
          )}
          <ContentWrapper componentHeight="calc(100vh - 9.6rem)">
            <Aligment align="stretch" direction="row">
              <Aligment
                direction="column"
                width={activeTab === "map" ? "calc( 100% - 240px)" : "100%"}
                justify="flex-start"
              >
                <MapHeader
                  activeTab={activeTab}
                  pageCount={myStateRef.current.file!.numPages}
                  scale={myStateRef.current.scale}
                  setActiveTab={tabActionClick}
                  activePage={getPageNumber()}
                  resetSelection={resetSelection}
                  updateScale={updateScale}
                />
                {editSectionModal && (
                  <EditSectionModal
                    onClose={() => toggleEditSectionModal(false)}
                    sectionID={sectionID!}
                    projectID={projectID!}
                    show={editSectionModal}
                  />
                )}
                {newRevision && (
                  <AddRevisionModal
                    onClose={() => toggleNewRevision(false)}
                    onConfirm={onSubmitNewRevision}
                    dataSet={{
                      sectionID: sectionID!,
                      projectID: projectID!,
                      revision: myStateRef.current.revision,
                      oldFileName: myStateRef.current.fileDBName,
                      file: undefined,
                      show: true,
                    }}
                    isOpen={newRevision}
                  />
                )}

                {activeTab === "map" && (
                  <Aligment align="stretch">
                    <PdfReader
                      pdf={myStateRef.current.file!}
                      pageNumber={getPageNumber()}
                      addElementAction={addPoint}
                      addMapElement={createMapElement}
                      points={getPoints(
                        elements,
                        references,
                        sectionID!,
                        getPageNumber(),
                      )}
                      spools={getSpoolsForCanvas(
                        spools,
                        sectionID!,
                        getPageNumber(),
                      )}
                      hideDetails={hideDetails}
                      mapElements={getMapElementForPage(
                        mapElements,
                        getPageNumber(),
                        sectionID!,
                      )}
                      activeItem={myStateRef.current.details.active}
                      showDetails={showDetails}
                      showSpoolDetails={showSpoolDetails}
                      saveChanges={saveElement}
                      saveSpoolChanges={saveSpoolChanges}
                      drawMode={myStateRef.current.drawMode}
                      editMode={myStateRef.current.editMode}
                      setScale={setScale}
                      scaleDirection={myStateRef.current.scaleDirection}
                      handleShortcut={handleShortcut}
                      action={myStateRef.current.details.action}
                      setAction={setAction}
                      cancelAction={cancelAction}
                      focused={myStateRef.current.focused}
                      updateScale={updateScale}
                      inputFocused={myStateRef.current.inputFocused}
                    />
                  </Aligment>
                )}
                {activeTab === "list" && (
                  <ItemList
                    showJointWeld={showJointWeld}
                    toogleShowJointWeld={toogleShowJointWeld}
                  />
                )}
              </Aligment>
              {activeTab === "map" && (
                <ItemDetailPanel
                  selectMode={setMode}
                  setActivePanelTab={setActivePanelTab}
                  activeTab={myStateRef.current.activePanelTab}
                  element={getDeatilsData(
                    myStateRef.current.details.type,
                    getConfig(configs, Scopes.JointDetail),
                    myStateRef.current.details.data,
                  )}
                  drawMode={myStateRef.current.drawMode}
                  type={myStateRef.current.details.type}
                  handleEdit={showEditModal}
                  handleSpoolEdit={showSpoolEditModal}
                  handleDuplicate={duplicateElement}
                  handelSetReference={setReferalPoint}
                  handleRemove={showDeleteModal}
                  handleSpoolRemove={showDeleteSpoolModal}
                  handleLockChange={toggleLockElement}
                  handleSaveChanges={saveElement}
                  editMode={myStateRef.current.editMode}
                  additional={mapElements}
                  showDetails={showDetails}
                  showSpoolDetails={showSpoolDetails}
                  readOnly={myStateRef.current.details.action}
                  active={myStateRef.current.details.active}
                  page={getPageNumber()}
                  sectionID={sectionID!}
                  deselect={hideDetails}
                  handleShowFocusedItem={handleShowFocusedItem}
                  referal={myStateRef.current.referal}
                  setReferal={setReferalPoint}
                  handleFieldFocus={setInputFocused}
                  handleFieldBlur={setBlurInput}
                />
              )}
            </Aligment>
          </ContentWrapper>
        </>
      </Card>
    </Content>
  );
};

export default Section;