// Render Prop
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import { CustomInputComponent, CustomPasswordComponent } from './common/components';
import { UserService } from './services/UserService';

const Basic = () => (
    <Formik
      validate={values => {
        let errors = {};
        if (!values.email) {
          errors.email = 'Required';
        } else if (
          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
        ) {
          errors.email = 'Invalid email address';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => UserService.update(values, setSubmitting) }
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="email" name="email" component={CustomInputComponent} />
          <ErrorMessage name="email" component="div" />
          <Field type="password" name="password" component={CustomPasswordComponent} />
          <ErrorMessage name="password" component="div" />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
);

export default Basic;

class Form extends ModuleForm {
    fields: FieldsDefinitions = {
        id: 'none',
        email: 'none',
        picture_path: {
            type: 'image', transformations: 'h_200,w_200,r_max,c_fill'
        },
        first_name: 'string*',
        last_name: 'string*',
        username: 'string*',
        job_title: 'string',
        company_name: 'string',
        language: {
            type: 'select*',
            component: LanguageSelectView,
            valueProperty: 'code',
            values: supportedLanguages,
            moduleName: 'attachment'
        }
    };

    constructor() {
        super('UserForm', 'user');
    }
}

mutation(user: UserInputType!, company: CompanyInputType) {
    create_account(user: $user, company: $company) {
        user {
            id
        }
    }
}

const mutation = gql`
  mutation ($user: UserInputType!) {
    createUser(user: $user) {
      ...User
    }
  }
`;

<Frontier mutation={mutation} client={client} uiKit={ApplicationUIkit} />

<Frontier client={client} mutation={mutation} uiKit={ApplicationUIkit}>
  {
    ({ form, kit }) => {
      return (
        <form className='ui form' onSubmit={(e) => { e.preventDefault(); form.submit(); }}>
          <div>
            {kit.company()}
          </div>
          <Message
            info
            header='Is my company already registered?'
            list={[
              'If your company is already registred under a Business plan, please do register using the Business form',
            ]}
          />
          <br />
          <br />
          <div>
            {kit.email()}
          </div>
          <br />
          <div>
            {kit.firstname()}
          </div>
          <br />
          <div>
            {kit.lastname()}
          </div>
          <p>
            <input type="submit" value="Save" className="ui button" />
          </p>
        </form>
      )
    }
  }
</Frontier>