import { Button, Form, Input, Select } from 'antd'
import { capitalize } from 'lodash'
import { useState } from 'react'

import { FormsTenant } from 'apiClient/services/account/interface'
import { updateTenant } from 'apiClient/services/devops'
import ModalForm from 'components/ModalForm'

export const ORG_STATUS = {
  PENDING: 'pending',
  ACTIVE: 'active',
  INACTIVE: 'inactive',
  DELETED: 'deleted',
  CLEARED: 'cleared'
} as const

type OrgStatusKeys = keyof typeof ORG_STATUS

export const ORG_TYPE = {
  PERSONAL: 'personal',
  ENTERPRISE: 'enterprise'
}

export const UpdateOrg: React.FC<
  React.PropsWithChildren<{ tenant: FormsTenant }>
> = ({ tenant }) => {
  const [visible, setVisible] = useState(false)

  const onSubmit = async (data: {
    reason: string
    tenant_email?: string
    tenant_status: string
    tenant_type: string
  }) => {
    await updateTenant(tenant.id || '', {
      ...data,
      tenant_id: tenant.id || '',
      tenant_email: data.tenant_email || undefined
    })
    setVisible(false)
  }

  const onCancel = () => {
    setVisible(false)
  }

  const getFields = () => {
    return (
      <>
        <Form.Item
          label="Email"
          name="tenant_email"
          rules={[{ type: 'email', message: 'Invaild email' }]}
        >
          <Input placeholder={tenant.email} />
        </Form.Item>
        <Form.Item label="Status" name="tenant_status">
          <Select>
            {Object.keys(ORG_STATUS).map((item) => {
              const value = ORG_STATUS[item as OrgStatusKeys]
              return (
                <Select.Option key={item} value={value}>
                  {capitalize(value)}
                </Select.Option>
              )
            })}
          </Select>
        </Form.Item>
        <Form.Item label="Authentication Type" name="tenant_type">
          <Select>
            <Select.Option value={ORG_TYPE.PERSONAL}>
              Password & Social SSO
            </Select.Option>
            <Select.Option value={ORG_TYPE.ENTERPRISE}>
              Enterprise SSO
            </Select.Option>
          </Select>
        </Form.Item>
        <Form.Item
          label="Reason"
          name="reason"
          required
          rules={[{ required: true, message: 'Required' }]}
        >
          <Input.TextArea rows={3} placeholder="Reason to update the org" />
        </Form.Item>
      </>
    )
  }

  return (
    <>
      <Button
        onClick={() => {
          setVisible(true)
        }}
        type="link"
        style={{ padding: 0, width: '100%', textAlign: 'left' }}
      >
        Update Org
      </Button>
      <ModalForm
        destoryOnClose
        layout={{ labelCol: { span: 8 } }}
        initValues={{
          tenant_type: tenant.org_type || '',
          tenant_status: tenant.status || '',
          reason: ''
        }}
        visible={visible}
        title={'Update Org'}
        onSubmit={onSubmit}
        onCancel={onCancel}
        getFields={getFields}
        name="update-org-form"
        okText={'Send to approve'}
      ></ModalForm>
    </>
  )
}