import { StyleSheet, Text, View, ScrollView, FlatList } from 'react-native'
import React, { useState } from 'react'
import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics';
import colors from '../../constants/colors';
import fonts from '../../constants/fonts';
import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader';
import SettingsButton from '../../components/atoms/Buttons/SettingsButton';
import EditButton from '../../components/atoms/Buttons/EditButton';
import ProfileImageCard from '../../components/molecules/Cards/ProfileImageCard';
import { ToggleButton } from 'react-native-paper';
import HorizontalNewsCardVariant from '../../components/molecules/Cards/HorizontalNewsCardVariant';

const profileTabs = ['Recently Read', 'Others'];

const ProfilePage = props => {

  const { navigation, route } = props

  const [categoryValue, setCategoryValue] = useState(
    profileTabs[0].toLowerCase(),
  );

  const styles = StyleSheet.create({
    profileContainer: {
      backgroundColor: colors().dominant,
    },

    metricsCountContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-evenly',
      paddingVertical: verticalScale(20),
      paddingHorizontal: horizontalScale(16),
    },
    metricsCard: {},
    metricsTitle: {
      color: colors().primaryColor,
      fontFamily: fonts.type.medium,
      fontSize: 16,
    },
    metricsCount: {
      color: colors().recessive,
      fontFamily: fonts.type.semibold,
      fontSize: moderateScale(16),
      textAlign: 'center',
    },
    verticalLine: {
      height: '100%',
      width: 2,
      backgroundColor: colors().grayShade_400,
    },
    underlinePillContainer: {
      paddingVertical: verticalScale(8),
      flexDirection: 'row',
      alignItems: 'space-between',
      justifyContent: 'space-around',
      paddingHorizontal: horizontalScale(16),
    },
    selectedPillText: {
      fontFamily: fonts.type.semibold,
      fontSize: moderateScale(12),
      color: colors().recessive,
      borderBottomWidth: verticalScale(4),
      borderBottomColor: colors().primaryColor,
      borderRadius: 0,
    },
    pillText: {
      fontFamily: fonts.type.semibold,
      fontSize: moderateScale(12),
      color: colors().grayShade_100,
    },
    underlinePill: {
      width: 'auto',
    },
    profileCardContainer: {
      paddingHorizontal: horizontalScale(16),
      paddingBottom: verticalScale(16)
    },
  });


  return (
    <View style={styles.profileContainer}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <NewscoutTitleHeader
          title="My Profile"
          backButtonShown={true}
          onBackClick={() => navigation.goBack()}>
          <View style={{ flexDirection: 'row', gap: 16 }}>
            <SettingsButton onPress={() => navigation.navigate('SettingsPage')} />
            <EditButton
              onPress={() =>
                navigation.navigate('Profile', { screen: 'EditProfile' })
              }
            />
          </View>
        </NewscoutTitleHeader>

        <ProfileImageCard onEdit={() => navigation.navigate('Profile', { screen: 'EditProfile' })} />
        <Text
          style={{
            alignSelf: 'center',
            paddingVertical: 8,
            fontFamily: fonts.type.semibold,
            fontSize: moderateScale(14),
            color: colors().recessive,
          }}>
          Semina Gurung
        </Text>
        <Text
          style={{
            paddingHorizontal: horizontalScale(16),
            fontFamily: fonts.type.regular,
            fontSize: moderateScale(12),
            color: colors().recessive,
            textAlign:'center'
          }}>
          The reason behind their disappointment is that iPhone users have
          been..
        </Text>
        <View style={styles.metricsCountContainer}>
          <View style={styles.metricsCard}>
            <Text style={styles.metricsCount}>158</Text>
            <Text style={styles.metricsTitle}>Bookmarks</Text>
          </View>
          <View style={styles.verticalLine}></View>
          <View style={styles.metricsCard}>
            <Text style={styles.metricsCount}>158</Text>
            <Text style={styles.metricsTitle}>Followers</Text>
          </View>
          <View style={styles.verticalLine}></View>
          <View style={styles.metricsCard}>
            <Text style={styles.metricsCount}>158</Text>
            <Text style={styles.metricsTitle}>Following</Text>
          </View>
        </View>
        <View style={styles.underlinePillContainer}>
          {/* <ScrollView horizontal showsHorizontalScrollIndicator={false}> */}
          <ToggleButton.Group onValueChange={value => setCategoryValue(value)}>
            {profileTabs.map(tab => {
              let valueId = tab.toLowerCase();
              return (
                <ToggleButton
                  icon={() => (
                    <Text
                      style={[
                        valueId === categoryValue
                          ? styles.selectedPillText
                          : styles.pillText,
                        {
                          paddingHorizontal: horizontalScale(11),
                          fontSize: moderateScale(16),
                        },
                      ]}>
                      {tab}
                    </Text>
                  )}
                  style={[styles.underlinePill]}
                  value={valueId}
                />
              );
            })}
          </ToggleButton.Group>
          {/* </ScrollView> */}
        </View>
        <View style={styles.profileCardContainer}>
          <FlatList
            scrollEnabled={false}
            showsVerticalScrollIndicator={false}
            ItemSeparatorComponent={() => (
              <View style={{ height: verticalScale(8) }}></View>
            )}
            // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
            ListHeaderComponent={() => (
              <View style={{ height: verticalScale(16) }}></View>
            )}
            data={[{}, {}, {}]}
            renderItem={item => <HorizontalNewsCardVariant onPress={true} />}
            keyExtractor={item => item.index}
          />
        </View>
      </ScrollView>
    </View>
  )
}

export default ProfilePage

const styles = StyleSheet.create({})