import { FormInstance } from 'antd/es/form/Form'
import moment from 'moment'
import { MutableRefObject, useEffect, useState } from 'react'

import {
  applicationControllerListApplication,
  releaseControllerGetRelease,
  releaseControllerDefaultChange
} from 'apiClient/services/devops'
import {
  ReleaseDeployment,
  ReleaseReleaseTicket,
  ReleaseRiskLevel,
  ReleaseChangeTier
} from 'apiClient/services/devops/interface'

import { REGION_OPTIONS } from '../helper'

import ChangeForm from './Forms/ChangeForm'

export const deployMethodOptions = [
  { label: 'ArgoCD', value: 'argocd' },
  { label: 'Manual', value: 'manual' }
]

export const typeOptions = [
  { label: 'hotfix', value: 'hotfix' },
  { label: 'sprint', value: 'sprint' }
]

export type CreateChangeForm = {
  name: string
  window_range: moment.Moment[]
  tier: ReleaseChangeTier[]
  risk_level: ReleaseRiskLevel
  hotfix_reason?: string
  need_outage?: boolean
  note?: string
  rollback_plan?: string
  change_item_names?: string[]
  staging_test_report?: string
  deployments?: ReleaseDeployment[]
  application_name: string
  release_id?: number
}

export const formatTickets = (tickets: ReleaseReleaseTicket[] | undefined) => {
  return (tickets || []).map((value: ReleaseReleaseTicket) => {
    return {
      value: value.name || '',
      label: value.name + ' ' + value.status + ' ' + value.summary
    }
  })
}

const CreateChange = ({
  form,
  email,
  release_id
}: {
  email: string | undefined
  release_id: number
  form: FormInstance
}) => {
  const [application, setApplication] = useState<string>()
  const [dmTickets, setDMTickets] =
    useState<{ value: string; label: string }[]>()
  const [applicationOps, setApplicationOps] = useState<
    { label: string; value: string }[]
  >([])

  const changeApplication = (value: string) => {
    setApplication(value)
  }

  async function fetch() {
    try {
      if (application) {
        const data = (
          await releaseControllerDefaultChange({
            release_id: release_id,
            application_name: application
          })
        ).data

        if (data.window_start_at && data.window_end_at) {
          form.setFieldsValue({
            window_range: [
              moment.unix(data.window_start_at),
              moment.unix(data.window_end_at)
            ]
          })
        }
      }
    } catch (e) {
      console.error(e)
    }
  }

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

  useEffect(() => {
    async function fetchAppOps() {
      const resp = await applicationControllerListApplication()
      const appNames = resp.data.items?.map((a) => a.name!).sort() || []
      const appOps = appNames.map((a) => {
        return { label: a, value: a }
      })
      setApplicationOps(appOps)
      const releaseBaseInfo = (
        await releaseControllerGetRelease(release_id, { with_tickets: true })
      ).data
      form.setFieldsValue({ release_name: releaseBaseInfo.release?.name })
      setDMTickets(formatTickets(releaseBaseInfo.release?.tickets))
    }
    fetchAppOps()
  }, [])

  return (
    <ChangeForm
      create={true}
      applicationOps={applicationOps}
      handleChangeApplication={changeApplication}
      dmTickets={dmTickets}
      email={email}
      form={form}
    ></ChangeForm>
  )
}

export default CreateChange