import { copyUrlToClipboard, generateWorkItemLink } from "@buzzwaretech/utils";
import { observer } from "mobx-react";
import React, { useState } from "react";
// buzzwareTech imports
// helpers
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
import { useProject } from "@/hooks/store/use-project";

type TCreateIssueToastActionItems = {
  workspaceSlug: string;
  projectId: string;
  issueId: string;
  isEpic?: boolean;
};

export const CreateIssueToastActionItems = observer(
  function CreateIssueToastActionItems(props: TCreateIssueToastActionItems) {
    const { workspaceSlug, issueId, isEpic = false } = props;
    // state
    const [copied, setCopied] = useState(false);
    // store hooks
    const {
      issue: { getIssueById },
    } = useIssueDetail();
    const { getProjectIdentifierById } = useProject();

    // derived values
    const issue = getIssueById(issueId);
    const projectIdentifier = getProjectIdentifierById(issue?.project_id);

    if (!issue) return null;

    const workItemLink = generateWorkItemLink({
      workspaceSlug,
      projectId: issue?.project_id,
      issueId,
      projectIdentifier,
      sequenceId: issue?.sequence_id,
      isEpic,
    });

    const copyToClipboard = async (
      e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
    ) => {
      try {
        await copyUrlToClipboard(workItemLink);
        setCopied(true);
        setTimeout(() => setCopied(false), 3000);
      } catch (_error) {
        setCopied(false);
      }
      e.preventDefault();
      e.stopPropagation();
    };

    return (
      <div className="-ml-2 flex items-center gap-1 text-11 text-secondary">
        <a
          href={workItemLink}
          target="_blank"
          rel="noopener noreferrer"
          className="rounded-sm px-2 py-1 font-medium text-accent-primary hover:bg-surface-2"
        >
          {`View ${isEpic ? "epic" : "work item"}`}
        </a>

        {copied ? (
          <>
            <span className="cursor-default px-2 py-1 text-secondary">
              Copied!
            </span>
          </>
        ) : (
          <>
            <button
              className="hidden cursor-pointer rounded-sm px-2 py-1 text-tertiary group-hover:flex hover:bg-surface-2 hover:text-secondary"
              onClick={copyToClipboard}
            >
              Copy link
            </button>
          </>
        )}
      </div>
    );
  },
);