import React from "react";
import { Form, Field, FormikProps } from "formik";
import { AntInput, AntTextArea, FieldType } from "components/Form/FormItem";
import { ExchangeRate } from "redux/User/types";
import { OnDemandVideoEditorModalFormValues } from "components/OnDemandEditorModal/OnDemandEditorModal";
import { AntInputPriceNumber } from "components/Form/FormItemPriceNumber";

interface OnDemandEditorFormProps {
  exchangeRate?: ExchangeRate;
  actions?: JSX.Element;
}

const OnDemandEditorForm: React.FC<
  FormikProps<OnDemandVideoEditorModalFormValues> & OnDemandEditorFormProps
> = ({ handleSubmit, values, actions, exchangeRate }) => {
  return (
    <React.Fragment>
      <Form className="ondemand-editor-form" onSubmit={handleSubmit}>
        <Field
          component={AntInput}
          name="name"
          type={FieldType.input}
          label="Content Name"
          placeholder="Give it a brief name that your customers might be attracted to."
        />
        <Field
          component={AntTextArea}
          name="description"
          type={FieldType.input}
          label="Describe your experience"
          placeholder="Enter a description that best describes what consumers will mainly be earning on your experience."
        />
        <Field
          component={AntInputPriceNumber}
          name="experiencePrice"
          type={FieldType.inputNumber}
          label="Price"
          placeholder="Enter amount"
          defaultValue={values.experiencePrice}
          value={values.experiencePrice}
          exchangeRate={exchangeRate}
          prefix={exchangeRate?.symbol}
          showPriceDisplay
        />
        {actions}
      </Form>
    </React.Fragment>
  );
};

export default OnDemandEditorForm;
