import { StyleSheet, Text, View, ScrollView, FlatList, TouchableWithoutFeedback, Touchable } 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';
import PersonCard from '../../components/molecules/Cards/PersonCard';
import { FlatGrid } from 'react-native-super-grid';

const profileTabs = ["Bookmarks", "Followers", "Following"];

const ProfilePage = props => {

  const { navigation, route } = props

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

  // const [cardData, setCardData] = useState({
  //   bookmarks: [{}],
  //   followers: [{}],
  //   following: [{}],
  // })
  const [bookmarks, setBookmarks] = useState([{}, {}])
  const [following, setFollowing] = useState([{}, {}, {}])
  const [followers, setFollowers] = useState([{}, {}, {}])
  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().primaryColor,
      borderRadius: 0,
    },
    pillText: {
      fontFamily: fonts.type.semibold,
      fontSize: moderateScale(12),
      color: colors().grayShade_300,
    },
    underlinePill: {
      width: 'auto',
      minHeight: 64,
      marginVertical: verticalScale(16),
    },
    profileCardContainer: {
      paddingHorizontal: horizontalScale(16),
      paddingBottom: verticalScale(16),
      justifyContent: 'center',
      alignItems: 'center',
      minHeight: '100%',
      backgroundColor: colors().dominant

    },
  });
  const CardContent = ({ category }) => {
    switch (category) {
      case "bookmarks":
        return <FlatList
          scrollEnabled={false}
          contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center' }}
          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={bookmarks}
          renderItem={item => <HorizontalNewsCardVariant onPress={true} />}


        />
      case "followers":
        return <FlatList
          scrollEnabled={false}
          contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', paddingVertical: verticalScale(8), columnGap: moderateScale(8) }}
          showsVerticalScrollIndicator={false}
          ItemSeparatorComponent={() => (
            <View style={{ height: verticalScale(16) }}></View>
          )}
          // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
          // ListHeaderComponent={() => (
          //   <View style={{ height: verticalScale(16) }}></View>
          // )}
          data={followers}
          renderItem={item => <PersonCard
            onButtonPress={() => { }}
            personName={"Semina"}

            followerCount={123}
            buttonText={"Remove"}
          />}
          keyExtractor={item => item.index}

        />
      case "following":
        return <FlatList
        scrollEnabled={false}
        contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', paddingVertical: verticalScale(8), columnGap: moderateScale(8) }}
        showsVerticalScrollIndicator={false}
        ItemSeparatorComponent={() => (
          <View style={{ height: verticalScale(16) }}></View>
        )}
        // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
        // ListHeaderComponent={() => (
        //   <View style={{ height: verticalScale(16) }}></View>
        // )}
        data={following}
        renderItem={item => <PersonCard
          onButtonPress={() => { }}
          personName={"Semina"}

          followerCount={123}
          buttonText={"Follow"}
        />}
        keyExtractor={item => item.index}

      />
      default:
        break;
    }
  }
  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'
          }}>
          semina@test.com
        </Text>
        <View style={styles.underlinePillContainer}>
          {/* <ScrollView horizontal showsHorizontalScrollIndicator={false}> */}
          <ToggleButton.Group onValueChange={value => setCategoryValue(value)}>
            {profileTabs.map(tab => {
              let valueId = tab.toLowerCase();
              return (
                <ToggleButton
                  icon={() => (
                    <View style={{ alignItems: 'center', }}>
                      <Text style={{
                        fontFamily: fonts.type.semibold,
                        fontSize: moderateScale(16),
                        color: colors().recessive
                      }}>0</Text>
                      <Text
                        style={[
                          valueId === categoryValue
                            ? styles.selectedPillText
                            : styles.pillText,
                          {


                            fontSize: moderateScale(16),
                          },
                        ]}>
                        {tab}
                      </Text>
                    </View>
                  )}
                  style={[styles.underlinePill]}
                  value={valueId}
                />
              );
            })}
          </ToggleButton.Group>
        </View>
        <View style={styles.profileCardContainer}>
          <CardContent category={categoryValue} />
          {/* <FlatList
            scrollEnabled={false}
            contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap' }}
            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({})