import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';

import CreateProfile from './CreateProfile.js';
import EditProfile from './EditProfile.container.js';
import ViewProfile from './ViewProfile.container.js';

export default function Profile({
    cancelEditAction,
    isGuidedRegistration,
    isInEditMode,
    saveProfileAction,
}) {
    const [editMode, setEditMode] = useState(isInEditMode);

    const _cancelEditAction = () => {
        setEditMode(false);
        cancelEditAction();
    };

    const _saveProfileAction = (profile) => {
        setEditMode(false);
        saveProfileAction(profile);
    };

    return (
        <View>
            {!editMode && (
                <ViewProfile editProfileAction={() => setEditMode(true)} />
            )}
            {editMode && isGuidedRegistration && (
                <CreateProfile
                    cancelEditAction={_cancelEditAction}
                    saveProfileAction={_saveProfileAction}
                />
            )}
            {editMode && !isGuidedRegistration && (
                <EditProfile
                    cancelEditAction={_cancelEditAction}
                    saveProfileAction={_saveProfileAction}
                />
            )}
        </View>
    );
}

Profile.propTypes = {
    cancelEditAction: PropTypes.func.isRequired,
    isGuidedRegistration: PropTypes.bool,
    isInEditMode: PropTypes.bool,
    saveProfileAction: PropTypes.func.isRequired,
};

Profile.defaultProps = {
    isGuidedRegistration: false,
    isInEditMode: false,
    saveProfileLabel: null,
};