import React, { useCallback } from 'react'
import { FormState, FieldState, ValueOf } from 'formstate-x'
import { observer } from 'mobx-react'

import { Form, FormItem, useFormstateX, TextInput, PasswordInput, RadioGroup, Radio, Checkbox, MultiSelect, SelectOption } from 'react-icecream/form-x'

type AccountType = 'default' | 'enterprise'

// 构造表单状态
function createFormState() {
  const accountTypeField = new FieldState<AccountType>('default')
  const usernameField = new FieldState('').validators(notEmpty)
  const passwordField = new FieldState('').validators(notEmpty)
  const password2Field = new FieldState('').validators(
    notEmpty,
    (v: string) => v !== passwordField.value && '密码不一致'
  )
  const productsField = new FieldState<string[]>([]).validators(
    products => productsRequired(accountTypeField.value) && products.length === 0 && '不可为空'
  )
  const agreedField = new FieldState(false).validators(
    agreed => !agreed && '请勾选'
  )
  return new FormState({
    accountType: accountTypeField,
    username: usernameField,
    password: passwordField,
    password2: password2Field,
    products: productsField,
    agreed: agreedField
  })
}

// 表单中值的类型
type Value = ValueOf<ReturnType<typeof createFormState>>

export default observer(() => {

  const state = useFormstateX(createFormState, [])

  const handleSubmit = useCallback((value: Value) => {
    console.log(`Submit with: ${JSON.stringify(value)}.`)
    return new Promise<void>(resolve => setTimeout(resolve, 2000))
  }, [])

  const handleCancel = useCallback(() => (
    console.log('Cancelled.')
  ), [])

  return (
    <Form
      state={state}
      layout="horizontal"
      labelWidth="4em"
      onSubmit={handleSubmit}
      onCancel={handleCancel}
    >
      <FormItem label="账户类型" labelVerticalAlign="text" tip="企业账号需要额外选择“开通产品”">
        <RadioGroup state={state.$.accountType}>
          <Radio value="default">普通账号</Radio>
          <Radio value="enterprise">企业账号</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="用户名" required>
        <TextInput placeholder="请输入用户名" state={state.$.username} />
      </FormItem>
      <FormItem label="密码" required>
        <PasswordInput placeholder="请输入密码" state={state.$.password} />
      </FormItem>
      <FormItem label="确认密码" required tip="两次输入密码应当一致">
        <PasswordInput placeholder="请再次输入密码" state={state.$.password2} />
      </FormItem>
      {productsRequired(state.$.accountType.value) && (
        <FormItem required label="开通产品">
          <MultiSelect
            placeholder="请选择需要开通的产品"
            state={state.$.products}
            collapsed={false}
            style={{ width: '240px' }}
          >
            <SelectOption value="kodo">对象存储 Kodo</SelectOption>
            <SelectOption value="fusion">CDN</SelectOption>
            <SelectOption value="dora">智能多媒体服务 Dora</SelectOption>
            <SelectOption value="qvm">云主机服务 QVM</SelectOption>
            <SelectOption value="pandora">机器数据分析平台 Pandora</SelectOption>
          </MultiSelect>
        </FormItem>
      )}
      <FormItem label="">
        <label style={{ color: '#999999' }}>
          <Checkbox state={state.$.agreed} />&nbsp;
          <small>我已阅读并同意服务协议和隐私政策</small>
        </label>
      </FormItem>
    </Form>
  )
})

function productsRequired(accountType: AccountType) {
  return accountType === 'enterprise'
}

function notEmpty(v: string) {
  return v.trim() === '' && '不可为空'
}