import { AntInput, FieldType } from "components/Form/FormItem";
import { Field, Form, FormikProps } from "formik";
import React from "react";
import { SeatedEditorModalFormValues } from "../../SeatedEditorModal";
import { Alert } from "antd";
import { Icon } from "components/Icon";
import "./../../SeatedEditorModal.scss";
import config from "config";

interface ProductEditorFormProps {
  actions?: JSX.Element;
}
// console.log();
const ProductEditorForm: React.FC<
  FormikProps<SeatedEditorModalFormValues> & ProductEditorFormProps
> = ({ handleSubmit, actions }) => {
  return (
    <React.Fragment>
      <Form className="link-editor-form seated-form" onSubmit={handleSubmit}>
        <Alert
          message={undefined}
          className={"m__b--24 p__x--8 p__y--8 bg--darkGray"}
          description={
            <div className="text-info">
              Your Artist ID is the 32 character unique ID found in your Seated
              Dashboard URL.
              <a
                target="_blank"
                href={`${config.service.assetUrl}/linked_example.png`}
                rel="noreferrer"
              >
                &nbsp;Find out more
              </a>
            </div>
          }
          icon={<Icon name="sm-info" />}
          showIcon
          closable={false}
          // closeText={<Icon width={24} height={24} name="close-outline" />}
        />

        <Field
          component={AntInput}
          name="seatedId"
          type={FieldType.input}
          labelClassName="opacity--80 font__weight--medium"
          label="Seated Artist ID"
          placeholder="Enter your Artist ID"

          //beforeSetValue={addingHttpsPrefix}
        />

        {actions}
      </Form>
    </React.Fragment>
  );
};

export default ProductEditorForm;
