import { useQuery } from '@tanstack/react-query';
import exchanges_api from 'api/exchanges';
import AppText from 'components/AppText';
import { formatPrice } from 'helpers/formatPrice';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import { Dimensions, ScrollView, StyleSheet, 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 svgWidthProduct = screenWidth * 1;

  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 && (
              <>
                <AppText style={PaymentStyle.titleMethod}>
                  {data[0].code}
                </AppText>
                <AppText style={PaymentStyle.textMethod}>
                  {data[0].rate} UZS
                </AppText>
              </>
            )}
          </View>

          <View
            style={[
              PaymentStyle.info,
              isSmallScreen
                ? { flexBasis: '48%', alignItems: 'flex-end' }
                : { flexBasis: '48%', alignItems: 'flex-end' },
            ]}
          >
            <AppText style={PaymentStyle.titleMethod}>{t('Reys')}</AppText>
            <AppText style={[PaymentStyle.textMethod, { textAlign: 'left' }]}>
              {packet.packetName}
            </AppText>
          </View>

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

          <View
            style={[
              PaymentStyle.info,
              isSmallScreen
                ? { flexBasis: '48%', alignItems: 'flex-start' }
                : { flexBasis: '48%', alignItems: 'flex-start' },
            ]}
          >
            <AppText style={PaymentStyle.titleMethod}>
              {t('Yetkazish vaqti')}
            </AppText>
            <AppText style={PaymentStyle.textMethod}>08.25.2025</AppText>
          </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) => {
          return (
            <View key={index} style={{ marginBottom: 15 }}>
              <View style={PaymentStyle.receiptCard}>
                <View style={PaymentStyle.rowBetween}>
                  <View style={{ width: '100%' }}>
                    <AppText style={PaymentStyle.itemName}>{item.name}</AppText>
                    <AppText style={PaymentStyle.track}>
                      {t('Trek ID')}: {item.trekId}
                    </AppText>
                  </View>
                </View>
                <View style={PaymentStyle.rowBetween}>
                  <AppText style={PaymentStyle.weight}>
                    {t('Og’irligi')}: {item.weight} kg
                  </AppText>
                  <AppText style={PaymentStyle.price}>
                    {t('Narxi')}: {item.price}$
                  </AppText>
                </View>
                <View style={PaymentStyle.rowRight}>
                  <AppText style={PaymentStyle.total}>
                    {t('Umumiy narxi')}: {item.totalPrice} $
                  </AppText>
                </View>
              </View>
              <Svg height="1" width={svgWidthProduct}>
                <Path
                  d={`M 0 0 Q ${svgWidthProduct} 0 ${svgWidthProduct} 0`}
                  stroke="#8C8A93"
                  strokeWidth="2"
                  fill="none"
                  strokeDasharray="9"
                />
              </Svg>
            </View>
          );
        })}
        <View style={PaymentStyle.infoCard}>
          <View
            style={[
              PaymentStyle.info,
              isSmallScreen
                ? { flexBasis: '48%', alignItems: 'flex-start' }
                : { flexBasis: '48%', alignItems: 'flex-start' },
            ]}
          >
            <AppText style={PaymentStyle.titleMethod}>
              {t('Umumiy narxi')}
            </AppText>
          </View>

          <View
            style={[
              PaymentStyle.info,
              isSmallScreen
                ? { flexBasis: '48%', alignItems: 'flex-end' }
                : { flexBasis: '48%', alignItems: 'flex-end' },
            ]}
          >
            <AppText style={PaymentStyle.titleMethod}>
              {formatPrice(packet.totalPrice)} {t('so‘m')}
            </AppText>
          </View>
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  cornerStyle: {
    position: 'absolute' as const,
    width: 40,
    height: 40,
    borderTopWidth: 6,
    borderLeftWidth: 6,
    borderColor: '#007AFF',
  },
});

export default PaymentProduct;
