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

import { WarningModal } from '../WarningModal';
import { MenuButton } from '../MenuButton';
import { styles } from './styles';
import { StoreType, storage } from 'src/storage';
import { useDeleteUserMutation } from '@api/app';
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 ExitIcon from '../../../assets/icons/exit.svg';
import UserXMark from '../../../assets/icons/user-xmark.svg';
import InfoIcon from 'assets/icons/info-solid.svg';

import { APP_VERSION, FASTEST_MAP_HOST } from 'src/constants';
import { useNotification } from 'src/contexts/NotificationContext';

export const MenuDrawer = (props: any) => {
  const { mutate: deleteUser } = useDeleteUserMutation();
  const token = storage.get('token', StoreType.STRING) as string;
  const navigation = useNavigation();
  const [modalInfo, setModalInfo] = useState({
    visible: false,
    type: 'confirm',
    message: '',
    action: () => {}
  });
  const { updateNotificationStatus } = useNotification();

  const openModal = (type: string, message: string, action: any) => {
    setModalInfo({
      visible: true,
      type,
      message,
      action
    });
  };

  const closeModal = () => {
    setModalInfo({ ...modalInfo, visible: false });
  };

  const handleLogout = () => {
    storage.remove('token');
    storage.remove('uid');
    storage.remove('currentUserData');
    storage.remove('visitedTilesUrl');
    storage.remove('filterSettings');
    updateNotificationStatus();
    navigation.dispatch(
      CommonActions.reset({
        index: 1,
        routes: [{ name: NAVIGATION_PAGES.WELCOME }]
      })
    );
  };

  const handleDeleteAccount = () => {
    deleteUser({ token }, { onSuccess: handleLogout });
  };

  return (
    <>
      <View style={styles.container}>
        <View style={{ flex: 1 }}>
          <View style={styles.logoContainer}>
            <Image source={require('../../../assets/logo-ua.png')} style={styles.logo} />
          </View>
          <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/')}
          />
        </View>

        <View style={styles.bottomMenu}>
          {token ? (
            <>
              <MenuButton
                label="Logout"
                icon={<ExitIcon fill={Colors.RED} width={20} height={20} />}
                red={true}
                buttonFn={() =>
                  openModal('confirm', 'Are you sure you want to logout?', handleLogout)
                }
              />
              <MenuButton
                label="Delete account"
                icon={<UserXMark fill={Colors.RED} width={20} height={20} />}
                red={true}
                buttonFn={() =>
                  openModal(
                    'confirm',
                    'Are you sure you want to delete your account?',
                    handleDeleteAccount
                  )
                }
              />
            </>
          ) : null}

          <View style={{ gap: 6, marginTop: 16 }}>
            <Text style={styles.bottomText}>Version {APP_VERSION}</Text>
            <Text style={styles.bottomText}>
              Map server:{'\n'}
              {FASTEST_MAP_HOST}
            </Text>
          </View>
        </View>
      </View>

      <WarningModal
        isVisible={modalInfo.visible}
        onClose={closeModal}
        type={modalInfo.type}
        message={modalInfo.message}
        action={() => {
          modalInfo.action();
          closeModal();
        }}
      />
    </>
  );
};