import AsyncStorage from '@react-native-async-storage/async-storage';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import AppText from 'components/AppText';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Alert,
  Linking,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';
import AppLink from 'react-native-app-link';
import ArrowRightUnderline from 'svg/ArrowRightUnderline';
import Location from 'svg/Location';
import Logout from 'svg/LogOut';
import Setting from 'svg/Setting';
import Support from 'svg/Supprt';
import Trash from 'svg/Trash';

interface componentNameProps {}

const ProfilePages = (props: componentNameProps) => {
  const navigation = useNavigation<NativeStackNavigationProp<any>>();
  const { t } = useTranslation();

  const handleLogout = async () => {
    Alert.alert(
      t('Tasdiqlash'),
      t('Haqiqatan ham profildan chiqmoqchimisiz?'),
      [
        { text: t('Bekor qilish'), style: 'cancel' },
        {
          text: t('Chiqish'),
          style: 'destructive',
          onPress: async () => {
            try {
              await AsyncStorage.removeItem('token');
              navigation.reset({
                index: 0,
                routes: [{ name: 'Login' }], // login sahifasiga qaytarish
              });
            } catch (error) {}
          },
        },
      ],
      { cancelable: true },
    );
  };

  const openTelegram = React.useCallback(async () => {
    try {
      await AppLink.maybeOpenURL('tg://resolve?domain=cpost_admin', {
        appName: 'Telegram',
        appStoreId: 686449807,
        appStoreLocale: 'us',
        playStoreId: 'org.telegram.messenger',
      });
    } catch (err) {
      Linking.openURL('https://t.me/cpost_admin');
    }
  }, []);

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={[
          styles.card,
          { flexDirection: 'row', alignItems: 'center', gap: 10 },
        ]}
        onPress={() => navigation.navigate('Settings')}
      >
        <View style={[{ flexDirection: 'row', alignItems: 'center', gap: 10 }]}>
          <Setting color="#373737" width={24} height={24} />
          <AppText style={styles.title}>{t('Sozlamalar')}</AppText>
        </View>
        <ArrowRightUnderline color="#373737" width={24} height={24} />
      </TouchableOpacity>
      {/* {Platform.OS === 'android' && (
        <TouchableOpacity
          style={[
            styles.card,
            { flexDirection: 'row', alignItems: 'center', gap: 10 },
          ]}
          onPress={() => navigation.navigate('Notifications')}
        >
          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
            <Bell color="#373737" width={24} height={24} />
            <AppText style={styles.title}>{t('Bildirishnomalar')}</AppText>
          </View>
          <ArrowRightUnderline color="#373737" width={24} height={24} />
        </TouchableOpacity>
      )} */}
      <TouchableOpacity
        style={[
          styles.card,
          { flexDirection: 'row', alignItems: 'center', gap: 10 },
        ]}
        onPress={() => navigation.navigate('Warehouses')}
      >
        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
          <Location color="#373737" width={24} height={24} />
          <AppText style={styles.title}>{t('Xitoy omborlari manzili')}</AppText>
        </View>
        <ArrowRightUnderline color="#373737" width={24} height={24} />
      </TouchableOpacity>
      <TouchableOpacity
        style={[
          styles.card,
          { flexDirection: 'row', alignItems: 'center', gap: 10 },
        ]}
        onPress={openTelegram}
      >
        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
          <Support color="#373737" width={24} height={24} />
          <AppText style={styles.title}>{t('Yordam markazi')}</AppText>
        </View>
        <ArrowRightUnderline color="#373737" width={24} height={24} />
      </TouchableOpacity>
      <View style={[styles.card, { borderBottomWidth: 0, marginTop: 10 }]}>
        <TouchableOpacity
          style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}
          onPress={handleLogout}
        >
          <Logout color="#F06363" width={24} height={24} />
          <AppText style={[styles.title, { color: '#F06363' }]}>
            {t('Chiqish')}
          </AppText>
        </TouchableOpacity>
      </View>
      <View
        style={[
          styles.card,
          {
            borderBottomWidth: 0,
            marginTop: 10,
            alignContent: 'center',
            justifyContent: 'center',
          },
        ]}
      >
        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
          <Trash color="#F06363" width={24} height={24} />
          <AppText style={[styles.title, { color: '#F06363' }]}>
            {t('Hisobingizni o‘chirish')}
          </AppText>
        </View>
      </View>
    </View>
  );
};

export default ProfilePages;

const styles = StyleSheet.create({
  container: {
    width: '95%',
    margin: 'auto',
    marginTop: 30,
  },
  card: {
    borderBottomColor: '#D8DADC',
    borderBottomWidth: 1,
    paddingTop: 10,
    paddingBottom: 10,
    gap: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  title: {
    fontSize: 16,
    color: '#373737',
    fontWeight: '400',
  },
});
