import React, { FC, useEffect, useRef, useState } from "react";
import { Aligment } from "venice-ui";
import { IElementType } from "../../definitions/element";
import { ItemDetails } from "./ItemDetails";
import {
  DetailPanelContent,
  DetailPanelSectionContent,
  DetailPanelWrapper,
} from "./ItemDetailsPanel.styles";
import {
  IAddtionalElements,
  TAdditionalType,
} from "../../definitions/additional";
import { MapElementsList } from "./MapElementsList";
import { isJoint } from "../Section/sectionModel";
import { ElementDetails } from "./ElementDetails";
import { IJointType, getJointDetails } from "../../definitions/joint";
import { getConfig } from "../../definitionsNew/setFieldsHelper";
import { Scopes } from "../../definitionsNew/fields";
import { useStoreState } from "../../store";
import { SpoolDetails } from "./SpoolDetails";
import { getSpoolDetails } from "../../helpers/spoolHelpers";
import { DetailPanelFooter } from "./DetailsPanelFooter";
import { DetailsPanelHeader } from "./DetailsPanelHeader";
import { WeldsList } from "./WeldsList";
import { SpoolsList } from "./SpoolsList";

interface IItemDetailsPanelProps {
  element?: IElementType | IAddtionalElements;
  type?: string;
  handleEdit: (id: string, isReference: boolean) => void;
  handleSpoolEdit: (id: string) => void;
  handleDuplicate?: (id: string) => void;
  handelSetReference?: (id: string) => void;
  handleRemove: (id: string) => void;
  handleSpoolRemove: (id: string) => void;
  handleLockChange?: (id: string, lock: boolean, mapElement: boolean) => void;
  handleSaveChanges: (element: IAddtionalElements, isSource: boolean) => void;
  editMode: boolean;
  additional: IAddtionalElements[];
  showDetails: (
    id: string,
    isMapElement: boolean,
    isReference: boolean,
  ) => void;
  showSpoolDetails: (instanceID: string) => void;
  readOnly: boolean;
  active: string;
  page: number;
  sectionID: string;
  deselect: () => void;
  handleShowFocusedItem: (type: string, id?: string) => void;
  selectMode: (mode: TAdditionalType) => void;
  setActivePanelTab: (tab: string) => void;
  drawMode: TAdditionalType;
  referal?: string;
  setReferal: (value: string) => void;
  handleFieldFocus: (name: string) => void;
  handleFieldBlur: () => void;
  activeTab: string;
}

export const ItemDetailPanel: FC<IItemDetailsPanelProps> = ({
  element,
  type = "",
  editMode,
  handleEdit,
  handleSpoolEdit,
  handleDuplicate,
  handelSetReference,
  handleRemove,
  handleSpoolRemove,
  handleLockChange,
  handleSaveChanges,
  additional,
  showDetails,
  showSpoolDetails,
  readOnly,
  active,
  page,
  sectionID,
  deselect,
  handleShowFocusedItem,
  selectMode,
  setActivePanelTab,
  drawMode,
  referal,
  setReferal,
  handleFieldFocus,
  handleFieldBlur,
  activeTab,
}) => {
  const { configs } = useStoreState((state) => state.user.userDetails);
  const { projectDetails } = useStoreState((state) => state.projectDetails);
  const { spools, elements, references } = useStoreState(
    (state) => state.projectDetails.projectDetails,
  );
  const { projects } = useStoreState((state) => state.projects);

  const detailPanelRef = useRef<HTMLDivElement>(null);
  const [panelHeight, setPanelHeight] = useState(0);

  useEffect(() => {
    if (detailPanelRef.current) {
      setPanelHeight(detailPanelRef.current.offsetTop);
    }
  }, [panelHeight]);

  const toogleLock = (id: string) => {
    if (element?.id) {
      let lock = element.lock ? false : true;
      //ToDo dodać obsługę , bo narazie jest fals ena sztywno
      handleLockChange && handleLockChange(element.id, lock, false);
    }
  };
  const duplicatElement = (elementToDoplicate: IElementType) => {
    let id = elementToDoplicate.id;
    if (
      "sourceElementID" in elementToDoplicate! &&
      elementToDoplicate.sourceElementID !== undefined
    ) {
      id = elementToDoplicate.sourceElementID;
    }
    handleDuplicate && handleDuplicate(id);
  };

  const setReference = (elementToDoplicate: IElementType) => {
    let id = elementToDoplicate.id;
    if (
      "sourceElementID" in elementToDoplicate! &&
      elementToDoplicate.sourceElementID !== undefined
    ) {
      id = elementToDoplicate.sourceElementID;
    }
    handelSetReference && handelSetReference(id);
  };
  return (
    <DetailPanelWrapper
      id="detail_panel"
      ref={detailPanelRef}
      top={panelHeight}
    >
      <DetailPanelContent>
        <DetailsPanelHeader
          element={element}
          type={type}
          editMode={editMode}
          activeTab={activeTab}
          deselect={deselect}
          selectMode={selectMode}
          setActivePanelTab={setActivePanelTab}
          drawMode={drawMode}
          referal={referal}
          setReferal={setReferal}
        />
        <DetailPanelSectionContent>
          {/* lista spoin  */}
          {!editMode && !element && activeTab === "joints" && (
            <WeldsList
              showDetails={showDetails}
              sectionID={sectionID}
              showFocusedItem={handleShowFocusedItem}
            />
          )}
          {!editMode && type !== "spool" && activeTab === "spools" && (
            <SpoolsList
              showSpoolDetails={showSpoolDetails}
              sectionID={sectionID}
              showFocusedItem={handleShowFocusedItem}
            />
          )}

          {/* lista eleemntów */}
          {editMode && !element && (
            <MapElementsList
              additional={additional}
              showDetails={showDetails}
              sectionID={sectionID}
              showFocusedItem={handleShowFocusedItem}
            />
          )}

          {type === "spool" && (
            <Aligment direction="column" align="stretch" hPadding="16px">
              <SpoolDetails
                data={getSpoolDetails(
                  active,
                  spools,
                  elements,
                  sectionID,
                  page,
                )}
                showDetails={showDetails}
                showFocusedItem={handleShowFocusedItem}
              />
            </Aligment>
          )}

          {element && (
            <Aligment direction="column" align="stretch">
              {isJoint(element) ? (
                <ItemDetails
                  data={
                    getJointDetails(
                      element as IJointType,
                      getConfig(configs, Scopes.JointDetail),
                      projectDetails,
                      projects,
                      sectionID,
                    )!
                  }
                />
              ) : (
                <ElementDetails
                  element={element as IAddtionalElements}
                  saveChanges={handleSaveChanges}
                  readOnly={readOnly}
                  handleFieldFocus={handleFieldFocus}
                  handleFieldBlur={handleFieldBlur}
                />
              )}
            </Aligment>
          )}
        </DetailPanelSectionContent>
        {(element || type === "spool") && (
          <DetailPanelFooter
            active={active}
            type={type}
            element={element}
            handleSpoolEdit={handleSpoolEdit}
            handleEdit={handleEdit}
            handleDuplicate={duplicatElement}
            handleReference={setReference}
            handleRemove={handleRemove}
            handleLock={toogleLock}
            handleSpoolRemove={handleSpoolRemove}
          />
        )}
      </DetailPanelContent>
    </DetailPanelWrapper>
  );
};