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 { APP_VERSION, FASTEST_MAP_HOST } from 'src/constants';

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 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');
    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="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>

        {token ? (
          <View style={styles.bottomMenu}>
            <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
                )
              }
            />
            <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 style={styles.bottomMenu} />
        )}
      </View>

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