import React, { useState } from 'react';
import { View, Image, Linking, Text, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';

import { MenuButton } from '../MenuButton';
import { styles } from './styles';
import { StoreType, storage } from 'src/storage';
import { Colors } from 'src/theme';
import { NAVIGATION_PAGES } from 'src/types';

import MailIcon from '../../../assets/icons/mail.svg';
import DocumentIcon from '../../../assets/icons/document.svg';
import InfoIcon from 'assets/icons/info-solid.svg';
import BellIcon from 'assets/icons/notifications/bell-solid.svg';
import SharingIcon from 'assets/icons/location-sharing.svg';
import BagIcon from 'assets/icons/bag.svg';
import OfflineIcon from 'assets/icons/map-offline.svg';
import GearIcon from 'assets/icons/gear.svg';
import ChartPieIcon from 'assets/icons/chart-pie.svg';


import { APP_VERSION } from 'src/constants';
import { SafeAreaView } from 'react-native-safe-area-context';

export const MenuDrawer = (props: any) => {
  const token = storage.get('token', StoreType.STRING) as string;
  const navigation = useNavigation();

  return (
    <>
      <SafeAreaView style={styles.container}>
        <View style={{ flex: 1 }}>
          <TouchableOpacity
            style={styles.logoContainer}
            onPress={() =>
              Linking.openURL('https://nomadmania.com/conference6').catch((err) =>
                console.error('Failed to open conference URL:', err)
              )
            }
          >
            <Image source={require('../../../assets/logo-brazil.png')} style={styles.logo} />
          </TouchableOpacity>
          <MenuButton
            label="Info"
            icon={<InfoIcon fill={Colors.DARK_BLUE} width={20} height={20} />}
            red={false}
            buttonFn={() => navigation.navigate(NAVIGATION_PAGES.INFO as never)}
          />
          <MenuButton
            label="Contact Us"
            icon={<MailIcon fill={Colors.DARK_BLUE} width={20} height={20} />}
            red={false}
            buttonFn={() => Linking.openURL('https://nomadmania.com/contact/')}
          />
          <MenuButton
            label="Terms & Conditions"
            icon={<DocumentIcon fill={Colors.DARK_BLUE} width={20} height={20} />}
            red={false}
            buttonFn={() => Linking.openURL('https://nomadmania.com/terms/')}
          />
          {token && (
            <MenuButton
              label="Notifications"
              icon={<BellIcon fill={Colors.DARK_BLUE} width={20} height={20} />}
              red={false}
              buttonFn={() =>
                // todo: add types
                // @ts-ignore
                navigation.navigate(NAVIGATION_PAGES.MENU_DRAWER, {
                  screen: NAVIGATION_PAGES.NOTIFICATIONS
                })
              }
            />
          )}
          <MenuButton
            label="Location sharing"
            icon={<SharingIcon fill={Colors.DARK_BLUE} width={20} height={20} />}
            red={false}
            buttonFn={() =>
              // @ts-ignore
              navigation.navigate(NAVIGATION_PAGES.MENU_DRAWER, {
                screen: NAVIGATION_PAGES.LOCATION_SHARING
              })
            }
          />
          <MenuButton
            label="Shop"
            icon={<BagIcon fill={Colors.DARK_BLUE} width={20} height={20} />}
            red={false}
            buttonFn={() => Linking.openURL('https://nomadmania.com/product-category/merchandise/')}
          />
          <MenuButton
            label="Offline maps"
            icon={<OfflineIcon fill={Colors.DARK_BLUE} width={20} height={20} />}
            red={false}
            buttonFn={() =>
              // @ts-ignore
              navigation.navigate(NAVIGATION_PAGES.MENU_DRAWER, {
                screen: NAVIGATION_PAGES.OFFLINE_MAPS
              })
            }
          />
          <MenuButton
            label="Data Traffic Report"
            icon={<ChartPieIcon fill={Colors.DARK_BLUE} width={20} height={20} />}
            red={false}
            buttonFn={() =>
              // @ts-ignore
              navigation.navigate(NAVIGATION_PAGES.MENU_DRAWER, {
                screen: NAVIGATION_PAGES.DATA_REPORT
              })
            }
          />

        </View>

        <View style={styles.bottomMenu}>
          {token ? (
            <MenuButton
              label="Manage account"
              icon={
                <GearIcon
                  fill={Colors.DARK_BLUE}
                  width={20}
                  height={20}
                  style={{ alignSelf: 'center' }}
                />
              }
              red={false}
              buttonFn={() =>
                // @ts-ignore
                navigation.navigate(NAVIGATION_PAGES.MENU_DRAWER, {
                  screen: NAVIGATION_PAGES.EDIT_PERSONAL_INFO
                })
              }
            />
          ) : null}

          <View style={{ gap: 6, marginTop: 16, marginBottom: 16 }}>
            <Text style={styles.bottomText}>Version {APP_VERSION}</Text>
          </View>
        </View>
      </SafeAreaView>
    </>
  );
};
