import { AntInput, FieldType } from "components/Form/FormItem";
import { Field, Form, FormikProps } from "formik";
import React from "react";
import { addingHttpsPrefix } from "../../../../utils/string";
import { YoutubeVideoEditorModalFormValues } from "../../YoutubeVideoEditorModal";

interface ProductEditorFormProps {
  actions?: JSX.Element;
}

const ProductEditorForm: React.FC<
  FormikProps<YoutubeVideoEditorModalFormValues> & ProductEditorFormProps
> = ({ handleSubmit, actions }) => {
  return (
    <React.Fragment>
      <Form className="youtube-editor-form" onSubmit={handleSubmit}>
        <Field
          component={AntInput}
          name="url"
          type={FieldType.input}
          label="URL"
          placeholder="https://youtube.com"
          beforeSetValue={addingHttpsPrefix}
        />
        {actions}
      </Form>
    </React.Fragment>
  );
};

export default ProductEditorForm;
