import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Text, Image, useProductContext } from '@forge/react';
import { requestJira } from '@forge/bridge';
const convertIconUrl = (iconUrl, siteUrl) => {
  const match = iconUrl.match(/https:\/\/api\.atlassian\.com\/ex\/jira\/[^/]+(\/.*)/);
  if (!match) return iconUrl;
  return `${siteUrl}${match[1]}`;
};
const getIssueDetails = async (issueKey) => {
  const response = await requestJira(`/rest/api/3/issue/${issueKey}`);
  const data = await response.json();
  return {
    key: data.key,
    summary: data.fields.summary,
    iconUrl: data.fields.issuetype.iconUrl,
  };
};
const App = () => {
  const [data, setData] = useState(null);
  const context = useProductContext();
  useEffect(() => {
    if (!context) return;
    const issueKey = context.extension.issue.key;
    const siteUrl = context.siteUrl;
    getIssueDetails(issueKey).then((issue) => {
      setData({ ...issue, iconUrl: convertIconUrl(issue.iconUrl, siteUrl) });
    });
  }, [context]);
  return (
    <>
      {data ? (
        <>
          <Image src={data.iconUrl} alt={`${data.key} issue type icon`} />
          <Text>{data.key}</Text>
          <Text>{data.summary}</Text>
        </>
      ) : (
        <Text>Loading...</Text>
      )}
    </>
  );
};