customDrawer

/* eslint-disable react/no-unstable-nested-components */
import React, { useEffect } from 'react';
import {
  FlatList,
  Image,
  Pressable,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { colors } from '../theme';
import { Strings, width } from '../constants/constants';
import fonts from '../assets/fonts';
import Icon from 'react-native-vector-icons/Ionicons';
import Images from '../assets/Images';
import { GuestUserIcon, PencilIcon } from '../assets/Icons';
import { useDispatch, useSelector } from 'react-redux';
import { setLogOut, storeUserDetails } from '../redux/actions/users';
import routes from './routes';
import { getUserProfile } from '../api';
import { ShowErrorMessage } from '../component/common/showErrorMessage';
import { IMAGE_URL } from '../api/Urls';
import { fontSize } from '../utils/fontUtils';
function CustomDrawer({ navigation }) {
  const dispatch = useDispatch();
  const { user, userType } = useSelector(store => store?.userDetails)

  useEffect(() => {
    getUserProfileData()
  }, [])

  const getUserProfileData = () => {
    getUserProfile().then(val => {
      if (val.data) {
        dispatch(storeUserDetails(val.data.data));

      } else {
        ShowErrorMessage('something went wrong');
      }
    }).catch(err => console.log(err))
  }



  const mainMenuArray = [
    { title: 'Home', onPress: () => navigation.navigate(routes.statBurnStack) },
    { title: 'Track your Activity', onPress: () => navigation.navigate(routes.trackActivityStack) },
    { title: 'Connected Device and Apps', onPress: () => navigation.navigate(routes.connectDevicesStack) },
    { title: 'All Reports', onPress: () => navigation.navigate(routes.allReportsStack) },
    { title: 'Expert Panel', onPress: () => navigation.navigate(routes.expertPanelStack) },
    { title: 'Share with Friends', onPress: () => navigation.navigate(routes.shareAppStack) },
    { title: 'Blogs', onPress: () => navigation.navigate(routes.blogsStack) },
    { title: 'Order History', onPress: () => { navigation?.navigate(routes.orderHistoryStack) } },
    { title: 'Call Request', onPress: () => navigation.navigate(routes.callRequest) },
    { title: 'Collaboration', onPress: () => navigation.navigate(routes.collaboration), isCollabIcon: true },
    {
      title: 'Settings',
      onPress: () => navigation.navigate(routes.settingsStack),
    },
  ];
  const otherMenuArray = [
    { title: 'Order History', onPress: () => { navigation?.navigate(routes.orderHistoryStack) } },
    { title: 'Call Request', onPress: () => navigation.navigate(routes.callRequest) },
    {
      title: 'Settings',
      onPress: () => navigation.navigate(routes.settingsStack),
    },
  ];
  function LogOut() {
    dispatch(setLogOut());
  }
  function ListFooterComponent() {
    return (
      <>
        <TouchableOpacity
          onPress={() => navigation?.closeDrawer()}
          style={styles.closeIconContainer}>
          <Icon name="close" size={25} color={colors.c666666} />
        </TouchableOpacity>
      </>
    );
  }

  const ListHeaderComponent = () => {
    const subscription_name = userType == Strings.GUEST ? "Guest" : userType == Strings.FREE ? "Free Plan" : user?.subscription[0]?.subscription_name

    return (
      <View style={styles.headerContainer}>
        <View style={styles.planContainer}>
          <Text style={styles.planText}>Membership plan</Text>
        </View>

        <Pressable
          style={styles.profileCardContainer}
          onPress={() => navigation.navigate(routes.profileStack)}>
          {user?.profile_photo ?
            <Image style={styles.userImage} source={{ uri: IMAGE_URL + user?.profile_photo }} /> :
            <View style={styles.geustUserIcon} >
              <GuestUserIcon />
            </View>
          }
          <View style={styles.userNameContainer}>
            <Text style={styles.profileHeadText}>{user?.username ?? 'Guest'}</Text>
            <Text style={styles.profileText}>{subscription_name}</Text>
            <Text
              style={[styles.profileText, { fontFamily: fonts.PoppinsRegular }]}>
              {user?.mobile_number}
            </Text>
          </View>
          <View style={styles.editIconContainer}>
            <PencilIcon width={width / 20} height={width / 20} />
          </View>
        </Pressable>
        <Text style={styles.headingText}>Main</Text>
      </View>
    );
  };

  const renderItem = ({ item }): React.JSX.Element => {
    if (item.isCollabIcon && !user?.isFromPartner) {
      return null;
    }
    const { onPress, title } = item;
    const partnerLogo = user?.partner?.logo;

    return (
      <TouchableOpacity onPress={onPress} style={styles.itemContainer}>
        <View style={styles.flexCenter}>
          <Text style={styles.itemContainerText}>{title}</Text>
          {item.isCollabIcon && (
            <Image
              style={styles.collabIcon}
              source={{ uri: IMAGE_URL + partnerLogo }}
            />
          )}
        </View>
        <Icon name={'chevron-forward'} color={colors.c666666} size={18} />
      </TouchableOpacity>
    );
  };



  return (
    <View style={styles.container}>
      {/* <StatusBar
        translucent
        backgroundColor={'transparent'}
        barStyle={'dark-content'}
      /> */}
      <FlatList
        showsVerticalScrollIndicator={false}
        style={{ alignSelf: 'center' }}
        ListHeaderComponent={ListHeaderComponent}
        ListFooterComponent={ListFooterComponent}
        data={mainMenuArray}
        renderItem={renderItem}
      />
      <Image style={styles.logoIcon} source={Images.toneopicon} />
    </View>
  );
}
export default CustomDrawer;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor: colors.green,
    backgroundColor: colors.WHITE_F3F3F3,
    paddingTop: width / 7,
  },
  logoIcon: {
    width: width / 3,
    height: width / 2,
    resizeMode: 'contain',
    position: 'absolute',
    bottom: 0,
    right: 0,
  },
  itemContainerText: {
    fontSize: fontSize.fs16,
    fontFamily: fonts.PoppinsMedium,
    color: colors.c666666,
  },
  itemContainer: {
    width: width / 1.1,
    height: width / 10,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  planContainer: {
    width: width / 1.1,
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 5,
  },
  planText: {
    fontFamily: fonts.PoppinsMedium,
    fontSize: fontSize.fs16,
    // color: colors.white,
    color: colors.c434343,
  },
  profileCardContainer: {
    width: width / 1.1,
    height: width / 4.8,
    // backgroundColor: colors.white,
    backgroundColor: colors.green,
    borderRadius: 10,
    marginTop: 10,
    marginBottom: width / 12,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 15,
  },
  profileHeadText: {
    fontFamily: fonts.PoppinsMedium,
    color: colors.white
  },
  profileText: {
    fontFamily: fonts.PoppinsMedium,
    fontSize: fontSize.fs12,
    color: colors.white,
    width: width / 2,
    marginVertical: 1
  },
  headerContainer: {
    alignItems: 'center', flex: 1 
  },
  headingText: {
    fontFamily: fonts.PoppinsRegular,
    fontSize: fontSize.fs12,
    color: colors.c999999,
    textAlign: 'left',
    width: width / 1.1,
  },
  closeIconContainer: {
    width: width / 7,
    height: width / 7,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: width / 10,
    backgroundColor: colors.white,
    borderRadius: 100,
    alignSelf: 'center',
  },
  editIconContainer: {
    width: width / 12,
    height: width / 12,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.cf9f9f9,
    borderRadius: 100,
  },
  collabIcon: {
    height: 20,
    resizeMode: 'contain',
    width: 35,
    marginLeft: 10,
  },
  flexCenter: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  userNameContainer:{ 
    flex: 1, 
    paddingLeft: 15 
  },
  profilePicture: {
    width: width / 6, height: width / 6, borderRadius: 100
  },
  geustUserIcon: {
    width: width / 6,
    height: width / 6,
    backgroundColor: colors.white,
    borderRadius: 100,
    overflow: 'hidden',
    paddingTop: 5
  },
  userImage: {
    width: width / 6,
    height: width / 6,
    borderRadius: 100
  }
});