import { AntDatePicker, AntInput, FieldType } from "components/Form/FormItem";
import { Field, Form, FormikProps } from "formik";
import React, { useCallback } from "react";
import { addingHttpsPrefix } from "../../../../utils/string";
import { EventEditorModalFormValues } from "../../EventEditorModal";
import { ReactComponent as CalendarIcon } from "icons/calendar.svg";
import momentTZ from "moment-timezone";
interface EventEditorFormProps {
  actions?: JSX.Element;
}

const EventEditorForm: React.FC<
  FormikProps<EventEditorModalFormValues> & EventEditorFormProps
> = ({ handleSubmit, actions }) => {
  const disabledDate = useCallback((current) => {
    return (
      current && momentTZ().endOf("day").isAfter(current.utc().endOf("day"))
    );
  }, []);
  return (
    <React.Fragment>
      <Form className="event-editor-form" onSubmit={handleSubmit}>
        <Field
          component={AntDatePicker}
          format="DD MMM, YYYY"
          name="eventDate"
          type={FieldType.date}
          label="Event Date"
          placeholder="Select the date of your event"
          suffixIcon={<CalendarIcon />}
          clearIcon={false}
          onChange={(date: any) => console.log(date)}
          disabledDate={disabledDate}
        />
        <Field
          component={AntInput}
          name="venueName"
          type={FieldType.input}
          label="Venue Name"
          placeholder="Enter the venue where your event will be held"
        />
        <Field
          component={AntInput}
          name="location"
          type={FieldType.input}
          label="Location"
          placeholder="Enter the location of your event"
        />
        <Field
          component={AntInput}
          name="ticketLink"
          type={FieldType.input}
          label="Ticket Link"
          placeholder="https://example.com"
          beforeSetValue={addingHttpsPrefix}
        />
        {actions}
      </Form>
    </React.Fragment>
  );
};

export default EventEditorForm;
