import React from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import R from '../../assets/R';
import {HEIGHTXD, getFontXD, WIDTHXD} from '../../Config/Functions';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {
  AccountVerification,
  METHODPAY,
  SERVICECUSTOMER,
  FEEDBACK,
  SETTING,
} from '../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';

const menus = [
  {
    id: '1',
    title: 'Xác minh tài khoản',
    icon: R.images.iconUserCheck,
    screen: AccountVerification,
  },
  {
    id: '2',
    title: 'Cài đặt phương thức thanh toán',
    icon: R.images.iconMethodPay,
    screen: METHODPAY,
  },
  {
    id: '3',
    title: 'Liên hệ với dịch vụ khách hàng',
    icon: R.images.iconPhone,
    screen: SERVICECUSTOMER,
  },
  {
    id: '4',
    title: 'Phản hồi',
    icon: R.images.iconMess,
    screen: FEEDBACK,
  },
  {
    id: '5',
    title: 'Cài đặt',
    icon: R.images.iconSetting,
    screen: SETTING,
  },
];

const Drawer = (props) => {
  const navigate = useNavigation();
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Image source={R.images.avartar} style={styles.imgAvatar} />
        <Text style={styles.txtTitle}>NGUYEN VAN A</Text>
      </View>

      <View style={styles.body}>
        {menus.map((e) => (
          <TouchableOpacity
            onPress={() => {
              navigate.navigate(e.screen);
              props.toggleModal();
            }}
            key={e.id}
            style={styles.containerItem}>
            <Image source={e.icon} style={styles.imgIcon} />
            <Text style={styles.txtTitle}>{e.title}</Text>
          </TouchableOpacity>
        ))}
      </View>

      <TouchableOpacity
        onPress={() => console.log('Hello')}
        style={styles.footer}>
        <Icon name={'logout'} size={25} color={'#F81515'} />
        <Text style={styles.txtTitle}>Đăng xuất</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  header: {
    paddingVertical: 10,
    borderWidth: 1,
    borderRadius: WIDTHXD(64),
    borderColor: '#C9D3FF',
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 10,
  },
  body: {
    flex: 1,

    marginVertical: 30,
  },
  imgAvatar: {
    width: WIDTHXD(140),
    height: WIDTHXD(140),
    borderRadius: WIDTHXD(100),
  },
  imgIcon: {
    width: WIDTHXD(62),
    height: HEIGHTXD(52),
    resizeMode: 'contain',
  },
  txtTitle: {
    fontSize: getFontXD(36),
    marginLeft: 10,
    color: '#0C0D2C',
  },
  footer: {
    paddingVertical: 10,
    backgroundColor: '#EEEEEE',
    borderRadius: WIDTHXD(75),
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  containerItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 10,
    borderRadius: WIDTHXD(75),

    paddingVertical: 10,
    paddingHorizontal: 10,
  },
});

export default Drawer;