import Clipboard from '@react-native-clipboard/clipboard';
import { useQuery } from '@tanstack/react-query';
import { authApi } from 'api/auth';
import warhouses_api from 'api/warhouses';
import AppText from 'components/AppText';
import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  FlatList,
  StyleSheet,
  TouchableOpacity,
  useWindowDimensions,
  View,
} from 'react-native';
import Toast from 'react-native-toast-message';
import Copy from 'svg/Copy';
import Kitay from 'svg/Ki';

const TabsAvia = () => {
  const { data: getMe, isLoading: getMeLoad } = useQuery({
    queryKey: ['getMe'],
    queryFn: authApi.getMe,
  });

  const { width: screenWidth } = useWindowDimensions();
  const scale = screenWidth < 360 ? 0.85 : 1;
  const cardWidth = screenWidth * 0.95;
  const styles = makeStyles(scale, cardWidth, screenWidth);
  const { t } = useTranslation();

  const handleCopy = (info: string[]) => {
    if (getMe?.status === 'ACTIVE') {
      Clipboard.setString(info.join('\n'));
      Toast.show({
        type: 'success',
        text1: t('Nusxa olingan'),
        text2: t('Avto manzili nusxalandi!'),
        position: 'top',
        visibilityTime: 2000,
      });
    } else {
      Toast.show({
        type: 'error',
        text1: t('Xatolik yuz berdi!'),
        text2: t('Akkaunt faol emas!'),
        position: 'top',
        visibilityTime: 2000,
      });
    }
  };

  const { data } = useQuery({
    queryKey: ['warhouses'],
    queryFn: () => warhouses_api.getWarhouses({ cargoType: 'AVIA' }),
  });

  const formattedData =
    data?.map((item: string | null) => {
      if (!item) return '';

      const withAutoCargo = item.replace('%s', getMe?.autoCargoId || '');

      const withAviaCargo = withAutoCargo.replace(
        '%s',
        getMe?.aviaCargoId || '',
      );

      return withAviaCargo;
    }) || [];

  return (
    <FlatList
      data={formattedData}
      horizontal
      keyExtractor={(_, index) => index.toString()}
      pagingEnabled
      showsHorizontalScrollIndicator={false}
      snapToInterval={cardWidth + 10}
      decelerationRate="fast"
      contentContainerStyle={{
        paddingHorizontal: (screenWidth - cardWidth) / 2,
        padding: 10,
      }}
      renderItem={({ item, index }) => {
        const isLast = index === formattedData.length - 1;
        return (
          <View style={[styles.card, { marginRight: isLast ? 0 : 10 }]}>
            <View style={styles.titleCard}>
              <Kitay width={24 * scale} height={24 * scale} />
              <AppText style={styles.title}>China (AVIA)</AppText>
            </View>
            <View style={styles.infoId}>
              <View style={{ gap: 4 * scale, width: '90%' }}>
                <AppText style={styles.infoText}>{item}</AppText>
              </View>
              <TouchableOpacity onPress={() => handleCopy([item])}>
                <Copy color="#28A7E8" width={24 * scale} height={24 * scale} />
              </TouchableOpacity>
            </View>
          </View>
        );
      }}
    />
  );
};

const makeStyles = (scale: number, cardWidth: number, screenWidth: number) =>
  StyleSheet.create({
    container: {
      height: 200,
      width: '95%',
      backgroundColor: '#28a8e82c',
      margin: 'auto',
      // marginTop: 20,
      borderRadius: 12,
      padding: 12,
      gap: 10,
    },
    scrollContainer: {
      marginTop: 20,
      paddingHorizontal: (screenWidth - cardWidth) / 2,
    },
    postCodeWrapper: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    card: {
      // height: 220 * scale,
      width: cardWidth,
      backgroundColor: '#28a8e82c',
      borderRadius: 12 * scale,
      padding: 15 * scale,
      gap: 10 * scale,
    },
    titleCard: {
      flexDirection: 'row',
      gap: 8,
      alignItems: 'center',
    },
    title: {
      fontSize: 20,
      fontFamily: 'GolosText-Bold',
      color: '#101623CC',
    },
    infoId: {
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
    infoText: {
      fontSize: 16,
      color: '#28A7E8',
    },
    postCodeText: {
      fontSize: 16,
      color: '#000000',
      fontWeight: '500',
    },
    postCode: {
      fontSize: 16,
      color: '#28A7E8',
      fontWeight: '400',
    },
  });

export default TabsAvia;
