import NavbarBack from 'components/NavbarBack';
import Navigation from 'components/Navigation';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Battery from 'svg/Battery';
import Blade from 'svg/Blade';
import Book from 'svg/Book';
import Dron from 'svg/Dron';
import Drug from 'svg/Drug';
import Food from 'svg/Food';
import Glass from 'svg/Glass';
import Jewelry from 'svg/Jewelry';
import Pencil from 'svg/Pencil';
import WaterGlass from 'svg/WaterGlass';
import Tabs from '../../home/ui/Tabs';

interface RestrictedProductProps {}

const RestrictedProduct = (props: RestrictedProductProps) => {
  const [activeTab, setActiveTab] = React.useState<'avia' | 'auto'>('avia');
  const { t } = useTranslation();
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <NavbarBack title={t('Taqiqlangan buyumlar')} />
      <ScrollView style={{ flex: 1 }}>
        <View style={styles.container}>
          <Tabs activeTab={activeTab} setActiveTab={setActiveTab} />
          {activeTab === 'avia' && (
            <View style={{ marginTop: 20, gap: 10, marginBottom: 20 }}>
              <Text
                style={{
                  width: '95%',
                  margin: 'auto',
                  fontSize: 20,
                  fontWeight: '500',
                }}
              >
                {t('Aviada taqiqlangan buyumlar')}
              </Text>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    <WaterGlass />
                  </Text>
                  <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                    {t('Ichida suyuqligi bor narsalar')}
                  </Text>
                </View>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    <Battery />
                  </Text>
                  <View style={{ width: '90%' }}>
                    <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                      {t('Batareykasi va magnit bo’lgan istalgan narsa')}
                    </Text>
                    <Text style={styles.desc}>
                      {t(
                        '(Telifon, sensitive buyumlar, airpods, naushnik, qo’l soati, tagi yonadigan krasovkalar...)',
                      )}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    <Pencil />
                  </Text>
                  <View style={{ width: '90%' }}>
                    <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                      {t('Kukunli buyumlar')}
                    </Text>
                    <Text style={styles.desc}>{t('(Pudra, ten...)')}</Text>
                  </View>
                </View>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    <Glass />
                  </Text>
                  <View style={{ width: '90%' }}>
                    <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                      {t('Parfumeriya')}
                    </Text>
                    <Text style={styles.desc}>
                      {t(
                        '(Barcha Parfumeriya va kosmetika, yuvinish maxsulotlari)',
                      )}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    <Blade />
                  </Text>
                  <View style={{ width: '90%' }}>
                    <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                      {t('O’tkir tig’li va sovuq qirollar')}
                    </Text>
                    <Text style={styles.desc}>
                      {t('(Pichoq, qaychi, miltiq...)')}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    <Jewelry />
                  </Text>
                  <View style={{ width: '90%' }}>
                    <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                      {t('Zargarklik buyumlari')}
                    </Text>
                    <Text style={styles.desc}>
                      {t('(Tilla, kumush, olmos, braslit...)')}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    <Drug />
                  </Text>
                  <View style={{ width: '90%' }}>
                    <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                      {t('Dori darmon va med texnika')}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    <Food />
                  </Text>
                  <View style={{ width: '90%' }}>
                    <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                      {t('Oziq ovqat')}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={[styles.card]}>
                <Text style={[styles.titleBlack, { color: '#000000B2' }]}>
                  {t(
                    "Agar sizda g'ayrioddiy yoki noaniq mahsulot bo'lsa, albatta buyurtma qilishdan oldin so'rashingiz tavsiya etiladi.",
                  )}
                </Text>
              </View>
              <View style={[styles.card]}>
                <Text style={[styles.titleBlack, { color: '#FF6363' }]}>
                  {t('Muhim!')}
                </Text>
              </View>
              <View style={[styles.card]}>
                <Text style={[styles.titleBlack, { color: '#000000B2' }]}>
                  {t(
                    "Avia pochta manzili orqali yuborilishi taqiqlangan mahsulot buyurtma qilgan bo'lsangiz, u avtomatik ravishda avtokargo yukiga (avto) o'tkaziladi. Shunday qilib, yukingiz Xitoy omborida qolib ketmaydi.",
                  )}
                </Text>
              </View>
              <View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
                <Text style={[styles.desc, { color: '#28A7E8B2' }]}>
                  {t(
                    `Shu bilan birga, Aviada ham, Avtoda ham taqiqlangan mahsulot yuborilgan bo'lsa bunday holatda mahsulot O'zbekistonga yuborilmaydi va bu uchun javobgarlik mijozga yuklanadi.`,
                  )}
                </Text>
              </View>
            </View>
          )}
          {activeTab === 'auto' && (
            <View style={{ marginTop: 20, gap: 10, marginBottom: 20 }}>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    <Jewelry />
                  </Text>
                  <View style={{ width: '90%' }}>
                    <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                      {t('Zargarklik buyumlari')}
                    </Text>
                    <Text style={styles.desc}>
                      {t('(Tilla, kumush, olmos, braslit...)')}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    <Drug />
                  </Text>
                  <View style={{ width: '90%' }}>
                    <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                      {t('Dori darmon va med texnika')}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    <Food />
                  </Text>
                  <View style={{ width: '90%' }}>
                    <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                      {t('Oziq ovqat')}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    <Book />
                  </Text>
                  <View style={{ width: '90%' }}>
                    <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                      {t('Diniy kitob va diniy buyumlar')}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={styles.cardWhite}>
                <View style={styles.priceCard}>
                  <Text style={styles.titleBlack}>
                    <Dron />
                  </Text>
                  <View style={{ width: '90%' }}>
                    <Text style={[styles.titleBlack, { fontSize: 16 }]}>
                      {t('Dron, avtomat qurollar')}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={[styles.card]}>
                <Text style={[styles.titleBlack, { color: '#000000B2' }]}>
                  {t(
                    "Agar sizda g'ayrioddiy yoki noaniq mahsulot bo'lsa, albatta buyurtma qilishdan oldin so'rashingiz tavsiya etiladi.",
                  )}
                </Text>
              </View>
              <View style={[styles.card]}>
                <Text style={[styles.titleBlack, { color: '#FF6363' }]}>
                  {t('Muhim!')}
                </Text>
              </View>
              <View style={[styles.card]}>
                <Text style={[styles.titleBlack, { color: '#000000B2' }]}>
                  {t(
                    "Avia pochta manzili orqali yuborilishi taqiqlangan mahsulot buyurtma qilgan bo'lsangiz, u avtomatik ravishda avtokargo yukiga (avto) o'tkaziladi. Shunday qilib, yukingiz Xitoy omborida qolib ketmaydi.",
                  )}
                </Text>
              </View>
              <View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
                <Text style={[styles.desc, { color: '#28A7E8B2' }]}>
                  {t(
                    "Shu bilan birga, Aviada ham, Avtoda ham taqiqlangan mahsulot yuborilgan bo'lsa bunday holatda mahsulot O'zbekistonga yuborilmaydi va bu uchun javobgarlik mijozga yuklanadi.",
                  )}
                </Text>
              </View>
            </View>
          )}
        </View>
      </ScrollView>
      <Navigation />
    </SafeAreaView>
  );
};

export default RestrictedProduct;

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
  },
  card: {
    width: '95%',
    gap: 5,
    margin: 'auto',
  },
  cardWhite: {
    backgroundColor: '#FFFFFF',
    width: '95%',
    gap: 5,
    margin: 'auto',
    padding: 10,
    borderRadius: 8,
  },
  titleBlack: {
    fontSize: 16,
    fontWeight: '500',
  },
  desc: {
    color: '#000000B2',
    fontSize: 14,
    fontWeight: '400',
  },
  priceCard: {
    flexDirection: 'row',
    gap: 10,
    alignItems: 'flex-start',
  },
});
