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

import { postApiV1AdminRbacRoleUpdate } from 'apiClient/services/account'
import { FormsRbacRole } from 'apiClient/services/account/interface'
import ModalForm from 'components/ModalForm'

const EditModal: React.FC<
  React.PropsWithChildren<{
    onComplete?: () => void
    record: FormsRbacRole
    trigger: React.ReactElement
    title?: string
  }>
> = ({ onComplete, record, trigger, title = 'Edit Role' }) => {
  const [visible, setVisible] = useState(false)

  const handleSubmit = async (data: FormsRbacRole) => {
    await postApiV1AdminRbacRoleUpdate({
      ...data,
      id: record.id
    })
    onComplete?.()
    setVisible(false)
  }

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

  const getFields = () => {
    return (
      <>
        <Form.Item
          name="name"
          label="Name"
          rules={[{ required: true, message: 'required' }]}
        >
          <Input disabled maxLength={256} />
        </Form.Item>
        <Form.Item
          name="display_name"
          label="Display Name"
          rules={[{ required: true, message: 'required' }]}
        >
          <Input maxLength={256} />
        </Form.Item>
        <Form.Item
          name="scope_type"
          label="Scope Type"
          rules={[{ required: true, message: 'required' }]}
        >
          <Input disabled maxLength={32} />
        </Form.Item>
        <Form.Item name="description" label="Description">
          <Input.TextArea rows={4} maxLength={256} />
        </Form.Item>
      </>
    )
  }

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

export default EditModal