import { Checkbox } from "antd";
import Button from "antd/lib/button";
import Modal from "components/Modal";
import { Formik } from "formik";
import pick from "lodash/pick";

import { EventItem } from "models/talent/talent-profile-module.model";
import momentTZ from "moment-timezone";
import React, { useEffect, useState } from "react";
import * as yup from "yup";
import LinkEditorForm from "./components/Form/Form";
import "./EventEditorModal.scss";
import moment from "moment";

export type EventEditorModalFormValues = Pick<
  EventItem,
  "venueName" | "location" | "ticketLink"
> & {
  eventDate?: momentTZ.Moment;
};

interface EventEditorModalProps {
  show: boolean;
  isEdit: boolean;
  item?: EventItem;
  toggleModal: (value: boolean) => void;
  onConfirmCallback: (data: any) => void;
}

const initialEventValues: EventEditorModalFormValues = {
  eventDate: undefined,
  venueName: "",
  location: "",
  ticketLink: "",
};

const validateSchema = yup.object().shape({
  // Validate form field
  eventDate: yup.date().required("Please Enter the event date"),
  venueName: yup.string().required("Please Enter the venue"),
  location: yup.string().required("Please Enter the location"),
  ticketLink: yup
    .string()
    .required("This field must be a valid URL.")
    .url("This field must be a valid URL."),
});

const EventEditorModal: React.FC<EventEditorModalProps> = ({
  show,
  isEdit,
  item,
  toggleModal,
  onConfirmCallback,
}) => {
  const [initialValues, setInitialValues] =
    useState<EventEditorModalFormValues>({});
  const [soldOut, setSoldOut] = useState(false);
  useEffect(() => {
    if (!show) return;
    if (isEdit && item) {
      const eventDate = moment.utc(item.eventDate);
      setInitialValues({
        ...pick(item, ["venueName", "location", "ticketLink"]),
        eventDate: eventDate,
      });
      setSoldOut(item.soldOut || false);
    } else {
      setInitialValues(initialEventValues);
      setSoldOut(false);
    }
  }, [show, isEdit, item]);

  const handleSubmit = (formProps: EventEditorModalFormValues) => {
    onConfirmCallback({
      ...item,
      ...formProps,
      soldOut,
    });
  };
  const onChangeSoldOut = () => {
    setSoldOut((value) => !value);
  };
  return (
    <React.Fragment>
      <Modal
        width={664}
        closable
        centered
        className="event-editor"
        title={isEdit ? "Edit Custom Event" : "Add Custom Event"}
        visible={show}
        onCancel={() => toggleModal(false)}
        destroyOnClose
        maskClosable={false}
      >
        <div>
          <Formik
            initialValues={initialValues}
            onSubmit={handleSubmit}
            validationSchema={validateSchema}
          >
            {(props) => (
              <React.Fragment>
                <LinkEditorForm {...props} />
                <Checkbox checked={soldOut} onClick={onChangeSoldOut}>
                  Mark the event as sold out
                </Checkbox>
                <div className="event-editor__actions m__t--24">
                  <Button
                    className="ant-btn-xl ant-btn-uppercase"
                    onClick={() => toggleModal(false)}
                  >
                    Cancel
                  </Button>
                  <Button
                    className="ant-btn-xl ant-btn-uppercase"
                    type="primary"
                    onClick={() => props.handleSubmit()}
                  >
                    {isEdit ? "Save" : "Done"}
                  </Button>
                </div>
              </React.Fragment>
            )}
          </Formik>
        </div>
      </Modal>
    </React.Fragment>
  );
};

export default EventEditorModal;
