import { Form, InputNumber } from 'antd'
import React, { useCallback } from 'react'

import { FormsGlobalDiscount } from 'apiClient/api/interface'
import ModalForm from 'components/ModalForm'
import { precision } from 'utils/number'

export default function DiscountFormModal({
  title = 'Update Global discount',
  name,
  open,
  initValues,
  onSubmit,
  onCancel
}: {
  title?: string
  name: string
  open: boolean
  initValues: FormsGlobalDiscount
  onSubmit: (payload: FormsGlobalDiscount) => Promise<void> | void
  onCancel: () => void
}) {
  const renderFormFields = useCallback(() => {
    return (
      <>
        {/* <Form.Item
          name="description"
          label="Description"
          rules={[{ required: true }]}
        >
          <Input />
        </Form.Item> */}
        <Form.Item label="Discount">
          <Form.Item name="discount" rules={[{ required: true }]} noStyle>
            <InputNumber min={0} max={100} />
          </Form.Item>
          <span className="ant-form-text">% Off</span>
        </Form.Item>

        {/* <Form.Item
          name="start_time"
          label="Start Time"
          rules={[{ required: true }]}
        >
          <DatePicker style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item
          name="end_time"
          label="End Time"
          rules={[{ required: true }]}
        >
          <DatePicker style={{ width: '100%' }} />
        </Form.Item> */}
      </>
    )
  }, [])

  const handleSubmit = (payload: FormsGlobalDiscount) => {
    const { discount } = payload
    return onSubmit({
      // start_time: start_time?.unix(),
      // end_time: end_time?.unix(),
      discount: precision(100 - Number.parseFloat(discount)).toString()
      // ...rest
    })
  }

  // // tricky to control date picker value
  // const memoValues = useMemo(
  //   () => ({
  //     start_time: formatTime(start_time),
  //     end_time: formatTime(end_time),
  //     ...rest
  //   }),
  //   [start_time, end_time, rest]
  // )

  return (
    <ModalForm<FormsGlobalDiscount>
      visible={open}
      name={name}
      title={title}
      initValues={initValues}
      getFields={renderFormFields}
      onSubmit={handleSubmit}
      onCancel={onCancel}
    />
  )
}