import { observer } from "mobx-react";
// buzzwareTech imports
import type { TIssueIdentifierProps, TIssueTypeIdentifier } from "@buzzwaretech/types";
// hooks
import { IdentifierText } from "@/components/issues/issue-detail/identifier-text";
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
import { useProject } from "@/hooks/store/use-project";

export const IssueIdentifier = observer(function IssueIdentifier(
  props: TIssueIdentifierProps,
) {
  const {
    projectId,
    variant,
    size,
    displayProperties,
    enableClickToCopyIdentifier = false,
  } = props;
  // store hooks
  const { getProjectIdentifierById } = useProject();
  const {
    issue: { getIssueById },
  } = useIssueDetail();
  // Determine if the component is using store data or not
  const isUsingStoreData = "issueId" in props;
  // derived values
  const issue = isUsingStoreData ? getIssueById(props.issueId) : null;
  const projectIdentifier = isUsingStoreData
    ? getProjectIdentifierById(projectId)
    : props.projectIdentifier;
  const issueSequenceId = isUsingStoreData
    ? issue?.sequence_id
    : props.issueSequenceId;
  const shouldRenderIssueID = displayProperties ? displayProperties.key : true;

  if (!shouldRenderIssueID) return null;

  return (
    <div className="flex shrink-0 items-center space-x-2">
      <IdentifierText
        identifier={`${projectIdentifier}-${issueSequenceId}`}
        enableClickToCopyIdentifier={enableClickToCopyIdentifier}
        variant={variant}
        size={size}
      />
    </div>
  );
});

export const IssueTypeIdentifier = observer(function IssueTypeIdentifier(
  _props: TIssueTypeIdentifier,
) {
  return <></>;
});