cpost-mobile/src/screens/status/ui/OrderDetailModal.tsx

import AppText from 'components/AppText';
import { formatPrice } from 'helpers/formatPrice';
import React, { useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Animated,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';
import CloseIcon from 'svg/Close';
import { DataInfo } from '../lib/data';

interface Props {
  visible: boolean;
  setVisible: (val: boolean) => void;
  selectedOrder: DataInfo | null;
}

const OrderDetailModal = ({ visible, setVisible, selectedOrder }: Props) => {
  const opacity = useRef(new Animated.Value(0)).current;
  const translateY = useRef(new Animated.Value(50)).current;
  const { t } = useTranslation();

  const closeModal = () => {
    Animated.timing(opacity, {
      toValue: 0,
      duration: 200,
      useNativeDriver: true,
    }).start(() => setVisible(false));
  };

  useEffect(() => {
    if (visible) {
      Animated.parallel([
        Animated.timing(opacity, {
          toValue: 1,
          duration: 250,
          useNativeDriver: true,
        }),
        Animated.spring(translateY, {
          toValue: 0,
          useNativeDriver: true,
        }),
      ]).start();
    }
  }, [visible]);

  if (!visible || !selectedOrder) return null;

  return (
    <View style={styles.overlay}>
      <Animated.View
        style={[
          styles.modalContent,
          {
            opacity: opacity,
            transform: [{ translateY }],
          },
        ]}
      >
        <View style={styles.header}>
          <AppText style={styles.title}>{selectedOrder.packetName}</AppText>
          <TouchableOpacity onPress={closeModal} style={styles.closeBtn}>
            <CloseIcon width={15} height={15} color={'#000'} />
          </TouchableOpacity>
        </View>

        <View style={styles.divider} />

        <AppText style={styles.sectionTitle}>{t('Mahsulotlar')}:</AppText>
        <ScrollView
          showsVerticalScrollIndicator={false}
          style={{ maxHeight: 250 }}
        >
          {selectedOrder.items.map((product, index) => {
            return (
              <View key={product.trekId + index} style={styles.productItem}>
                <View style={styles.row}>
                  <AppText style={styles.productName}>{product.name}</AppText>
                  <AppText style={styles.productTrekId}>
                    {t('Trek ID')}:
                  </AppText>
                </View>
                <AppText style={styles.productTrekId}>{product.trekId}</AppText>
                <View style={styles.row}>
                  <AppText style={styles.detail}>
                    {t('Og’irligi')}: {product.weight}
                  </AppText>
                  <AppText style={styles.detail}>
                    {t('Narxi')}: {product.price}$
                  </AppText>
                </View>
                <View style={styles.rowRight}>
                  <AppText style={styles.total}>
                    {t('Umumiy narxi')}: {product.totalPrice}$
                  </AppText>
                </View>
              </View>
            );
          })}
        </ScrollView>

        <View style={styles.totalRow}>
          <AppText style={styles.totalLabel}>{t('Umumiy narx')}:</AppText>
          <AppText style={styles.totalValue}>
            {formatPrice(selectedOrder.totalPrice)} {t('so‘m')}
          </AppText>
        </View>

        <TouchableOpacity onPress={closeModal} style={styles.btn}>
          <AppText style={styles.btnText}>{t('Yopish')}</AppText>
        </TouchableOpacity>
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.4)',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 100,
  },
  rowRight: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginTop: 5,
  },
  total: {
    fontSize: 14,
    fontFamily: 'GolosText-Bold',
    color: '#1D1D1D',
  },
  modalContent: {
    width: '90%',
    backgroundColor: '#fff',
    borderRadius: 10,
    paddingBottom: 20,
    shadowColor: '#000',
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 6,
  },
  header: {
    padding: 20,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  title: {
    fontSize: 18,
    fontFamily: 'GolosText-Bold',
  },
  closeBtn: {
    padding: 5,
    width: 30,
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#0000000D',
    borderRadius: 50,
  },
  divider: {
    height: 1,
    backgroundColor: '#E0E0E0',
    marginBottom: 10,
  },
  sectionTitle: {
    fontSize: 16,
    fontFamily: 'GolosText-Bold',
    paddingHorizontal: 20,
    marginBottom: 8,
  },
  productItem: {
    paddingHorizontal: 20,
    paddingBottom: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    marginBottom: 10,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  productName: {
    fontWeight: '500',
    fontSize: 15,
  },
  productTrekId: {
    color: '#555',
    textAlign: 'right',
  },
  detail: {
    color: '#555',
    marginTop: 8,
  },
  totalRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingTop: 10,
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  totalLabel: {
    fontSize: 16,
    fontFamily: 'GolosText-Bold',
  },
  totalValue: {
    fontSize: 16,
    fontFamily: 'GolosText-Bold',
    color: '#28A7E8',
  },
  btn: {
    alignSelf: 'center',
    marginTop: 20,
    height: 48,
    width: '90%',
    borderRadius: 8,
    justifyContent: 'center',
    backgroundColor: '#28A7E8',
  },
  btnText: {
    textAlign: 'center',
    color: '#fff',
    fontSize: 16,
    fontFamily: 'GolosText-Bold',
  },
});

export default OrderDetailModal;