import { Col, Row } from "antd";
import { AntInput, FieldType } from "components/Form/FormItem";
import { AntInputPriceNumber } from "components/Form/FormItemPriceNumber";
import { ProductEditorModalFormValues } from "components/ProductEditorModal/ProductEditorModal";
import { Field, Form, FormikProps } from "formik";
import React, { useCallback, useMemo } from "react";
import { isMobile } from "react-device-detect";
import { addingHttpsPrefix } from "utils/string";
import CurrencySelect from "../../../../pages/CurrencySelect";
import { Paragraph } from "../../../Typography";

interface ProductEditorFormProps {
  actions?: JSX.Element;
  currency?: string;
  setCurrency?: (value: string) => void;
}

const ProductEditorForm: React.FC<
  FormikProps<ProductEditorModalFormValues> & ProductEditorFormProps
> = ({
  handleSubmit,
  values,
  setFieldValue,
  actions,
  currency,
  setCurrency,
}) => {
  const handleChangeCurrency = useCallback(
    (value: string) => {
      setCurrency?.(value);
      values?.price && setFieldValue("price", values?.price);
    },
    [values?.price]
  );
  return (
    <React.Fragment>
      <Form className="product-editor-form" onSubmit={handleSubmit}>
        <Field
          component={AntInput}
          name="url"
          type={FieldType.input}
          description="Product URL"
          placeholder="https://"
          beforeSetValue={addingHttpsPrefix}
        />
        <Field
          component={AntInput}
          name="title"
          type={FieldType.input}
          description="Title"
          placeholder="Enter title of the link"
        />
        <Row gutter={16}>
          <Col
            xs={isMobile ? 24 : undefined}
            className={!isMobile ? "width--192 p__b--24" : "p__b--24"}
          >
            <Paragraph className="m__b--8">Currency</Paragraph>
            <CurrencySelect value={currency} onChange={handleChangeCurrency} />
          </Col>
          <Col
            xs={isMobile ? 24 : undefined}
            flex={!isMobile ? "1" : undefined}
          >
            <Field
              component={AntInputPriceNumber}
              name="price"
              type={FieldType.inputNumber}
              description="Price"
              placeholder="Enter amount"
              defaultValue={values.price}
              prefix={null}
              decimalsLimit={2}
              value={values.price}
            />
          </Col>
        </Row>

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

export default ProductEditorForm;
