import { FieldState, FormState } from 'formstate-x'
import React, { useState } from 'react'

import { Button } from 'react-icecream'
import { Form, FormItem, useFormstateX, TextArea } from 'react-icecream/form-x'

function createState(remark = '') {
  return new FormState({
    remark: new FieldState(remark).validators(v => !v && '不可为空')
  })
}

export default function Demo() {
  const remark = '请尽快发货'
  const [editing, setEditing] = useState(false)
  const state = useFormstateX(createState, [remark])

  const remarkEditingView = (
    <>
      <TextArea style={{ marginBottom: '12px' }} state={state.$.remark} />
      <Button onClick={() => setEditing(false)}>取消</Button>
    </>
  )

  const remarkDisplayView = (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      {remark}&nbsp;
      <Button type="link" onClick={() => setEditing(true)}>编辑</Button>
    </div>
  )

  return (
    <Form
      layout="horizontal"
      labelWidth="6em"
      labelColor={editing ? 'deep' : 'light'}
      state={state}
      footer={null}
    >
      <FormItem label="订单 ID" labelVerticalAlign="text">8901234567</FormItem>
      <FormItem labelVerticalAlign={editing ? 'input' : 'text'} label="订单备注">{editing ? remarkEditingView : remarkDisplayView}</FormItem>
    </Form>
  )
}