import { Button, FormInstance, Modal } from 'antd'
import { useCallback, useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'

import {
  addImpersonate,
  deleteImpersonate,
  getImpersonate
} from 'apiClient/services/devops'
import ModalForm from 'components/ModalForm'

import ImpersonateForm, { ImpersonateType } from '../Forms/ImpersonateForm'

export default function ImpersonateV2() {
  const [createForm, setCreateForm] = useState(false)

  const { org_id } = useParams<{
    org_id: string
  }>()

  const [reload, setReload] = useState(false)
  const [currImp, setCurrImp] = useState<string | undefined>('uninitialized')

  async function fetch() {
    const tenant = (await getImpersonate()).data.tenant_id
    setCurrImp(tenant)
  }

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

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

  const handleCreate = useCallback(async (payload: ImpersonateType) => {
    try {
      await addImpersonate({
        expire_at: payload.expire_at.unix(),
        tenant_id: payload.tenant_id,
        reason: payload.reason
      })
      Modal.success({
        title: 'Info',
        content: (
          <div>
            <p>
              Successfully Impersonated the tenant {payload.tenant_id}, please
              wait a minute to take effect.
            </p>
          </div>
        ),
        onOk() {}
      })
      setCreateForm(false)
      setReload((pre) => !pre)
    } catch (error) {
      Modal.error({
        title: error.response.data.errcode,
        content: error.response.data.errmsg
      })
      setReload((pre) => !pre)
    }
  }, [])

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

  const handleCancelImpersonate = () => {
    Modal.info({
      title: 'Info',
      closable: true,
      content: (
        <div>
          <p>Are you sure to cancel impersonate tenant {org_id}?</p>
        </div>
      ),
      okText: 'Confirm',
      async onOk() {
        try {
          await deleteImpersonate()
          Modal.success({
            title: 'Info',
            content: (
              <div>
                <p>
                  Cancel Impersonation for tenant <b>{org_id}</b> Successfully.
                </p>
              </div>
            ),
            onOk() {}
          })
          setReload((pre) => !pre)
        } catch (error) {
          Modal.error({
            title: error.response.data.errcode,
            content: error.response.data.errmsg
          })
          setReload((pre) => !pre)
        }
      }
    })
  }

  const handleOnClickImpersonate = () => {
    if (currImp) {
      Modal.info({
        title: 'Info',
        closable: true,
        content: (
          <div>
            <p>
              You are attempting to impersonate tenant <b>{org_id}</b>, however
              impersonating tenant <b>{currImp}</b>. Sure to Cancel latest
              Impersonation firstly?
            </p>
          </div>
        ),
        okText: 'Confirm',
        async onOk() {
          try {
            await deleteImpersonate()
            Modal.success({
              title: 'Info',
              content: (
                <div>
                  <p>
                    Cancel Impersonation for tenant <b>{org_id}</b>{' '}
                    Successfully.
                  </p>
                </div>
              ),
              onOk() {
                setCreateForm(true)
              }
            })
            setReload((pre) => !pre)
          } catch (error) {
            Modal.error({
              title: error.response.data.errcode,
              content: error.response.data.errmsg
            })
            setReload((pre) => !pre)
          }
        }
      })
    } else {
      setCreateForm(true)
    }
  }

  return (
    <div>
      {currImp === 'uninitialized' ? (
        <Button disabled={true}>Impersonate</Button>
      ) : currImp === org_id ? (
        <Button onClick={handleCancelImpersonate} type="dashed">
          Cancel Impersonate
        </Button>
      ) : (
        <Button onClick={handleOnClickImpersonate} type="primary">
          Impersonate
        </Button>
      )}
      <ModalForm<ImpersonateType>
        visible={!!createForm}
        name="user"
        title={'Impersonate a Tenant'}
        getFields={renderFormFields}
        onSubmit={handleCreate}
        onCancel={handleCancelCreate}
        width={1000}
        destoryOnClose={true}
      />
    </div>
  )
}