import { Button, Descriptions, Divider, FormInstance, Modal, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { useCallback, useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'

import {
  releaseControllerGetTicket,
  releaseControllerUpdateTicket
} from 'apiClient/services/devops'
import {
  GithubPullRequest,
  ReleaseGetTicketResp,
  ReleaseUpdateTicketReq
} from 'apiClient/services/devops/interface'
import ModalForm from 'components/ModalForm'

import { TICKET_URL } from '../helper'

import PRForm, { PRFormType } from './PRForm'

export const TicketDetail = () => {
  const { name } = useParams<{
    name: string
  }>()

  const [createForm, setCreateForm] = useState(false)
  const [ticket, setTicket] = useState<ReleaseGetTicketResp>()
  const [reload, setReload] = useState(false)

  useEffect(() => {
    fetch()
  }, [reload])

  async function fetch() {
    const data = (
      await releaseControllerGetTicket(name, { with_github_pr: true })
    ).data
    setTicket(data)
  }

  const handleCancel = useCallback(() => {
    setCreateForm(false)
    setReload((pre) => !pre)
  }, [])

  const createChange = () => {
    setCreateForm(true)
  }

  const renderFormFields = useCallback(
    (form: FormInstance) => {
      return <PRForm form={form} />
    },
    [createForm]
  )

  const handleCreate = useCallback(async (payload: PRFormType) => {
    const req: ReleaseUpdateTicketReq = {
      github_pr_locations: payload.prs.map((val) => {
        return val.location || ''
      })
    }
    try {
      await releaseControllerUpdateTicket(name, req)
      Modal.success({
        title: 'Info',
        content: (
          <div>
            <p>PRs have been updated for this ticket</p>
          </div>
        ),
        onOk() {}
      })
      setCreateForm(false)
      setReload((pre) => !pre)
    } catch (error) {
      Modal.error({
        title: error.response.data.errcode,
        content: error.response.data.errmsg
      })
    }
  }, [])

  const columns: ColumnsType<GithubPullRequest> = [
    {
      title: 'Name',
      render: (_: any, record) => {
        return (
          <div>
            <p>
              <a
                href={
                  'https://github.com/' +
                  record.owner +
                  '/' +
                  record.repo +
                  '/pull/' +
                  record.number
                }
                target="_blank"
                rel="noreferrer"
              >
                {record.location}
              </a>
            </p>
          </div>
        )
      }
    },
    {
      title: 'Title',
      render: (_: any, record) => {
        return record.title
      }
    },
    {
      title: 'Status',
      render: (_: any, record) => {
        return record.state
      }
    },
    {
      title: 'Developer',
      render: (_: any, record) => {
        return record.author
      }
    }
  ]

  return (
    <div>
      <Descriptions title="Ticket">
        <Descriptions.Item label="Name">
          <p>
            <a href={TICKET_URL() + name} target="_blank" rel="noreferrer">
              {name}
            </a>
          </p>
        </Descriptions.Item>
        <Descriptions.Item label="Release">
          {ticket?.ticket?.release_name}
        </Descriptions.Item>
        <Descriptions.Item label="Status">
          {ticket?.ticket?.status}
        </Descriptions.Item>
        <Descriptions.Item label="Summary">
          {ticket?.ticket?.summary}
        </Descriptions.Item>
      </Descriptions>
      <Divider></Divider>
      <div
        className="flex-container"
        style={{ justifyContent: 'flex-end', display: 'flex' }}
      >
        <Button type="primary" onClick={createChange}>
          Link PR
        </Button>
      </div>

      <Table<GithubPullRequest>
        columns={columns}
        rowKey="id"
        dataSource={ticket?.ticket?.github_prs}
        size="small"
        pagination={false}
      ></Table>
      <ModalForm<PRFormType>
        visible={!!createForm}
        name="modifyPR"
        title={'Modify PRs'}
        getFields={renderFormFields}
        onSubmit={handleCreate}
        onCancel={handleCancel}
        width={1000}
        initValues={{ prs: ticket?.ticket?.github_prs || [] }}
      />
    </div>
  )
}

export default TicketDetail