import Clipboard from '@react-native-clipboard/clipboard';
import { useQuery } from '@tanstack/react-query';
import { authApi } from 'api/auth';
import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Alert,
  FlatList,
  StyleSheet,
  Text,
  TouchableOpacity,
  useWindowDimensions,
  View,
} from 'react-native';
import Toast from 'react-native-toast-message';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Copy from 'svg/Copy';
import Kitay from 'svg/Ki';

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

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

  const addressInfo = [
    {
      id: 1,
      title: 'China (Auto)',
      postCode: '510440',
      addressInfo: [
        `收货人: ${getMe?.aviaCargoId}`,
        '手机号码: 18335530701',
        '北京市顺义区南法信旭辉空港中心C座',
        `1004 ${getMe?.aviaCargoId}`,
      ],
    },
    // {
    //   id: 2,
    //   title: 'Korea (Auto)',
    //   postCode: '520550',
    //   addressInfo: [
    //     '收件人∶李小龙AT(M312)',
    //     '地址∶深圳市南山区科技园科发路',
    //     '18号AT(M312)',
    //     '电话: 13800008888',
    //   ],
    // },
  ];

  const handleCopy = (info: string[]) => {
    if (getMe?.status === 'active') {
      const textToCopy = info.join('\n');
      Clipboard.setString(textToCopy);
      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,
      });
    }
  };

  return (
    <FlatList
      data={addressInfo}
      horizontal
      keyExtractor={item => item.id.toString()}
      pagingEnabled
      showsHorizontalScrollIndicator={false}
      snapToInterval={cardWidth + 10}
      decelerationRate="fast"
      renderItem={({ item, index }) => {
        const isLast = index === addressInfo.length - 1;
        return (
          <View style={[styles.card, { marginRight: isLast ? 0 : 10 }]}>
            <View style={styles.titleCard}>
              <Kitay width={24 * scale} height={24 * scale} />
              <Text style={styles.title}>{item.title}</Text>
            </View>
            <View style={styles.infoId}>
              <View style={{ gap: 4 * scale }}>
                {item.addressInfo.map((line, idx) => (
                  <Text key={idx} style={styles.infoText}>
                    {line}
                  </Text>
                ))}
              </View>
              <TouchableOpacity onPress={() => handleCopy(item.addressInfo)}>
                <Copy color="#28A7E8" width={24 * scale} height={24 * scale} />
              </TouchableOpacity>
            </View>
            <View style={styles.postCodeWrapper}>
              <Text style={styles.postCodeText}>{t('Auto post kodi')}: </Text>
              <Text style={styles.postCode}>{item.postCode}</Text>
              <TouchableOpacity
                onPress={() => {
                  Clipboard.setString(item.postCode);
                  Alert.alert(t('Nusxa olindi'), t('Pochta kodi nusxalandi!'));
                }}
                style={{ marginLeft: 4 * scale }}
              >
                <AntDesign
                  name="pushpin"
                  color="red"
                  size={16 * scale}
                  style={{ transform: [{ rotateY: '180deg' }] }}
                />
              </TouchableOpacity>
            </View>
          </View>
        );
      }}
    />
  );
};

const makeStyles = (scale: number, cardWidth: number, screenWidth: number) =>
  StyleSheet.create({
    card: {
      height: 220 * scale,
      width: cardWidth,
      backgroundColor: '#28a8e82c',
      borderRadius: 12 * scale,
      padding: 15 * scale,
      gap: 10 * scale,
    },
    titleCard: {
      flexDirection: 'row',
      gap: 8 * scale,
      alignItems: 'center',
    },
    title: {
      fontSize: 20 * scale,
      fontWeight: '600',
      color: '#101623CC',
    },
    infoId: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginVertical: 8 * scale,
    },
    infoText: {
      fontSize: 16 * scale,
      color: '#28A7E8',
    },
    postCodeWrapper: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    postCodeText: {
      fontSize: 16 * scale,
      color: '#000000',
      fontWeight: '500',
    },
    postCode: {
      fontSize: 16 * scale,
      color: '#28A7E8',
      fontWeight: '400',
      marginLeft: 4 * scale,
    },
  });

export default TabsAutoWarehouses;
