import { useTranslation } from "react-i18next";
import { Form, Formik, FormikConfig, FormikErrors, FormikProps } from "formik";
import { Button, Divider } from "@mantine/core";
import { cleanEmptyStrings } from "./cleanEmptyStrings";

//formik is defined as 
//export declare function Formik<Values extends FormikValues = FormikValues, ExtraProps = {}>(props: FormikConfig<Values> & ExtraProps): React.JSX.Element;
//we just want to proxy it basically
export function FormikForm<Values extends object>({
  data = {} as Values,
  onSubmit,
  submitText = "Submit",
  schema,
  onDelete = null,
  closeModal = null,
  createForm = null,
  sendEmptyKeys = null,
  children,
  ...props
}: Omit<FormikConfig<Values>, "initialValues"> & {
  data?: Values;
  submitText?: string;
  schema?: any;
  onDelete?: () => void;
  closeModal?: () => void;
  createForm?: (values, handleChange, errors, touched) => React.ReactNode;
  sendEmptyKeys?: Set<string> | string[];
  children?: React.ReactNode;
}): JSX.Element {
  const { t } = useTranslation();

  const handleCleanSubmit = (values: Values, formikHelpers: any) => {
    const cleaned = cleanEmptyStrings(values, sendEmptyKeys);
    return onSubmit(cleaned, formikHelpers);
  };

  return <Formik<Values>
    initialValues={data}
    onSubmit={handleCleanSubmit}
    validationSchema={schema}
    {...props}
  >
    {({ values, handleChange, errors, touched, ...other }) => (
      <Form>
        {createForm && createForm(values, handleChange, errors, touched)}
        {children}
        <Divider my="md" />
        <div tw="flex justify-center items-center">
          {onDelete && <Button onClick={onDelete} color="red">{t("Delete")}</Button>}
          {closeModal && <Button onClick={() => closeModal()}>{t("Close")}</Button>}
          <Button type="submit">{submitText}</Button>
        </div>
      </Form>
    )}
  </Formik>;
}