import React, { useRef, useState } from 'react'
import { Form, Button, Radio, DatePicker, Switch } from 'antd'
import { dayjsFormat } from '@/utils/utils'
import { Plus } from '@icon-park/react'
import dayjs from 'dayjs'
import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
import { ProFormTextArea } from '@ant-design/pro-form'

const AddRecord = props => {
  const formRef = useRef(null)
  const { onConfirm } = props
  const [showExtraItem, setShowExtraItem] = useState(false)

  const onChange = value => {
    setShowExtraItem(value)
  }

  const disabledDate = current => {
    return current && current < dayjs().endOf('day')
  }

  return (
    <ModalDragForm
      modalProps={{ zIndex: 1060, getContainer: false }}
      layout="vertical"
      title="添加服务记录"
      formRef={formRef}
      onVisibleChange={e => !e && onChange(e)}
      trigger={
        <Button type="primary" ghost size="small" className="mr-1">
          <Plus className="mr-1" /> 添加服务记录
        </Button>
      }
      onFinish={async values => {
        try {
          const newVal = { ...values }
          formRef.current?.resetFields()
          if (values.date) {
            newVal.date = dayjsFormat(values.date, 'YYYY-MM-DD')
          }
          if (values.remindTime) {
            newVal.remindTime = dayjsFormat(values.remindTime, 'YYYY-MM-DD')
          }
          await onConfirm(newVal)
          return true
        } catch (error) {
          return false
        }
      }}>
      <Form.Item name="status" rules={[{ required: true, message: '请选择类型' }]}>
        <Radio.Group>
          <Radio value={1}>上门服务</Radio>
          <Radio value={2}>电话拜访</Radio>
          <Radio value={3}>其他事项</Radio>
          <Radio value={4}>在线服务</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item name="date" label="服务日期" initialValue={dayjs(new Date())}>
        <DatePicker style={{ width: '100%' }} />
      </Form.Item>
      <ProFormTextArea name="mark" label="内容" />

      <div className="pb-5">
        <Switch onChange={onChange} checked={showExtraItem} />
        <span className="ml-2">添加备忘录</span>
      </div>
      {showExtraItem ? (
        <>
          <Form.Item name="remindTime" label="备忘日期" required={true}>
            <DatePicker style={{ width: '100%' }} disabledDate={disabledDate} />
          </Form.Item>
          <ProFormTextArea name="remarks" label="备忘内容" />
        </>
      ) : null}
    </ModalDragForm>
  )
}

export default AddRecord