import React from "react";
import { Field, FormikProps } from "formik";
import { AntInput, AntTextArea, FieldType } from "components/Form/FormItem";
import { ExchangeRate } from "redux/User/types";
import { AntInputPriceNumber } from "components/Form/FormItemPriceNumber";
import { AntSelectDuration } from "components/Form/FormItemDuration";
import { Experience1to1FormValues } from "../FormModel/initial-values";

interface Experience1To1FormProps {
  exchangeRate?: ExchangeRate;
}

const Experience1To1Form: React.FC<
  FormikProps<Experience1to1FormValues> & Experience1To1FormProps
> = ({ values, exchangeRate }) => {
  return (
    <React.Fragment>
      <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 opacity--80"
        placeholder="My experience"
      />
      <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 opacity--80"
        placeholder="You’ll love my experience"
        rows={4}
      />
      <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 opacity--80"
        placeholder="Enter amount"
        defaultValue={values.experiencePrice}
        value={values.experiencePrice}
        exchangeRate={exchangeRate}
        prefix={exchangeRate?.symbol}
        prefixInline={false}
        showPriceDisplay
      />
      <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 opacity--80"
        placeholder="You’ll love my experience"
        rows={4}
      />
    </React.Fragment>
  );
};

export default Experience1To1Form;
