import { Form, Select, DatePicker } from 'antd'
import TextArea from 'antd/lib/input/TextArea'

import {
  PrivilegePrivilegeType,
  PrivilegeApprovalPrivilegeScope
} from 'apiClient/services/devops/interface'

export type RequestPrivilegeFormType = {
  reason: string
  users: string[]
  type: PrivilegePrivilegeType
  expired_at: moment.Moment
  approval_scopes?: PrivilegeApprovalPrivilegeScope[]
}

export const RequestPrivilegeForm = () => {
  return (
    <>
      <Form.Item label="Type" name="type" required={true}>
        <Select
          style={{ width: 300 }}
          options={[
            {
              value: PrivilegePrivilegeType.approval,
              label: 'Approval'
            }
          ]}
        />
      </Form.Item>
      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) =>
          prevValues.type !== currentValues.type
        }
      >
        {({ getFieldValue }) => {
          const type = getFieldValue('type')
          if (type === PrivilegePrivilegeType.approval) {
            return (
              <Form.Item label="Scopes" name="approval_scopes" required={true}>
                <Select
                  mode="multiple"
                  style={{ width: 300 }}
                  options={[
                    {
                      label: 'jump-service',
                      value: PrivilegeApprovalPrivilegeScope['jump-service']
                    }
                  ]}
                />
              </Form.Item>
            )
          }
          return null
        }}
      </Form.Item>
      <Form.Item label="Users" name="users" required={true}>
        <Select
          mode="tags"
          style={{ width: 300 }}
          placeholder="Input user emails"
        />
      </Form.Item>
      <Form.Item label="Expired At" name="expired_at">
        <DatePicker showTime />
      </Form.Item>
      <Form.Item label="Reason" name="reason" required={true}>
        <TextArea style={{ width: 300 }}></TextArea>
      </Form.Item>
    </>
  )
}