import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import GenericForm from 'components/forms/GenericForm';
import config from 'config/general';
import { Form } from 'react-final-form';
import arrayMutators from 'final-form-arrays';
import styleIdentifiers from './profile.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ProfileProps = StateProps & DispatchProps & OwnProps;

const Profile = (props: ProfileProps) => {
  const { profile, updateProfile } = props;

  const data = profile && profile.data;

  const submitData = values => {
    updateProfile({
      data: values,
    });
  };

  return (
    <div className={styles('Profile')}>
      <Form
        component={GenericForm}
        mutators={{ ...arrayMutators }}
        title="My profile"
        withHeader
        noDelete
        initialValues={data}
        fields={config.accountOptions.profileFields}
        onSubmit={submitData}
      />
    </div>
  );
};

export default Profile;
