import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import AppText from 'components/AppText';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import ArrowRightUnderline from 'svg/ArrowRightUnderline';
import Usd from 'svg/Dollar';
import InfoIcon from 'svg/Info';
import Store from 'svg/Store';

const Pages = () => {
  const navigation = useNavigation<NativeStackNavigationProp<any>>();
  const { t } = useTranslation();
  const styles = makeStyles();

  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => navigation.navigate('CargoPrices')}
        style={styles.card}
      >
        <View style={styles.text}>
          <Usd color="#28A7E8" width={28} height={28} colorCircle="#28A7E8" />
          <AppText style={styles.title}>{t('Kargo narxlari')}</AppText>
        </View>
        <ArrowRightUnderline color="#000000" width={24} height={24} />
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => navigation.navigate('RestrictedProduct')}
        style={styles.card}
      >
        <View style={styles.text}>
          <InfoIcon color="#28A7E8" width={28} height={28} />
          <AppText style={styles.title}>{t('Taqiqlangan buyumlar')}</AppText>
        </View>
        <ArrowRightUnderline color="#000000" width={24} height={24} />
      </TouchableOpacity>

      {/* <View style={styles.card}>
        <View style={styles.text}>
          <Auto
            color="#28A7E8"
            width={28 * scale}
            height={28 * scale}
            view="-4"
          />
          <AppText style={styles.title}>Shaxar bo’ylab yetkazish</AppText>
        </View>
        <ArrowRightUnderline
          color="#000000"
          width={24 * scale}
          height={24 * scale}
        />
      </View> */}

      <TouchableOpacity
        style={styles.card}
        onPress={() => navigation.navigate('ListBranches')}
      >
        <View style={styles.text}>
          <Store color="#28A7E8" width={28} height={28} />
          <AppText style={styles.title}>{t('Filiallar ro’yxati')}</AppText>
        </View>
        <ArrowRightUnderline color="#000000" width={24} height={24} />
      </TouchableOpacity>

      {/* <TouchableOpacity
        style={styles.card}
        onPress={() => navigation.navigate('Uncodified')}
      >
        <View style={styles.text}>
          <BarCode color="#28A7E8" width={28 * scale} height={28 * scale} />
          <AppText style={styles.title}>{t('Kodsiz tovarlar')}</AppText>
        </View>
        <ArrowRightUnderline
          color="#000000"
          width={24 * scale}
          height={24 * scale}
        />
      </TouchableOpacity> */}
    </View>
  );
};

const makeStyles = () =>
  StyleSheet.create({
    container: {
      width: '95%',
      marginLeft: 'auto',
      marginRight: 'auto',
      borderRadius: 12,
      marginBottom: 10,
      gap: 10,
    },
    card: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',

      backgroundColor: '#FFFFFF',
      paddingVertical: 15,
      paddingHorizontal: 12,
      borderRadius: 10,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.1,
      shadowRadius: 2,

      elevation: 1,
    },
    text: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 10,
    },
    title: {
      fontSize: 16,
      fontFamily: 'GolosText-Bold',
    },
  });

export default Pages;
