import { FC } from "react";
import { Icon } from "venice-ui";
import { Colors } from "../../untils/Theme";
import { DetailPanelWrapperFooter } from "./ItemDetailsPanel.styles";
import { IElementType } from "../../definitions/element";
import { IAddtionalElements } from "../../definitions/additional";
import { isJoint } from "../Section/sectionModel";
import { dictionary } from "../../untils/dictionary";
import { t } from "../../helpers/userHelper";
import { useStoreState } from "../../store";

interface IDetailPanelFooterProps {
  type: string;
  element?: IElementType | IAddtionalElements;
  active: string;
  handleSpoolEdit: (id: string) => void;
  handleEdit: (id: string, isReference: boolean) => void;
  handleDuplicate: (element: IElementType) => void;
  handleReference: (element: IElementType) => void;
  handleRemove: (id: string) => void;
  handleLock: (id: string) => void;
  handleSpoolRemove: (id: string) => void;
}
export const DetailPanelFooter: FC<IDetailPanelFooterProps> = ({
  type,
  element,
  active,
  handleSpoolEdit,
  handleEdit,
  handleDuplicate,
  handleReference,
  handleRemove,
  handleLock,
  handleSpoolRemove,
}) => {
  const { orgRole } = useStoreState((state) => state.user.userDetails);
  const showEditButton = () => {
    if ((element && isJoint(element)) || type === "spool") {
      return true;
    } else {
      return false;
    }
  };

  const showDuplicateButton = () => {
    if (element && isJoint(element)) {
      return true;
    } else {
      return false;
    }
  };
  const showReferenceButton = () => {
    if (element && isJoint(element)) {
      return true;
    } else {
      return false;
    }
  };
  const showLockButton = () => {
    return false;
  };

  const editAction = () => {
    if (element && isJoint(element)) {
      handleEdit(
        element.id,
        "sourceElementID" in element! && element.sourceElementID !== undefined
      );
    } else if (type === "spool") {
      handleSpoolEdit(active);
    }
  };
  const duplicateAction = () => {
    if (element && isJoint(element)) {
      handleDuplicate(element as IElementType);
    }
  };
  const referenceAction = () => {
    if (element && isJoint(element)) {
      handleReference(element as IElementType);
    }
  };

  const deleteAction = () => {
    if (element) {
      handleRemove(element.id);
    } else if (type === "spool") {
      handleSpoolRemove(active);
    }
  };
  const lockAction = () => {
    if (element && isJoint(element)) {
      handleLock(element.id);
    }
  };
  

  return (
    <DetailPanelWrapperFooter
      id="footer"
      isSingle={!!(element && !isJoint(element)) && type !== "spool"}
    >
      {showEditButton() && (
        <Icon
          name="edit"
          size={'lg'}
          color={Colors.appBlue}
          hoverColor={Colors.seaBlue}
          onClick={editAction}
          hoverBackground="transparent"
          background="transparent"
          tooltip={t(dictionary.edit)}
          isDisabled={orgRole === "readOnly"}
        />
      )}
      {showDuplicateButton() && (
        <Icon
          name="duplicate"
          size={'lg'}
          color={Colors.appBlue}
          hoverColor={Colors.seaBlue}
          onClick={duplicateAction}
          hoverBackground="transparent"
          background="transparent"
          tooltip={t(dictionary.duplicate)} 
          isDisabled={orgRole === "readOnly"}
        />
      )}
      {showReferenceButton() && (
        <Icon
          name="reference"
          size={'lg'}
          color={Colors.appBlue}
          hoverColor={Colors.seaBlue}
          onClick={referenceAction}
          hoverBackground="transparent"
          background="transparent"
          tooltip={t(dictionary.setReference)}
          isDisabled={orgRole === "readOnly"}
        />
      )}
      {showLockButton() && (
        <Icon
          name="lock"
          size={'lg'}
          color={Colors.appBlue}
          hoverColor={Colors.seaBlue}
          onClick={lockAction}
          hoverBackground="transparent"
          background="transparent"
          isDisabled={orgRole === "readOnly"}
          tooltip={t(dictionary.lock)}
        />
      )}

      <Icon
        name="delete"
        size={'lg'}   
        onClick={deleteAction}
        color={Colors.appBlue}
        hoverColor={Colors.seaBlue}
        hoverBackground="transparent"
        background="transparent"
        tooltip={t(dictionary.delete)}
        isDisabled={orgRole === "readOnly"}
      />
    </DetailPanelWrapperFooter>
  );
};