customdrawer

/* eslint-disable react/no-unstable-nested-components */
import React from 'react';
import {
  Alert,
  FlatList,
  Image,
  Pressable,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { colors } from '../theme';
import { dummyProfilePic, width } from '../constants/constants';
import fonts from '../assets/fonts';
import Icon from 'react-native-vector-icons/Ionicons';
import Images from '../assets/Images';
import { PencilIcon } from '../assets/Icons';
import { useNavigation } from '@react-navigation/native';
import { useDispatch } from 'react-redux';
import { setLogOut } from '../redux/actions/users';
import routes from './routes';
function CustomDrawer({ navigation }) {
  const dispatch = useDispatch();
  const mainMenuArray = [
    { title: 'Home', onPress: () => { } },
    { 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: '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 (
      <>
        {/* <Text style={[styles.headingText, { marginTop: 15, marginBottom: 5 }]}>
          Others
        </Text>
        <FlatList data={otherMenuArray} renderItem={renderItem} /> */}
        <TouchableOpacity
          onPress={() => navigation?.closeDrawer()}
          style={styles.closeIconContainer}>
          <Icon name="close" size={25} color={colors.c666666} />
        </TouchableOpacity>
      </>
    );
  }
  const ListHeaderComponent = () => {
    return (
      <View style={{ alignItems: 'center', flex: 1 }}>
        <View style={styles.planContainer}>
          <Text style={styles.planText}>Membership plan</Text>
        </View>

        <Pressable
          style={styles.profileCardContainer}
          onPress={() => navigation.navigate(routes.profileStack)}
        >
          <Image
            style={{ width: width / 6, height: width / 6, borderRadius: 100 }}
            source={{ uri: dummyProfilePic }}
          />
          <View style={{ flex: 1, paddingLeft: 15 }}>
            <Text style={styles.profileHeadText}>Machille John</Text>
            <Text style={styles.profileText}>Weight loss</Text>
            <Text
              style={[styles.profileText, { fontFamily: fonts.PoppinsRegular }]}>
              +91 8475254859
            </Text>
          </View>
          <TouchableOpacity style={styles.editIconContainer}>
            <PencilIcon width={width / 20} height={width / 20} />
          </TouchableOpacity>
        </Pressable>
        <Text style={styles.headingText}>Main</Text>
      </View>
    );
  };

  const renderItem = ({ item }): React.JSX.Element => {
    return (
      <TouchableOpacity onPress={item.onPress} style={styles.itemContainer}>
        <Text style={styles.itemContainerText}>{item?.title}</Text>
        <Icon
          name={'chevron-forward'}
          // color={colors.white}
          color={colors.c434343}
          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.cf3f3f3,
    paddingTop: width / 7,
  },
  logoIcon: {
    width: width / 3,
    height: width / 2,
    resizeMode: 'contain',
    position: 'absolute',
    bottom: 0,
    right: 0,
  },
  itemContainerText: {
    fontFamily: fonts.PoppinsMedium,
    // color: colors.white,
    color: colors.c434343,
    fontSize: 16,
  },
  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: 16,
    // color: colors.white,
    color: colors.c434343
  },
  profileCardContainer: {
    width: width / 1.1,
    height: width / 4.8,
    backgroundColor: colors.white,
    borderRadius: 10,
    marginTop: 10,
    marginBottom: width / 12,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 15,
  },
  profileHeadText: { fontFamily: fonts.PoppinsMedium, color: colors.black },
  profileText: {
    fontFamily: fonts.PoppinsMedium,
    fontSize: 12,
    color: colors.c999999,
  },
  headingText: {
    fontFamily: fonts.PoppinsRegular,
    fontSize: 12,
    // color: colors.white,
    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,
  },
});