import React, { FC } from "react";
import {
  ADDITIONAL_TYPES,
  IAdditionalElements,
  IAddtionalElements,
} from "../../definitions/additional";
import { DotElement } from "./DotElement";
import { TriageElement } from "./TriageElement";
import { EdgeElement } from "./EdgeElement";
import { CloudElement } from "./CloudElement";

export const AdditionalElements: FC<IAdditionalElements> = ({
  element,
  scale,
  active,
  editMode,
  pdfHeight = 0,
  pdfWidth = 0,
  showDetails,
  saveChanges,
  handleShortcut,
  setAction,
  cancelAction,
  isAction,
  workspaceTop,
  workspaceLeft,
  focused,
  inputFocused
}) => {
  return (
    <>
      {element.type === ADDITIONAL_TYPES.dot && (
        <DotElement
          element={element}
          scale={scale}
          active={active}
          editMode={editMode}
          pdfHeight={pdfHeight}
          pdfWidth={pdfWidth}
          showDetails={showDetails}
          saveChanges={saveChanges}
          handleShortcut={handleShortcut}
          setAction={setAction}
          cancelAction={cancelAction}
          isAction={isAction}
          workspaceTop={workspaceTop}
          workspaceLeft={workspaceLeft}
          focused={focused}
          inputFocused={inputFocused}
        />
      )}
      {element.type === ADDITIONAL_TYPES.triage && (
        <TriageElement
          element={element}
          scale={scale}
          active={active}
          editMode={editMode}
          pdfHeight={pdfHeight}
          pdfWidth={pdfWidth}
          showDetails={showDetails}
          saveChanges={saveChanges}
          handleShortcut={handleShortcut}
          setAction={setAction}
          cancelAction={cancelAction}
          isAction={isAction}
          workspaceTop={workspaceTop}
          workspaceLeft={workspaceLeft}
          focused={focused}
          inputFocused={inputFocused}
        />
      )}
      {element.type === ADDITIONAL_TYPES.edge && (
        <EdgeElement
          element={element}
          scale={scale}
          active={active}
          editMode={editMode}
          pdfHeight={pdfHeight}
          pdfWidth={pdfWidth}
          showDetails={showDetails}
          saveChanges={saveChanges}
          handleShortcut={handleShortcut}
          setAction={setAction}
          cancelAction={cancelAction}
          isAction={isAction}
          workspaceTop={workspaceTop}
          workspaceLeft={workspaceLeft}
          focused={focused}
          inputFocused={inputFocused}
        />
      )}
      {element.type === ADDITIONAL_TYPES.cloud && (
        <CloudElement
          element={element}
          scale={scale}
          active={active}
          editMode={editMode}
          pdfHeight={pdfHeight}
          pdfWidth={pdfWidth}
          showDetails={showDetails}
          saveChanges={saveChanges}
          handleShortcut={handleShortcut}
          setAction={setAction}
          cancelAction={cancelAction}
          isAction={isAction}
          workspaceTop={workspaceTop}
          workspaceLeft={workspaceLeft}
          focused={focused}
          inputFocused={inputFocused}
        />
      )}
    </>
  );
};