import { Modal } from '@tidbcloud/uikit'
import { Form, FormSelect, FormTextInput } from '@tidbcloud/uikit/biz'
import { observer } from 'mobx-react'

import { RBACRoles } from 'dbaas/contexts/access-control'
import { useInviteUserToOrg } from 'dbaas/services/account'
import { CentralUser } from 'dbaas/services/account/interface'
import useStores from 'dbaas/stores/useStores'
import { emailRegEx } from 'dbaas/utils/regex'
import { eventTracking } from 'dbaas/utils/tracking'

import { orgRoleOptions } from '../constant'

function validateEmails(emails: string[]) {
  for (let i = 0; i < emails.length; i++) {
    if (!emails[i] || !emailRegEx.test(emails[i].trim())) {
      return false
    }
  }

  return true
}

type FormValues = {
  email: string
  role: string
}

interface InvitationModalProps {
  mode: 'free' | 'specific'
  user?: CentralUser
  opened: boolean
  onClose: () => void
  onFinish?: () => void
}

export const OrgInvitationModal = observer(
  ({ mode, user, opened = false, onClose, onFinish }: InvitationModalProps) => {
    const {
      store: {
        tenantData: { id: orgId }
      }
    } = useStores()

    const inviteMutation = useInviteUserToOrg()

    const onSubmit = async (values: FormValues) => {
      await inviteMutation.mutateAsync({
        orgId,
        data: {
          email: values.email,
          rbac_role: values.role
        }
      })

      if (mode === 'free') {
        onFinish?.()
      }

      onClose()
      eventTracking('Invite User Completed')
    }

    const defaultValues =
      mode === 'specific'
        ? {
            email: user?.email,
            role: user?.rbac_role
          }
        : {
            email: '',
            role: RBACRoles.OrgMember
          }

    return (
      <Modal opened={opened} onClose={onClose} title="Invite User" centered size="xl">
        <Form<FormValues>
          layout="vertical"
          defaultValues={defaultValues}
          onSubmit={onSubmit}
          onCancel={onClose}
          actionsProps={{
            loading: inviteMutation.isLoading
          }}
        >
          <FormTextInput
            name="email"
            label="Email"
            placeholder="Use ; to separate multiple email addresses"
            disabled={mode === 'specific'}
            required
            rules={{
              required: 'Please enter at least one email address.',
              validate: (value) => validateEmails(value.split(';')) || 'Please enter the valid email address.'
            }}
            data-autofocus
          />
          <FormSelect
            name="role"
            label="Role"
            placeholder="Choose Role"
            data={orgRoleOptions}
            disabled={mode === 'specific'}
            required
          />
        </Form>
      </Modal>
    )
  }
)