import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import LayoutTwo from 'components/LayoutTwo';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
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>>();
  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 }}>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    {t('Oddiy maxsulotlar')}
                  </Text>
                  <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                    9.2$ /1kg
                  </Text>
                </View>
                <Text style={styles.desc}>
                  {t('(Katta miqdordagi yuklar kelishuv asosida)')}
                </Text>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>{t('Brend buyumlar')}</Text>
                  <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                    12.2$ /1kg
                  </Text>
                </View>
                <Text style={styles.desc}>
                  {t('(Karobka,dokumentlar bilan birga)')}
                </Text>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    {t(
                      'Avia pochtada bir maxsulotdan seriyalab olish mumkin emas',
                    )}
                  </Text>
                </View>
                <Text style={styles.desc}>
                  {t(
                    '(Bu kargo narxini o’sishiga olib keladi. Seriyali buyularni avto kargo orqali olib kelish arzonga tushadi)',
                  )}
                </Text>
              </View>
              <View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
                <View style={styles.priceCard}>
                  <Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
                    {t('Yetib kelish vaqti')}
                  </Text>
                  <Text
                    style={[
                      styles.titleBlack,
                      { fontSize: 16, color: '#28A7E8' },
                    ]}
                  >
                    7-10 {t('kun')}
                  </Text>
                </View>
                <Text style={[styles.desc, { color: '#28A7E8B2' }]}>
                  {t(
                    'Yuklarni yetib elish vaqti oxirgi qadoqlash kunidan boshlab xisoblanadi',
                  )}
                </Text>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    {t('Minimal miqdor talab qilinmaydi.')}
                  </Text>
                </View>
                <Text style={styles.desc}>
                  {t(
                    "ya'ni, qancha gramm mahsulot olsangiz, shuncha og'irligi (gramm) uchun to'lov qilasiz.",
                  )}
                </Text>
              </View>
              <View style={[styles.card]}>
                <Text style={[styles.titleBlack, { color: '#FF6363' }]}>
                  {t('Muhim!')}
                </Text>
              </View>
              <View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
                <View style={styles.priceCard}>
                  <Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
                    {t('Filiallargacha yetkazib berish - bepul.')}
                  </Text>
                </View>
                <Text style={[styles.desc, { color: '#000000' }]}>
                  {t('Batafsil')}: @CPcargo_admin
                </Text>
              </View>
              <View style={[styles.card]}>
                <Text 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.",
                  )}
                </Text>
              </View>
              <TouchableOpacity
                style={[styles.card]}
                onPress={() => navigation.navigate('ListBranches')}
              >
                <Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
                  {t("Filiallarimiz ro'yhati ilovada mavjud")}
                </Text>
              </TouchableOpacity>
            </View>
          )}
          {activeTab === 'auto' && (
            <View style={{ marginTop: 20, gap: 10, marginBottom: 20 }}>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>0-30 kg</Text>
                  <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                    7$ /1kg
                  </Text>
                </View>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>30-100kg</Text>
                  <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                    6.5$ /1kg
                  </Text>
                </View>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    100kg {t('dan boshlab')}
                  </Text>
                  <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                    6$ /1kg
                  </Text>
                </View>
              </View>
              <View style={styles.cardWhite}>
                <Text style={styles.desc}>
                  {t(
                    'Avto kargoda bir maxsulotdan seriyalab istalgan katta miqdorda olish mumkin. Doimiyko’p yuk oluvchi ijozlar uchun maxsus arzonlashtrilgan narxlarimiz bor',
                  )}
                </Text>
              </View>
              <View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
                <View style={styles.priceCard}>
                  <Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
                    {t('Yetib kelish vaqti')}
                  </Text>
                  <Text
                    style={[
                      styles.titleBlack,
                      { fontSize: 16, color: '#28A7E8' },
                    ]}
                  >
                    10-20 {t('kun')}
                  </Text>
                </View>
                <Text style={[styles.desc, { color: '#28A7E8B2' }]}>
                  {t(
                    'Yuklarni yetib elish vaqti oxirgi qadoqlash kunidan boshlab xisoblanadi',
                  )}
                </Text>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    {t('Minimal miqdor talab qilinmaydi.')}
                  </Text>
                </View>
                <Text style={styles.desc}>
                  {t(
                    "ya'ni, qancha gramm mahsulot olsangiz, shuncha og'irligi (gramm) uchun to'lov qilasiz.",
                  )}
                </Text>
              </View>
              <View style={[styles.card]}>
                <Text style={[styles.titleBlack, { color: '#FF6363' }]}>
                  {t('Muhim!')}
                </Text>
              </View>
              <View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
                <View style={styles.priceCard}>
                  <Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
                    {t('Filiallargacha yetkazib berish - bepul.')}
                  </Text>
                </View>
                <Text style={[styles.desc, { color: '#000000' }]}>
                  {t('Batafsil')}: @CPcargo_admin
                </Text>
              </View>
              <View style={[styles.card]}>
                <Text 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.",
                  )}
                </Text>
              </View>
              <TouchableOpacity
                style={[styles.card]}
                onPress={() => navigation.navigate('ListBranches')}
              >
                <Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
                  {t("Filiallarimiz ro'yhati ilovada mavjud")}
                </Text>
              </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',
  },
});