import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { useQuery } from '@tanstack/react-query';
import reference_api from 'api/reference';
import AppText from 'components/AppText';
import LayoutTwo from 'components/LayoutTwo';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Linking,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';
import AppLink from 'react-native-app-link';
import Tabs from '../../home/ui/Tabs';

interface CargoPricesProps {}

const CargoPrices = (props: CargoPricesProps) => {
  const { t } = useTranslation();
  const [activeTab, setActiveTab] = React.useState<'AVIA' | 'AUTO'>('AVIA');
  const navigation = useNavigation<NativeStackNavigationProp<any>>();

  const { data, refetch } = useQuery({
    queryKey: ['reference_list'],
    queryFn: () => reference_api.getReference({ cargoType: activeTab }),
  });

  React.useEffect(() => {
    refetch();
  }, [activeTab]);

  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 (
    <LayoutTwo title={t('Kargo narxlari')}>
      <ScrollView style={{ flex: 1 }}>
        <View style={styles.container}>
          <Tabs activeTab={activeTab} setActiveTab={setActiveTab} />
          {activeTab === 'AVIA' && (
            <View style={{ marginTop: 10, gap: 10, marginBottom: 20 }}>
              {data &&
                data.map(ref => (
                  <View style={styles.cardWhite} key={ref.id}>
                    <View style={styles.priceCard}>
                      <AppText style={styles.titleBlack}>{ref.title}</AppText>
                      <AppText style={[styles.titleBlack, { fontSize: 16 }]}>
                        {ref.price}$/{ref.unitValue}
                        {ref.unit}
                      </AppText>
                    </View>
                    <AppText style={styles.desc}>
                      {ref.shortDescription}
                    </AppText>
                  </View>
                ))}
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <AppText style={styles.titleBlack}>
                    {t(
                      'Avia pochtada bir maxsulotdan seriyalab olish mumkin emas',
                    )}
                  </AppText>
                </View>
                <AppText style={styles.desc}>
                  {t(
                    '(Bu kargo narxini o’sishiga olib keladi. Seriyali buyularni avto kargo orqali olib kelish arzonga tushadi)',
                  )}
                </AppText>
              </View>
              <View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
                <View style={styles.priceCard}>
                  <AppText style={[styles.titleBlack, { color: '#28A7E8' }]}>
                    {t('Yetib kelish vaqti')}
                  </AppText>
                  <AppText
                    style={[
                      styles.titleBlack,
                      { fontSize: 16, color: '#28A7E8' },
                    ]}
                  >
                    7-10 {t('kun')}
                  </AppText>
                </View>
                <AppText style={[styles.desc, { color: '#28A7E8B2' }]}>
                  {t(
                    'Yuklarni yetib elish vaqti oxirgi qadoqlash kunidan boshlab xisoblanadi',
                  )}
                </AppText>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <AppText style={styles.titleBlack}>
                    {t('Minimal miqdor talab qilinmaydi.')}
                  </AppText>
                </View>
                <AppText style={styles.desc}>
                  {t(
                    "ya'ni, qancha gramm mahsulot olsangiz, shuncha og'irligi (gramm) uchun to'lov qilasiz.",
                  )}
                </AppText>
              </View>
              <View style={[styles.card]}>
                <AppText style={[styles.titleBlack, { color: '#FF6363' }]}>
                  {t('Muhim!')}
                </AppText>
              </View>
              <View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
                <View style={styles.priceCard}>
                  <AppText style={[styles.titleBlack, { color: '#28A7E8' }]}>
                    {t('Filiallargacha yetkazib berish - bepul.')}
                  </AppText>
                </View>
                <AppText style={[styles.desc, { color: '#000000' }]}>
                  {t('Batafsil')}:{' '}
                  <AppText style={{ color: '#28A7E8' }} onPress={openTelegram}>
                    @cpost_admin
                  </AppText>
                </AppText>
              </View>
              <View style={[styles.card]}>
                <AppText style={[styles.titleBlack, { color: '#000000B2' }]}>
                  {t(
                    "Agar siz yashayotgan hududda bizning filialimiz mavjud bo'lmasa, o'zingizga eng yaqin bo'lgan filialni tanlab, ro'yhatdan o'tishingiz mumkin.",
                  )}
                </AppText>
              </View>
              <TouchableOpacity
                style={[styles.card]}
                onPress={() => navigation.navigate('ListBranches')}
              >
                <AppText style={[styles.titleBlack, { color: '#28A7E8' }]}>
                  {t("Filiallarimiz ro'yhati ilovada mavjud")}
                </AppText>
              </TouchableOpacity>
            </View>
          )}
          {activeTab === 'AUTO' && (
            <View style={{ marginTop: 20, gap: 10, marginBottom: 20 }}>
              {data &&
                data.map(ref => (
                  <View style={styles.cardWhite} key={ref.id}>
                    <View style={styles.priceCard}>
                      <AppText style={styles.titleBlack}>{ref.title}</AppText>
                      <AppText style={[styles.titleBlack, { fontSize: 16 }]}>
                        {ref.price}$/{ref.unitValue}
                        {ref.unit}
                      </AppText>
                    </View>
                    <AppText style={styles.desc}>
                      {ref.shortDescription}
                    </AppText>
                  </View>
                ))}
              <View style={styles.cardWhite}>
                <AppText style={styles.desc}>
                  {t(
                    'Avto kargoda bir maxsulotdan seriyalab istalgan katta miqdorda olish mumkin. Doimiyko’p yuk oluvchi ijozlar uchun maxsus arzonlashtrilgan narxlarimiz bor',
                  )}
                </AppText>
              </View>
              <View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
                <View style={styles.priceCard}>
                  <AppText style={[styles.titleBlack, { color: '#28A7E8' }]}>
                    {t('Yetib kelish vaqti')}
                  </AppText>
                  <AppText
                    style={[
                      styles.titleBlack,
                      { fontSize: 16, color: '#28A7E8' },
                    ]}
                  >
                    10-20 {t('kun')}
                  </AppText>
                </View>
                <AppText style={[styles.desc, { color: '#28A7E8B2' }]}>
                  {t(
                    'Yuklarni yetib elish vaqti oxirgi qadoqlash kunidan boshlab xisoblanadi',
                  )}
                </AppText>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <AppText style={styles.titleBlack}>
                    {t('Minimal miqdor talab qilinmaydi.')}
                  </AppText>
                </View>
                <AppText style={styles.desc}>
                  {t(
                    "ya'ni, qancha gramm mahsulot olsangiz, shuncha og'irligi (gramm) uchun to'lov qilasiz.",
                  )}
                </AppText>
              </View>
              <View style={[styles.card]}>
                <AppText style={[styles.titleBlack, { color: '#FF6363' }]}>
                  {t('Muhim!')}
                </AppText>
              </View>
              <View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
                <View style={styles.priceCard}>
                  <AppText style={[styles.titleBlack, { color: '#28A7E8' }]}>
                    {t('Filiallargacha yetkazib berish - bepul.')}
                  </AppText>
                </View>
                <AppText style={[styles.desc, { color: '#000000' }]}>
                  {t('Batafsil')}:{' '}
                  <AppText style={{ color: '#28A7E8' }} onPress={openTelegram}>
                    @cpost_admin
                  </AppText>
                </AppText>
              </View>
              <View style={[styles.card]}>
                <AppText style={[styles.titleBlack, { color: '#000000B2' }]}>
                  {t(
                    "Agar siz yashayotgan hududda bizning filialimiz mavjud bo'lmasa, o'zingizga eng yaqin bo'lgan filialni tanlab, ro'yhatdan o'tishingiz mumkin.",
                  )}
                </AppText>
              </View>
              <TouchableOpacity
                style={[styles.card]}
                onPress={() => navigation.navigate('ListBranches')}
              >
                <AppText style={[styles.titleBlack, { color: '#28A7E8' }]}>
                  {t("Filiallarimiz ro'yhati ilovada mavjud")}
                </AppText>
              </TouchableOpacity>
            </View>
          )}
        </View>
      </ScrollView>
    </LayoutTwo>
  );
};

export default CargoPrices;

const styles = StyleSheet.create({
  container: {
    marginTop: 10,
  },
  card: {
    width: '95%',
    gap: 5,
    margin: 'auto',
  },
  cardWhite: {
    backgroundColor: '#FFFFFF',
    width: '95%',
    gap: 5,
    margin: 'auto',
    padding: 10,
    borderRadius: 8,
    paddingVertical: 15,
    paddingHorizontal: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,

    elevation: 1,
  },
  titleBlack: {
    fontSize: 16,
    fontWeight: '500',
  },
  desc: {
    color: '#000000B2',
    fontSize: 14,
    fontWeight: '400',
  },
  priceCard: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
});