import LayoutTwo from 'components/LayoutTwo';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
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 (
    <LayoutTwo title={t('Taqiqlangan buyumlar')}>
      <ScrollView style={{ flex: 1 }}>
        <View style={styles.container}>
          <Tabs activeTab={activeTab} setActiveTab={setActiveTab} />
          {activeTab === 'avia' && (
            <View style={{ marginTop: 10, 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: 10, 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>
    </LayoutTwo>
  );
};

export default RestrictedProduct;

const styles = StyleSheet.create({
  container: {
    marginTop: 10,
  },
  card: {
    width: '95%',
    gap: 5,
    margin: 'auto',
  },
  cardWhite: {
    backgroundColor: '#FFFFFF',
    width: '95%',
    gap: 5,
    margin: 'auto',
    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',
    gap: 10,
    alignItems: 'flex-start',
  },
});