import { Image, ScrollView, StyleSheet, Text, View } from 'react-native'
import React, { useState } from 'react'
import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader'
import ProfileImageCard from '../../components/molecules/Cards/ProfileImageCard'
import FormTextInput from '../../components/atoms/Input/FormTextInput'
import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics'
import colors from '../../constants/colors'
import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'
import { Modal, PaperProvider, Portal } from 'react-native-paper'
import LoadingScreen from '../../components/organisms/Sections/LoadingScreen'
import images from '../../assets/images/images'
import fonts from '../../constants/fonts'

const FillProfile = props => {

  const {
    navigation,
    route
  } = props

  const styles = StyleSheet.create({
    container: {
      height: '100%',
      backgroundColor: colors().dominant
    },
    inputContainer: {
      paddingHorizontal: horizontalScale(16),
      backgroundColor: colors().dominant,
      gap: verticalScale(4),
      height: '100%'
    },
    modalContainerStyle: {
      padding: moderateScale(8),
      width: 'auto',
      marginHorizontal: horizontalScale(32),
      backgroundColor: colors().dominant,
      borderRadius: moderateScale(4)
    },
    modalImageContainer: {
      alignItems: 'center'

    },
    modalImage: {
      width: 170,
      height: 185
    },
    modalHeadline: {
      color: colors().recessive,
      fontFamily: fonts.type.medium,
      fontSize: moderateScale(28),
      textAlign: 'center',
      paddingVertical: verticalScale(16)
    },
    modalDescription: {
      color: colors().recessive,
      fontFamily: fonts.type.regular,
      fontSize: moderateScale(16),
      textAlign: 'center',
      paddingBottom: verticalScale(16)
    }
  })

  const [visible, setVisible] = useState(false);
  const showModal = () => setVisible(true);
  const hideModal = () => setVisible(false);

  // For Login prompt
  const [isDimissed, setDismissed] = useState(false);

  const [createdSuccessful, setcreatedSucessful] = useState(false)

  const navigateToLogin = () => {
    hideModal()
    navigation.reset({
      index: 0,
      routes: [{name: 'SignIn'}]
    })
  }
  return (
    <PaperProvider>
      <View style={styles.container}>
        <Portal>
          <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={styles.modalContainerStyle} >
            {createdSuccessful == null ?
              <LoadingScreen containerHeight={verticalScale(256)} /> :
              createdSuccessful === true ?
                <View style={styles.modalContainerStyle}>
                  <View style={styles.modalImageContainer}>
                    <Image source={images.account_successful} style={styles.modalImage} />
                  </View>
                  <Text style={styles.modalHeadline}>Great!</Text>
                  <Text style={styles.modalDescription}>Your account has been created successfully</Text>
                  <ThemedTextButton title={"Continue"} theme={'secondary'} onPress={navigateToLogin} />
                </View> :
                <View style={styles.modalContainerStyle}>
                  <View style={styles.modalImageContainer}>
                    <Image source={images.account_not_successful} style={styles.modalImage} />
                  </View>
                  <Text style={styles.modalHeadline}>Error!</Text>
                  <Text style={styles.modalDescription}>Your account has not been created. Some Error Occured</Text>
                  <ThemedTextButton title={"Continue"} theme={'secondary'} onPress={hideModal} />
                </View>
            }
          </Modal>
        </Portal>
        <ScrollView >
          <View>
            <NewscoutTitleHeader title={"Fill Profile"} backButtonShown onBackClick={() => navigation.goBack()}>
              <View></View>

            </NewscoutTitleHeader>
            <ProfileImageCard />
            <View style={styles.inputContainer}>
              <FormTextInput label={"Username"} placeholder={"Username"} />
              <FormTextInput label={"Fullname"} placeholder={"Fullname"} />
              <FormTextInput label={"Email"} placeholder={"Email"} />
              <FormTextInput label={"Phone"} placeholder={"Phone"} />
              <FormTextInput label={"About"} placeholder={"About"} multiline/>
              <View style={{ paddingVertical: verticalScale(8) }}>
              </View><ThemedTextButton title={"Continue"} theme={'secondary'} onPress={() => { showModal(); setcreatedSucessful(true) }} />
            </View>
          </View>

        </ScrollView>
      </View>
    </PaperProvider>
  )
}

export default FillProfile

