import { ReloadOutlined } from '@ant-design/icons'
import { Button, Divider, Form, Modal } from 'antd'
import { FormInstance } from 'antd/es/form/Form'
import TextArea from 'antd/es/input/TextArea'
import moment from 'moment'
import React, { CSSProperties, useCallback, useEffect, useState } from 'react'
import { Link, useHistory, useParams } from 'react-router-dom'

import {
  auditControllerListChangeAuditLog,
  releaseControllerGetChange,
  releaseControllerUpdateChange
} from 'apiClient/services/devops'
import { AuditAuditLog } from 'apiClient/services/devops/interface'

import { formatTickets } from './CreateChange'
import ChangeForm from './Forms/ChangeForm'
// Layout & Css

const boldDividerStyle = { borderTopWidth: '3px', borderColor: 'black' }
const layout = { labelCol: { span: 4 }, wrapperCol: { span: 16 } }

export const DeploymentDetail = () => {
  const { change_id, release_id } = useParams<{
    change_id: string
    release_id: string
  }>()

  const history = useHistory()

  const [canEdit, setCanEdit] = useState(false)

  const [reload, setReload] = useState(false)

  const [deploymentDetailForm] = Form.useForm()

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

  async function fetch() {
    try {
      const data = (
        await releaseControllerGetChange(parseInt(change_id), {
          with_detail: true,
          with_change_items: true,
          with_release: true,
          with_applicant: true,
          with_application: true,
          with_tickets: true
        })
      ).data
      deploymentDetailForm.setFieldsValue({
        // ...data.change,
        application_name: data.change?.application_id,
        name: data.change?.name,
        release_name: data.change?.release?.name,
        applicant: data.change?.applicant_email,
        window_range: [
          moment.unix(data.change?.window_start_at || 0),
          moment.unix(data.change?.window_end_at || 0)
        ],
        risk_level: data.change?.risk_level,
        tier: data.change?.tier,
        need_outage: data.change?.detail?.need_outage,
        staging_test_report: data.change?.detail?.staging_test_report,
        rollback_plan: data.change?.detail?.rollback_plan,
        note: data.change?.detail?.note,
        change_item_names: data.change?.change_item_names,
        dmTickets: formatTickets(data.release_tickets),
        deployments: data.change?.deployments?.map((origin) => {
          return {
            order: origin.order,
            deploy_method: origin.method,
            deploy_cd_link: origin.info?.argocd?.deploy_prs
              ? origin.info?.argocd?.deploy_prs[0].link
              : undefined,
            deploy_description: origin.info?.description,
            regions: origin.regions
          }
        }),
        type: data.change?.type,
        is_draft: data.change?.status === 'draft'
      })
      setCanEdit(
        data.change?.status === 'created' ||
          data.change?.status === 'approving' ||
          data.change?.status === 'withdrawn' ||
          data.change?.status === 'wait_for_deploy' ||
          data.change?.status === 'draft'
      )
    } catch (e) {
      console.error(e)
    }
  }

  const handleSubmit = useCallback(async (payload: FormInstance) => {
    const val = deploymentDetailForm.getFieldValue([])
    const body = {
      ...val,
      window_start_at: deploymentDetailForm
        .getFieldValue(['window_range'])[0]
        .unix(),
      window_end_at: deploymentDetailForm
        .getFieldValue(['window_range'])[1]
        .unix()
    }

    Modal.info({
      title: 'Info',
      closable: true,
      content: (
        <div>
          <p>{'sure to update this change?'}</p>
        </div>
      ),
      okText: 'Confirm',
      async onOk() {
        try {
          await releaseControllerUpdateChange(parseInt(change_id), body)
          Modal.success({
            title: 'Info',
            content: (
              <div>
                <p>Change has been updated</p>
              </div>
            ),
            onOk() {
              history.push(`/release/${release_id}/change/${change_id}`)
            }
          })
          setReload((pre) => !pre)
        } catch (error) {
          Modal.error({
            title: error.response.data.errcode,
            content: error.response.data.errmsg
          })
        }
      }
    })
  }, [])

  return (
    <Form
      {...layout}
      form={deploymentDetailForm}
      name="deployment_detail"
      onFinish={handleSubmit}
    >
      <div
        className="flex-container"
        style={{ justifyContent: 'flex-end', display: 'flex' }}
      >
        Operations: &nbsp;
        <Button type="primary" htmlType="submit" disabled={!canEdit}>
          Update
        </Button>
        &nbsp;
        <Button
          type="primary"
          icon={<ReloadOutlined />}
          onClick={() => {
            setReload((pre) => !pre)
            Modal.success({
              title: 'info',
              content: (
                <div>
                  <p>Successfully Reload</p>
                </div>
              )
            })
          }}
        >
          Reload
        </Button>
      </div>

      <Divider style={boldDividerStyle}>Basic Info</Divider>
      <ChangeForm
        form={deploymentDetailForm}
        create={false}
        applicationOps={[
          {
            label: deploymentDetailForm.getFieldValue(['application']),
            value: deploymentDetailForm.getFieldValue(['application'])
          }
        ]}
        handleChangeApplication={(_: string) => {
          return
        }}
        email={deploymentDetailForm.getFieldValue(['applicant_email'])}
        dmTickets={deploymentDetailForm.getFieldValue(['dmTickets'])}
      ></ChangeForm>
    </Form>
  )
}

export default DeploymentDetail