import { Form, Button, Typography } from 'antd'
import { useState } from 'react'

import {
  EntityRemediationTicket,
  EntityRemediationTicketPhase
} from 'apiClient/services/devops/interface'

// Phase 0: Created
const CreatedForm = function () {
  const [submitLoading, setSubmitLoading] = useState<boolean>(false)
  const [rejectLoading, setRejectLoading] = useState<boolean>(false)
  return (
    <Form>
      <Form.Item></Form.Item>
      <Form.Item>
        <Button loading={submitLoading} type="primary" htmlType="submit">
          Approve and Submit
        </Button>
      </Form.Item>
      <Form.Item>
        <Button loading={rejectLoading} danger>
          Reject
        </Button>
      </Form.Item>
    </Form>
  )
}

// Phase 1: Region TSE Leader
const RegionTSELeaderForm = function () {
  const [submitLoading, setSubmitLoading] = useState<boolean>(false)
  const [rejectLoading, setRejectLoading] = useState<boolean>(false)
  return (
    <Form>
      <Form.Item></Form.Item>
      <Form.Item>
        <Button loading={submitLoading} type="primary" htmlType="submit">
          Approve and Submit
        </Button>
      </Form.Item>
      <Form.Item>
        <Button loading={rejectLoading} danger>
          Reject
        </Button>
      </Form.Item>
    </Form>
  )
}

// Phase 2: EG SLA Owner
const RDGSLAOwnerForm = function () {
  const [submitLoading, setSubmitLoading] = useState<boolean>(false)
  const [rejectLoading, setRejectLoading] = useState<boolean>(false)
  return (
    <Form>
      <Form.Item></Form.Item>
      <Form.Item>
        <Button loading={submitLoading} type="primary" htmlType="submit">
          Approve and Submit
        </Button>
      </Form.Item>
      <Form.Item>
        <Button loading={rejectLoading} danger>
          Reject
        </Button>
      </Form.Item>
    </Form>
  )
}

// Phase 3: EG Decision Maker
const RDGFinalDecisionMakerForm = function () {
  const [submitLoading, setSubmitLoading] = useState<boolean>(false)
  const [rejectLoading, setRejectLoading] = useState<boolean>(false)
  return (
    <Form>
      <Form.Item></Form.Item>
      <Form.Item>
        <Button loading={submitLoading} type="primary" htmlType="submit">
          Approve and Submit
        </Button>
      </Form.Item>
      <Form.Item>
        <Button loading={rejectLoading} danger>
          Reject
        </Button>
      </Form.Item>
    </Form>
  )
}

// Phase 4: Global Deal Desk
const GlobalDealDeskForm = function () {
  const [submitLoading, setSubmitLoading] = useState<boolean>(false)
  const [rejectLoading, setRejectLoading] = useState<boolean>(false)
  return (
    <Form>
      <Form.Item></Form.Item>
      <Form.Item>
        <Button loading={submitLoading} type="primary" htmlType="submit">
          Approve and Submit
        </Button>
      </Form.Item>
      <Form.Item>
        <Button loading={rejectLoading} danger>
          Reject
        </Button>
      </Form.Item>
    </Form>
  )
}

// Phase 5: Regional GM
const RegionalGMForm = function () {
  const [submitLoading, setSubmitLoading] = useState<boolean>(false)
  const [rejectLoading, setRejectLoading] = useState<boolean>(false)
  return (
    <Form>
      <Form.Item></Form.Item>
      <Form.Item>
        <Button loading={submitLoading} type="primary" htmlType="submit">
          Approve and Submit
        </Button>
      </Form.Item>
      <Form.Item>
        <Button loading={rejectLoading} danger>
          Reject
        </Button>
      </Form.Item>
    </Form>
  )
}

// Phase 6: Commercial Operation
const CommercialOperationForm = function () {
  const [submitLoading, setSubmitLoading] = useState<boolean>(false)
  const [rejectLoading, setRejectLoading] = useState<boolean>(false)
  return (
    <Form>
      <Form.Item></Form.Item>
      <Form.Item>
        <Button loading={submitLoading} type="primary" htmlType="submit">
          Approve and Submit
        </Button>
      </Form.Item>
      <Form.Item>
        <Button loading={rejectLoading} danger>
          Reject
        </Button>
      </Form.Item>
    </Form>
  )
}

const formMap: { [key: number]: () => JSX.Element } = {
  0: CreatedForm,
  1: RegionTSELeaderForm,
  2: RDGSLAOwnerForm,
  3: RDGFinalDecisionMakerForm,
  4: GlobalDealDeskForm,
  5: RegionalGMForm,
  6: CommercialOperationForm
}

const titleMap: { [key: number]: string } = {
  0: 'Phase: Created',
  1: 'Phase: Region TSE Leader',
  2: 'Phase: EG SLA Owner',
  3: 'Phase: Global Deal Desk',
  4: 'Phase: EG Decision Maker',
  5: 'Phase: Regional GM',
  6: 'Phase: Commercial Operation'
}

const PhaseForm = function ({
  phase,
  ticket,
  reload
}: {
  phase: EntityRemediationTicketPhase
  ticket: EntityRemediationTicket
  reload: Function
}) {
  const title = titleMap[Number(phase)]
  const PForm = formMap[Number(phase)]
  if (title)
    return (
      <>
        <Typography.Title level={2}>{title}</Typography.Title>
        <PForm />
      </>
    )
  else return <></>
}

export default PhaseForm