import {Image, StyleSheet, Text, View, ScrollView} from 'react-native';
import React, {useState} from 'react';
import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
import fonts from '../theme/fonts';
import images from '../assets/images/images';
import colors from '../theme/colors';
import FormTextInput from '../components/molecules/FormTextInput';
import {capitalize} from '../utils/Constants/functions';
import SecondaryButton from '../components/organisms/Buttons/SecondaryButton';
import ThemedTextButton from '../components/organisms/Buttons/ThemedTextButton';

const PROFILE_SIZE = 128;

const EditProfilePage = props => {
  const {navigation, route, name, profileQuote, metrics} = props;

  const [profileData, setProfileData] = useState({
    username: '',
    fullname: '',
    email: '',
    phone: '',
    about: '',
  });

  return (
    <View style={styles.container}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <NewscoutTitleHeader
          title={'Edit Profile'}
          backButtonShown={true}
          onBackClick={() => navigation.goBack()}
          titleStyle={{fontFamily: fonts.type.medium}}
        />
        <View style={styles.profileImageContainer}>
          <Image source={images.imageCard} style={styles.profileImage}></Image>
        </View>
        <View style={{paddingHorizontal: 16, gap: 4}}>
          {Object.keys(profileData).map(key => (
            <FormTextInput
              title={capitalize(key)}
              placeholder={capitalize(key)}
              value={profileData[key]}
              onChange={text =>
                setProfileData(prev => ({...prev, [key]: text}))
              }
            />
          ))}
          <ThemedTextButton
            title={'Continue'} 
            onPress={true}
            theme={'secondary-contained'}
            buttonStyle={{
              marginVertical: 16,
              width:'auto'
            }}
        />
        </View>
        
      </ScrollView>
    </View>
  );
};

export default EditProfilePage;

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.white,
    height: '100%',
  },
  profileImageContainer: {
    paddingVertical: 16,
    alignItems: 'center',
  },
  profileImage: {
    borderRadius: PROFILE_SIZE,
    height: PROFILE_SIZE,
    width: PROFILE_SIZE,
  },
});