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

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

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

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

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

    return (
        <View>
            {editMode ? (
                <EditProfile
                    cancelEditAction={_cancelEditAction}
                    saveProfileAction={_saveProfileAction}
                    saveProfileLabel={saveProfileLabel}
                />
            ) : (
                <ViewProfile editProfileAction={() => setEditMode(true)} />
            )}
        </View>
    );
}

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

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