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

import { Tooltip } from 'react-icecream'
import { AddThinIcon, CloseThinIcon } from 'react-icecream/icons'
import { Form, FormItem, useFormstateX, TextInput } from 'react-icecream/form-x'

type NumberState = FieldState<string>

// 构造单条手机号对应的表单状态
function createNumberState(initialValue = ''): NumberState {
  return new FieldState(initialValue).validators(validateNumber)
}

// 构造手机号列表对应的状态
function createNumbersState() {
  return new FormState([
    createNumberState()
  ]).validators(
    numbers => numbers.length > 3 && '最多添加 3 个号码'
  )
}

// 构造表单状态
function createFormState() {
  return new FormState({
    numbers: createNumbersState()
  })
}

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

export default observer(() => {
  const state = useFormstateX(createFormState, [])
  const numbersState = state.$.numbers

  const handleAddNumber = useCallback(() => {
    numbersState.$.push(createNumberState())
  }, [numbersState])

  const handleRemoveNumber = useCallback((index: number) => {
    numbersState.$.splice(index, 1)
  }, [numbersState])

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

  const numbersLabel = (
    <span style={{ display: 'flex', alignItems: 'center' }}>
      手机号
      <Tooltip title="点击添加">
        <AddThinIcon
          style={{ marginLeft: '.5em', cursor: 'pointer' }}
          onClick={handleAddNumber}
        />
      </Tooltip>
    </span>
  )

  return (
    <Form layout="horizontal" labelWidth="64px" state={state} onSubmit={handleSubmit}>
      <FormItem state={numbersState} label={numbersLabel}>
        {numbersState.$.map((numberState, i) => (
          <FormItem key={i}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <TextInput placeholder="请输入中国大陆手机号" state={numberState} />
              {numbersState.$.length > 1 && (
                <Tooltip title="点击删除">
                  <CloseThinIcon
                    style={{ marginLeft: '.5em', padding: '5px', cursor: 'pointer' }}
                    onClick={() => handleRemoveNumber(i)}
                  />
                </Tooltip>
              )}
            </div>
          </FormItem>
        ))}
      </FormItem>
    </Form>
  )
})

function validateNumber(v: string) {
  if (!v) return '号码不可为空'
  if (!/^1\d{10}$/.test(v)) return '格式不正确'
}