import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  useWindowDimensions,
} 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 { width: screenWidth } = useWindowDimensions();
  const navigation = useNavigation<NativeStackNavigationProp<any>>();
  const scale = screenWidth < 360 ? 0.85 : 1;
  const { t } = useTranslation();
  const styles = makeStyles(scale);

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

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

      {/* <View style={styles.card}>
        <View style={styles.text}>
          <Auto
            color="#28A7E8"
            width={28 * scale}
            height={28 * scale}
            view="-4"
          />
          <Text style={styles.title}>Shaxar bo’ylab yetkazish</Text>
        </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 * scale} height={28 * scale} />
          <Text style={styles.title}>{t('Filiallar ro’yxati')}</Text>
        </View>
        <ArrowRightUnderline
          color="#000000"
          width={24 * scale}
          height={24 * scale}
        />
      </TouchableOpacity>

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

const makeStyles = (scale: number) =>
  StyleSheet.create({
    container: {
      width: '100%',
      marginLeft: 'auto',
      marginRight: 'auto',
      marginTop: 10 * scale,
      borderRadius: 12 * scale,
      padding: 12 * scale,
      gap: 10 * scale,
    },
    card: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      backgroundColor: '#FFFFFF',
      shadowColor: '#F2FAFF',
      padding: 15 * scale,
      borderRadius: 8 * scale,
      alignItems: 'center',
    },
    text: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 10 * scale,
    },
    title: {
      fontSize: 16 * scale,
      fontWeight: '600',
    },
  });

export default Pages;
