import React, { useCallback } from 'react'
import { Form, Field, FormikProps } from 'formik'
import {
  AntDatePicker,
  AntInput,
  AntTextArea,
  AntTimePicker,
  FieldType
} from 'components/Form/FormItem'
import { ExchangeRate } from 'redux/User/types'
import { ExperienceLiveClassFormValues } from 'components/ExperienceInterActiveLiveClassModal/ExperienceInterActiveLiveClassModal'
import { AntInputPriceNumber } from 'components/Form/FormItemPriceNumber'
import { AntSelectDuration } from 'components/Form/FormItemDuration'
import { Row, Col } from 'antd/lib/grid'
import momentTZ from 'moment-timezone'
import { ReactComponent as CalendarIcon } from 'icons/calendar.svg'
import { ReactComponent as TimeIcon } from 'icons/time-bold.svg'
import { Text } from 'components/Typography'

interface Experience1To1FormProps {
  exchangeRate?: ExchangeRate
  actions?: JSX.Element
  isBooked?: boolean
}

const Experience1To1Form: React.FC<
  FormikProps<ExperienceLiveClassFormValues> & Experience1To1FormProps
> = ({
  handleSubmit,
  values,
  actions,
  exchangeRate,
  submitCount,
  isBooked
}) => {
  const disabledDate = useCallback(current => {
    return current && momentTZ().endOf('day').isAfter(current.endOf('day'))
  }, [])

  return (
    <React.Fragment>
      <Form className="experience-live-class-form" onSubmit={handleSubmit}>
        <Field
          className="m__b--24"
          component={AntInput}
          name="name"
          type={FieldType.input}
          label="Experience Name"
          labelClassName="text--semibold18"
          description="Give it a brief name that draws attention"
          descriptionClassName="text--regular16 m__b--16"
          placeholder="My experience"
          submitCount={submitCount}
        />
        <Field
          className="m__b--24"
          component={AntTextArea}
          name="description"
          type={FieldType.input}
          label="Experience Description"
          labelClassName="text--semibold18"
          description="Describe your experience in detail. Why will people love it?"
          descriptionClassName="text--regular16 m__b--16"
          placeholder="You’ll love my experience"
          rows={4}
          submitCount={submitCount}
        />
        <Field
          className="m__b--24"
          component={AntInputPriceNumber}
          name="experiencePrice"
          type={FieldType.inputNumber}
          label="Price"
          labelClassName="text--semibold18"
          description="Choose the price your fans will need to pay for this experience. Don’t worry, we’ll automatically convert the price you set into the local currency of your fans"
          descriptionClassName="text--regular16 m__b--16"
          placeholder="Enter amount"
          defaultValue={values.experiencePrice}
          value={values.experiencePrice}
          exchangeRate={exchangeRate}
          prefix={exchangeRate?.symbol}
          prefixInline={false}
          showPriceDisplay
          submitCount={submitCount}
        />
        <Field
          className="m__b--24"
          component={AntSelectDuration}
          name="duration"
          type={FieldType.input}
          label="Experience Duration"
          labelClassName="text--semibold18"
          description="Select the duration of the experience"
          descriptionClassName="text--regular16 m__b--16"
          placeholder="You’ll love my experience"
          rows={4}
          submitCount={submitCount}
        />

        <Row>
          <Col sm={24}>
            <Text className="d--block" preset="semibold18">
              Schedule Experience
            </Text>
            <Text className="d--block" preset="regular16">
              Set the date and time for your class to commence (this will appear
              in local time for consumers in different time zones
            </Text>
          </Col>
        </Row>

        <Row gutter={[16, 16]} className="m__t--16">
          <Col sm={24} md={12} lg={12}>
            <Field
              value={values.datePicker}
              component={AntDatePicker}
              name="datePicker"
              type={FieldType.date}
              format="MM/DD/YYYY"
              disabledDate={disabledDate}
              suffixIcon={<CalendarIcon />}
              submitCount={submitCount}
              disabled={isBooked}
              size="small"
            />
          </Col>
          <Col sm={24} md={12} lg={12}>
            <Field
              value={values.timePicker}
              component={AntTimePicker}
              name="timePicker"
              type={FieldType.time}
              format="h:mm A"
              clearIcon={false}
              suffixIcon={<TimeIcon />}
              submitCount={submitCount}
              disabled={isBooked}
              size="small"
            />
          </Col>
        </Row>
        {actions}
      </Form>
    </React.Fragment>
  )
}

export default Experience1To1Form
