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

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

const NotificationsModal = ({ 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.title}</AppText>
          <TouchableOpacity onPress={closeModal} style={styles.closeBtn}>
            <CloseIcon width={15} height={15} color={'#000'} />
          </TouchableOpacity>
        </View>

        <View style={styles.divider} />

        <AppText style={styles.sectionTitle}>{selectedOrder.message}</AppText>
        <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,
  },
  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',
  },
  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 NotificationsModal;