import React from 'react'

import envConfig from '~/utils/env-config'

const GIT_OPS_FILES = [
  'meta.yaml',
  'tidb.toml',
  'pd.toml',
  'tikv.toml',
  'tiflash.toml',
  'ticdc.toml',
  'lightning.toml',
  'backup.yaml',
  'restore.yaml'
]

function newFileLink(
  file: string,
  branch: string,
  orgId: string,
  clusterId: string,
  orgName: string
) {
  const url = `https://github.com/tidbcloud/tidb-configuration/new/${branch}/tenants/tenant-${orgId}/clusters/cluster-${clusterId}/?filename=${file}&value=`
  let text = `# ${orgName}`
  if (file === 'meta.yaml') {
    text += '\nupdatePolicy: Dryrun'
  }
  return url + encodeURIComponent(text)
}

function editFileLink(
  file: string,
  branch: string,
  orgId: string,
  clusterId: string
) {
  return `https://github.com/tidbcloud/tidb-configuration/edit/${branch}/tenants/tenant-${orgId}/clusters/cluster-${clusterId}/${file}`
}

interface GitOPSModalProps {
  orgId: string
  orgName: string
  clusterId: string
}

export const GitOPSModalBody: React.FC<GitOPSModalProps> = ({
  orgId,
  orgName,
  clusterId
}) => {
  const branch = envConfig.clusterGitOPSBranch

  return (
    <div>
      {GIT_OPS_FILES.map((f) => (
        <div key={f} className='flex gap-2'>
          <span className='flex-1'>{f}</span>
          <a
            target='_blank'
            href={newFileLink(f, branch, orgId, clusterId, orgName)}
          >
            Add
          </a>
          <a target='_blank' href={editFileLink(f, branch, orgId, clusterId)}>
            Edit
          </a>
        </div>
      ))}
    </div>
  )
}