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

import { listUsers } from 'apiClient/services/account'
import { addUserToProject, addUserToTenant } from 'apiClient/services/devops'
import DebounceSelect from 'components/DebounceSelect/DebounceSelect'
import ModalForm from 'components/ModalForm'

import { RBACRoles, RBACRoleUINames } from './contants'

interface DeleteUserProps {
  type: 'org' | 'project'
  orgId: string
  orgName?: string
  projectName?: string
  projectId?: string
  onComplete?: () => void
}

export const AddUser: React.FC<React.PropsWithChildren<DeleteUserProps>> = ({
  orgId,
  type,
  projectId,
  onComplete,
  orgName,
  projectName
}) => {
  const [visible, setVisible] = useState(false)
  const onSubmit = async (data: {
    reason: string
    user_id: { value: string }
    user_role: string
  }) => {
    const user = JSON.parse(data.user_id.value) as { id: string; email: string }
    if (type === 'project') {
      await addUserToProject(orgId, projectId || '', user.id, {
        ...data,
        user_id: user.id,
        user_email: user.email,
        tenant_id: orgId,
        project_id: projectId || ''
      })
    } else {
      await addUserToTenant(orgId, user.id, {
        ...data,
        user_email: user.email,
        user_id: user.id,
        tenant_id: orgId
      })
    }
    setVisible(false)
    onComplete?.()
  }

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

  const usersRoles =
    type === 'project'
      ? [
          RBACRoles.ProjectOwner,
          RBACRoles.ProjectDev,
          RBACRoles.ProjectReadOnly
        ]
      : [
          RBACRoles.OrgOwner,
          RBACRoles.OrgMember,
          RBACRoles.OrgAuditAdmin,
          RBACRoles.OrgBillAdmin
        ]

  const getFields = () => {
    return (
      <>
        <Form.Item
          name="user_id"
          label="User"
          required
          rules={[{ required: true, message: 'Required' }]}
        >
          <DebounceSelect
            showSearch
            placeholder="Search by Email"
            fetchOptions={async (search: string) => {
              if (!search) {
                return []
              }
              const data = await listUsers({
                email_like: search,
                status: 'active',
                page: 1,
                page_size: 1000
              })
              return (data.data.items || []).map((item) => {
                return {
                  label: `ID: ${item.id} Email: ${item.email}`,
                  value: JSON.stringify({
                    id: item.id || '',
                    email: item.email || ''
                  })
                }
              })
            }}
          />
        </Form.Item>
        <Form.Item
          label="Role"
          name="user_role"
          required
          rules={[{ required: true, message: 'Required' }]}
        >
          <Select>
            {usersRoles.map((item) => {
              return (
                <Select.Option key={item} value={item}>
                  {RBACRoleUINames[item]}
                </Select.Option>
              )
            })}
          </Select>
        </Form.Item>
        <Form.Item
          label="Reason"
          name="reason"
          required
          rules={[{ required: true, message: 'Required' }]}
        >
          <Input.TextArea rows={3} placeholder="Reason to add the user" />
        </Form.Item>
      </>
    )
  }

  return (
    <>
      <Button
        type={'link'}
        onClick={() => setVisible(true)}
        style={
          type === 'project'
            ? { paddingLeft: 0, paddingRight: 0 }
            : { padding: 0, width: '100%', textAlign: 'left' }
        }
      >
        Add user to {type === 'project' ? 'Project' : 'Org'}
      </Button>
      <ModalForm
        visible={visible}
        title={
          type === 'project'
            ? `Add a user to project: ${projectName}(ID: ${projectId})`
            : `Add a user to org: ${orgName}(ID: ${orgId})`
        }
        onSubmit={onSubmit}
        onCancel={onCancel}
        getFields={getFields}
        okText="Confirm"
        name="add-user-form"
      ></ModalForm>
    </>
  )
}