import { useQuery } from '@tanstack/react-query';
import exchanges_api from 'api/exchanges';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import { Dimensions, ScrollView, Text, View } from 'react-native';
import Svg, { Circle, Path } from 'react-native-svg';
import Plane from 'svg/Plane';
import { PaymentStyle } from '../../payment/ui/style';

interface PaymentProductProps {
  packet: any;
}

const PaymentProduct = ({ packet }: PaymentProductProps) => {
  const { t } = useTranslation();
  const screenWidth = Dimensions.get('window').width;
  const isSmallScreen = screenWidth < 380;
  const svgWidth = screenWidth * 0.8;

  const { data } = useQuery({
    queryKey: ['exchanges'],
    queryFn: () => exchanges_api.getExchanges(),
  });

  return (
    <ScrollView
      style={PaymentStyle.containerMethod}
      contentContainerStyle={{ paddingBottom: 80 }}
    >
      <View style={PaymentStyle.cardMethod}>
        <View style={PaymentStyle.planeContainer}>
          <View style={{ position: 'relative', width: 200, height: 100 }}>
            <Svg height="80" width="200">
              <Circle cx="15" cy="60" r="15" fill="#313133" />
              <Circle cx="15" cy="60" r="7.5" fill="#3D3C3F" />
              <Circle cx="15" cy="60" r="3.5" fill="#28A7E8" />
              <Path
                d="M 15 60 Q 100 0 185 60"
                stroke="#8C8A93"
                strokeWidth="2"
                fill="none"
                strokeDasharray="6"
              />
              <Circle cx="185" cy="60" r="15" fill="#313133" />
              <Circle cx="185" cy="60" r="7.5" fill="#3D3C3F" />
              <Circle cx="185" cy="60" r="3.5" fill="#28A7E8" />
            </Svg>
            <View style={PaymentStyle.planeIcon}>
              <Plane width={50} height={50} color="#DCDEE3" />
            </View>
          </View>
        </View>
        <View style={PaymentStyle.infoCard}>
          <View
            style={[
              PaymentStyle.info,
              isSmallScreen
                ? { flexBasis: '48%', alignItems: 'flex-start' }
                : { flexBasis: '48%', alignItems: 'flex-start' },
            ]}
          >
            {data && (
              <>
                <Text style={PaymentStyle.titleMethod}>{data[0].code}</Text>
                <Text style={PaymentStyle.textMethod}>{data[0].rate} UZS</Text>
              </>
            )}
          </View>

          <View
            style={[
              PaymentStyle.info,
              isSmallScreen
                ? { flexBasis: '48%', alignItems: 'flex-end' }
                : { flexBasis: '48%', alignItems: 'flex-end' },
            ]}
          >
            <Text style={PaymentStyle.titleMethod}>Cargo</Text>
            <Text style={PaymentStyle.textMethod}>12.267 UZS/ kg</Text>
          </View>

          {/* <View
            style={[
              PaymentStyle.info,
              isSmallScreen
                ? { flexBasis: '48%', alignItems: 'flex-start' }
                : { flexBasis: '48%', alignItems: 'flex-start' },
            ]}
          >
            <Text style={PaymentStyle.titleMethod}>{t('Yetkazish vaqti')}</Text>
            <Text style={PaymentStyle.textMethod}>08.25.2025</Text>
          </View> */}

          <View
            style={[
              PaymentStyle.info,
              isSmallScreen
                ? { flexBasis: '48%', alignItems: 'flex-start' }
                : { flexBasis: '48%', alignItems: 'flex-start' },
            ]}
          >
            <Text style={PaymentStyle.titleMethod}>Reys</Text>
            <Text style={[PaymentStyle.textMethod, { textAlign: 'left' }]}>
              {packet.packetName}
            </Text>
          </View>
        </View>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            marginBottom: 30,
          }}
        >
          <View
            style={{
              backgroundColor: '#28a8e80c',
              width: 30,
              height: 30,
              borderRadius: 60,
              position: 'absolute',
              left: -15,
            }}
          />
          <Svg height="1" width={svgWidth}>
            <Path
              d={`M 15 0 Q ${svgWidth} 0 ${svgWidth} 0`}
              stroke="#8C8A93"
              strokeWidth="2"
              fill="none"
              strokeDasharray="6"
            />
          </Svg>
          <View
            style={{
              backgroundColor: '#28A7E81A',
              width: 30,
              height: 30,
              borderRadius: 60,
              position: 'absolute',
              right: -15,
            }}
          />
        </View>
        {packet.items.map((item: any, index: number) => {
          const price = Number(item.price);
          const weight = Number(item.weight);
          const total = price * weight;

          // formatlash: 0 decimal, so‘m bilan
          const formattedPrice = price.toFixed(0);
          const formattedTotal = total.toFixed(0);
          return (
            <View key={index} style={{ marginBottom: 15 }}>
              <View style={PaymentStyle.receiptCard}>
                <View style={PaymentStyle.rowBetween}>
                  <Text style={PaymentStyle.itemName}>{item.name}</Text>
                  <Text style={PaymentStyle.track}>
                    {t('Trek ID')}: {item.trackId}
                  </Text>
                </View>
                <View style={PaymentStyle.rowBetween}>
                  <Text style={PaymentStyle.weight}>
                    {t('Og’irligi')}: {weight} kg
                  </Text>
                  <Text style={PaymentStyle.price}>
                    1kg * {formattedPrice} {t('so‘m')}
                  </Text>
                </View>
                <View style={PaymentStyle.rowRight}>
                  <Text style={PaymentStyle.total}>
                    {t('Umumiy narxi')}: {formattedTotal} {t('so‘m')}
                  </Text>
                </View>
              </View>
            </View>
          );
        })}
        <View style={PaymentStyle.infoCard}>
          <View
            style={[
              PaymentStyle.info,
              isSmallScreen
                ? { flexBasis: '48%', alignItems: 'flex-start' }
                : { flexBasis: '48%', alignItems: 'flex-start' },
            ]}
          >
            <Text style={PaymentStyle.titleMethod}>{t('Umumiy narxi')}</Text>
          </View>

          <View
            style={[
              PaymentStyle.info,
              isSmallScreen
                ? { flexBasis: '48%', alignItems: 'flex-end' }
                : { flexBasis: '48%', alignItems: 'flex-end' },
            ]}
          >
            <Text style={PaymentStyle.titleMethod}>{packet.totalPrice}</Text>
          </View>
        </View>
      </View>
    </ScrollView>
  );
};

export default PaymentProduct;