import React, { useState } from 'react'

import { Form, FormItem, TextInput, useFormFooterCtx, Button } from 'react-icecream'

function MyFooter({ submitted }: { submitted: boolean }) {
  const { submitting } = useFormFooterCtx()
  const text = submitted ? '已删除' : (submitting ? '删除中...' : '确认删除')
  return (
    <div style={{ width: '100%', paddingTop: '24px', borderTop: '1px solid #E5E5E5' }}>
      <Button type="primary" htmlType="submit" disabled={submitted || submitting}>{text}</Button>
    </div>
  )
}

export default function Demo() {
  const [submitted, setSubmitted] = useState(false)

  async function handleSubmit() {
    await new Promise<void>(resolve => setTimeout(resolve, 1000))
    setSubmitted(true)
  }

  return (
    <Form onSubmit={handleSubmit} footer={<MyFooter submitted={submitted} />}>
      <FormItem label="资源名">
        <TextInput disabled={submitted} placeholder="请输入你要删除的资源名" />
      </FormItem>
    </Form>
  )
}