import React from 'react';
import { Form, Formik } from 'formik/dist/index';
import { customFetch } from 'utils/fetch';
import * as Yup from 'yup';

export interface userAdministrationInitialValues {
  login: string | undefined;
  firstName: string | undefined;
  surName: string | undefined;
  password: string | undefined;
  role: 'User' | 'Admin' | undefined;
}

interface userAdministrationFormProps {
  initialValues: userAdministrationInitialValues;
  children: JSX.Element;
}

const validationSchema = Yup.object().shape({});

export const UserAdministrationForm = ({
  initialValues,
  children,
}: userAdministrationFormProps) => {
  return (
    <Formik
      initialValues={initialValues}
      onSubmit={async (values, formikBag) => {
        await customFetch('user', values);
        formikBag.setSubmitting(false);
      }}
      validationSchema={validationSchema}
    >
      {({ values, errors, isSubmitting }) => (
        <Form style={{ display: 'flex', flexDirection: 'column' }}>
          {children}
        </Form>
      )}
    </Formik>
  );
};
