import { AntInput, FieldType } from 'components/Form/FormItem'
import { Field, Form, FormikProps } from 'formik'
import React from 'react'
import { addingHttpsPrefix } from '../../../../utils/string'
import { TikTokModalFormValues } from 'components/TikTokModal/TikTokModal'

interface ProductEditorFormProps {
  actions?: JSX.Element
}

const TikTokLinkForm: React.FC<
  FormikProps<TikTokModalFormValues> & ProductEditorFormProps
> = ({ handleSubmit, actions }) => {
  return (
    <React.Fragment>
      <Form className="link-editor-form" onSubmit={handleSubmit}>
        <Field
          component={AntInput}
          name="url"
          type={FieldType.input}
          labelClassName="opacity--80 font__weight--medium"
          label="TikTok Video Link"
          placeholder="https://www.tiktok.com/"
          beforeSetValue={addingHttpsPrefix}
        />
        {actions}
      </Form>
    </React.Fragment>
  )
}

export default TikTokLinkForm
