import React, { useEffect, useState } from 'react'

import { operationControllerListInstances } from 'apiClient/services/devops'
import {
  OperationInstance,
  ReleaseChangeDeployEEAPI
} from 'apiClient/services/devops/interface'

type Props = {
  info: ReleaseChangeDeployEEAPI
  release_id: string
  change_id: string
}

const EEAPIDetail: React.FC<Props> = ({ info, release_id, change_id }) => {
  const [operations, setOperations] = useState<OperationInstance[]>([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    let cancelled = false

    async function fetchOperation() {
      setLoading(true)
      try {
        const res = await operationControllerListInstances({
          operation: 'UpdateNgGlobalComponentImage'
        })

        const op =
          res.data.items?.filter((item) =>
            item.params?.related_change_link?.includes(
              `/release/${release_id}/change/${change_id}`
            )
          ) ?? []

        if (!cancelled) {
          setOperations(op ?? null)
        }
      } finally {
        if (!cancelled) {
          setLoading(false)
        }
      }
    }

    fetchOperation()

    return () => {
      cancelled = true
    }
  }, [release_id, change_id])

  if (loading) {
    return <span>Loading...</span>
  }

  return (
    <div>
      pr_link:{' '}
      <a
        href={info.ee_api_build_ng_image?.prLink}
        target="_blank"
        rel="noreferrer"
      >
        {info.ee_api_build_ng_image?.prLink}
      </a>
      <br />
      branch: {info.ee_api_build_ng_image?.branch}
      <br />
      commit: {info.ee_api_build_ng_image?.commit}
      <br />
      repo: {info.ee_api_build_ng_image?.repo}
      <br />
      <br />
      Related Operations: <br></br>
      {operations.length > 0 ? (
        operations.map((op) => (
          <div key={op.id}>
            <a href={`/operations/${op.id}`} target="_blank" rel="noreferrer">
              ID: {op.id}
            </a>
            , Phase: {op.phase}
          </div>
        ))
      ) : (
        <span>No related operations found.</span>
      )}
    </div>
  )
}

export default EEAPIDetail