import React, { useMemo, useState } from 'react'

import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
import { Form, Input, Button, Select } from 'antd'
import useSWR from 'swr'

import { listRoles } from '~/api'
import LoadingSpin from '~/components/LoadingSpin'
import { useCurOrg } from '~/hooks/state'

import './InviteUsersForm.css'

const { Option } = Select

const InviteUersForm: React.FC<{
  onInvite: (values: any) => Promise<void>
}> = ({ onInvite }) => {
  const { curOrg } = useCurOrg()
  const [loading, setLoading] = useState(false)

  const onFinish = async (values: any) => {
    try {
      setLoading(true)
      await onInvite(values.users)
    } finally {
      setLoading(false)
    }
  }

  const { data: rolesRes, error } = useSWR(`/orgs/${curOrg?.id}/roles`, () =>
    listRoles(curOrg?.id!)
  )
  const loadingRoles = !rolesRes && !error
  const defRoleId = useMemo(
    () => rolesRes?.data.find((i) => i.name === 'Viewer')?.id ?? -1,
    [rolesRes]
  )

  if (loadingRoles) {
    return <LoadingSpin />
  }

  return (
    <Form name='invite-users-form' onFinish={onFinish} autoComplete='off'>
      <Form.List
        name='users'
        initialValue={[{ user: undefined, role: defRoleId }]}
      >
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (
              <div key={key} className='flex items-baseline gap-4 mb-4'>
                <Form.Item
                  style={{ flexGrow: 1 }}
                  {...restField}
                  name={[name, 'userName']}
                  initialValue={undefined}
                  rules={[{ required: true, message: 'Missing user name' }]}
                >
                  <Input placeholder='User Name' />
                </Form.Item>
                <Form.Item
                  {...restField}
                  name={[name, 'role']}
                  initialValue={defRoleId}
                  rules={[{ required: true, message: 'Missing role' }]}
                >
                  <Select placeholder='Role' style={{ width: 120 }}>
                    {rolesRes?.data.map((i) => (
                      <Option key={i.id} value={i.id}>
                        {i.name}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
                {fields.length > 1 && (
                  <MinusCircleOutlined onClick={() => remove(name)} />
                )}
              </div>
            ))}
            <Form.Item>
              <div className='w-10'>
                <Button
                  type='dashed'
                  onClick={() => add()}
                  block
                  icon={<PlusOutlined />}
                ></Button>
              </div>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item>
        <div className='flex justify-end'>
          <Button type='primary' htmlType='submit' loading={loading}>
            Invite
          </Button>
        </div>
      </Form.Item>
    </Form>
  )
}

export default InviteUersForm