import { Form, Input } from 'antd'
import React, { useState } from 'react'

import { postApiV1AdminRbacPrivilegeCreate } from 'apiClient/services/account'
import { FormsRbacPrivilege } from 'apiClient/services/account/interface'
import ModalForm from 'components/ModalForm'

const CreationModal: React.FC<
  React.PropsWithChildren<{
    onComplete?: () => void
    initValues?: FormsRbacPrivilege
    trigger: React.ReactElement
    title?: string
  }>
> = ({ onComplete, initValues, trigger, title = 'Add Privilege' }) => {
  const [visible, setVisible] = useState(false)

  const handleSubmit = async (data: FormsRbacPrivilege) => {
    await postApiV1AdminRbacPrivilegeCreate(data)
    onComplete?.()
    setVisible(false)
  }

  const Trigger = React.cloneElement(trigger, {
    onClick: () => {
      setVisible(true)
    }
  })

  const getFields = () => {
    return (
      <>
        <Form.Item
          name="resource_uri"
          label="Resource URI"
          rules={[{ required: true, message: 'required' }]}
        >
          <Input maxLength={256} />
        </Form.Item>
        <Form.Item name="url" label="URL Example">
          <Input maxLength={256} />
        </Form.Item>
        <Form.Item
          name="system"
          label="System"
          rules={[{ required: true, message: 'required' }]}
        >
          <Input maxLength={32} />
        </Form.Item>
        <Form.Item name="description" label="Description">
          <Input.TextArea rows={4} maxLength={256} />
        </Form.Item>
      </>
    )
  }

  return (
    <div>
      {Trigger}
      <ModalForm
        initValues={initValues}
        name="dbaas-rbac-privilege-creation-form"
        title={title}
        visible={visible}
        onSubmit={handleSubmit}
        getFields={getFields}
        onCancel={() => setVisible(false)}
      />
    </div>
  )
}

export default CreationModal