import { SafeAreaView } from 'react-native-safe-area-context';
import { TopBar, ImageUpload } from './components';
import { KeyboardAvoidingView, Platform, ScrollView, View } from 'react-native';
import { Controller } from 'react-hook-form';
import { useEditUser } from './hooks';
import FormInput from '../../../components/FormInput';
import { CHARACTER_LIMIT } from '../../../../core/constants';
import { ElementID, PageID } from '../../../enums';
import ActionButton from '../../../elements/ActionButton';
export function EditUser({
  userId
}) {
  const {
    user,
    styles,
    isDirty,
    isValid,
    control,
    onSubmit,
    isSubmitting,
    handleSubmit,
    accessibilityId,
    isDisplayNameDisabled
  } = useEditUser(userId);
  return /*#__PURE__*/React.createElement(SafeAreaView, {
    testID: accessibilityId,
    style: styles.container
  }, /*#__PURE__*/React.createElement(TopBar, {
    isFormDirty: isDirty
  }), /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
    style: styles.keyboardAvoidingView,
    behavior: Platform.OS === 'ios' ? 'padding' : 'height'
  }, /*#__PURE__*/React.createElement(ScrollView, {
    contentContainerStyle: styles.contentContainer
  }, /*#__PURE__*/React.createElement(Controller, {
    name: "image",
    control: control,
    render: ({
      field: {
        onChange,
        value
      }
    }) => /*#__PURE__*/React.createElement(ImageUpload, {
      user: user,
      value: value,
      onChange: onChange
    })
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.inputContainer
  }, /*#__PURE__*/React.createElement(Controller, {
    name: "displayName",
    control: control,
    render: ({
      field: {
        onChange,
        onBlur,
        value
      }
    }) => /*#__PURE__*/React.createElement(FormInput, {
      value: value,
      onBlur: onBlur,
      multiline: false,
      onChangeText: onChange,
      placeholder: "Enter your display name",
      pageId: PageID.edit_user_profile_page,
      maxLength: CHARACTER_LIMIT.USER_DISPLAY_NAME,
      elementId: ElementID.user_display_name_title,
      editable: !isDisplayNameDisabled
    })
  })), /*#__PURE__*/React.createElement(View, {
    style: styles.inputContainer
  }, /*#__PURE__*/React.createElement(Controller, {
    name: "description",
    control: control,
    render: ({
      field: {
        onChange,
        onBlur,
        value
      }
    }) => /*#__PURE__*/React.createElement(FormInput, {
      optional: true,
      multiline: true,
      value: value,
      onBlur: onBlur,
      onChangeText: onChange,
      placeholder: "Enter your description",
      pageId: PageID.edit_user_profile_page,
      elementId: ElementID.user_about_title,
      maxLength: CHARACTER_LIMIT.USER_DESCRIPTION
    })
  }))), /*#__PURE__*/React.createElement(View, {
    style: styles.submitButtonContainer
  }, /*#__PURE__*/React.createElement(ActionButton, {
    onPress: handleSubmit(onSubmit),
    pageId: PageID.edit_user_profile_page,
    elementId: ElementID.update_user_profile_button,
    disabled: !isDirty || !isValid || isSubmitting
  }))));
}
//# sourceMappingURL=Edit.js.map