import React, { useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import {
  ActivityIndicator,
  Animated,
  Dimensions,
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Check from 'svg/Check';
import CreditCard from 'svg/CreditCard';
import Usd from 'svg/Dollar';
import { PaymentStyle } from '../../payment/ui/style';

const SCREEN_HEIGHT = Dimensions.get('window').height;

interface ModalPayProps {
  isModalVisible: boolean;
  setModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
  selectedId: 'card' | 'pay' | null;
  setSelectedId: React.Dispatch<React.SetStateAction<'card' | 'pay' | null>>;
  cardModal: boolean;
  setCardModal: React.Dispatch<React.SetStateAction<boolean>>;
  payModal: boolean;
  setPayModal: React.Dispatch<React.SetStateAction<boolean>>;
  success: boolean;
  setSuccess: React.Dispatch<React.SetStateAction<boolean>>;
}

const ModalPay = ({
  isModalVisible,
  setModalVisible,
  selectedId,
  setSelectedId,
  setCardModal,
  setPayModal,
}: ModalPayProps) => {
  const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
  const opacity = useRef(new Animated.Value(0)).current;
  const { bottom } = useSafeAreaInsets();
  const [load, setLoad] = React.useState(false);
  const { t } = useTranslation();
  useEffect(() => {
    if (isModalVisible) {
      Animated.parallel([
        Animated.timing(translateY, {
          toValue: 0,
          duration: 300,
          useNativeDriver: true,
        }),
        Animated.timing(opacity, {
          toValue: 1,
          duration: 300,
          useNativeDriver: true,
        }),
      ]).start();
    } else {
      Animated.parallel([
        Animated.timing(translateY, {
          toValue: SCREEN_HEIGHT,
          duration: 300,
          useNativeDriver: true,
        }),
        Animated.timing(opacity, {
          toValue: 0,
          duration: 200,
          useNativeDriver: true,
        }),
      ]).start();
    }
  }, [isModalVisible]);

  const handleBackdropPress = () => {
    setModalVisible(false);
    setSelectedId(null);
  };

  const handlePayment = () => {
    setLoad(true);

    setTimeout(() => {
      if (selectedId === 'pay') setPayModal(true);
      if (selectedId === 'card') setCardModal(true);

      setModalVisible(false);
      setSelectedId(null);
      setLoad(false);
    }, 200);
  };

  if (!isModalVisible) return null;

  return (
    <TouchableWithoutFeedback onPress={handleBackdropPress}>
      <Animated.View
        style={[
          styles.overlay,
          {
            opacity: opacity,
            bottom,
          },
        ]}
      >
        <TouchableWithoutFeedback>
          <Animated.View
            style={[
              styles.modalContent,
              {
                transform: [{ translateY: translateY }],
              },
            ]}
          >
            {/* CARD OPTION */}
            <TouchableOpacity
              style={[
                styles.option,
                {
                  backgroundColor: selectedId === 'card' ? '#28A7E81A' : '#fff',
                },
              ]}
              onPress={() => setSelectedId('card')}
            >
              <View style={PaymentStyle.paymentCard}>
                <CreditCard
                  color={selectedId == 'card' ? '#28A7E8' : '#000000'}
                  width={28}
                  height={28}
                />
                <Text
                  style={[
                    PaymentStyle.titleMethod,
                    { color: selectedId == 'card' ? '#28A7E8' : '#000' },
                  ]}
                >
                  {t('Bank kartasi')}
                </Text>
              </View>
              <View
                style={[
                  PaymentStyle.select,
                  {
                    backgroundColor:
                      selectedId === 'card' ? '#28A7E8' : '#FFFFFF',
                    borderColor: selectedId === 'card' ? '#28A7E8' : '#383838',
                  },
                ]}
              >
                {selectedId === 'card' && (
                  <Check color="#fff" width={20} height={20} />
                )}
              </View>
            </TouchableOpacity>

            {/* CASH OPTION */}
            <TouchableOpacity
              style={[
                styles.option,
                {
                  backgroundColor: selectedId === 'pay' ? '#28A7E81A' : '#fff',
                },
              ]}
              onPress={() => setSelectedId('pay')}
            >
              <View style={PaymentStyle.paymentCard}>
                <Usd
                  color={selectedId == 'pay' ? '#28A7E8' : '#000000'}
                  width={28}
                  height={28}
                  colorCircle={selectedId == 'pay' ? '#28A7E8' : '#000000'}
                />
                <Text
                  style={[
                    PaymentStyle.titleMethod,
                    { color: selectedId == 'pay' ? '#28A7E8' : '#000' },
                  ]}
                >
                  {t('Naqt pul')}
                </Text>
              </View>
              <View
                style={[
                  PaymentStyle.select,
                  {
                    backgroundColor:
                      selectedId === 'pay' ? '#28A7E8' : '#FFFFFF',
                    borderColor: selectedId === 'pay' ? '#28A7E8' : '#383838',
                  },
                ]}
              >
                {selectedId === 'pay' && (
                  <Check color="#fff" width={20} height={20} />
                )}
              </View>
            </TouchableOpacity>

            {/* BUTTON */}
            <TouchableOpacity
              style={[
                PaymentStyle.modalBtn,
                {
                  backgroundColor:
                    load || selectedId === null ? '#88888840' : '#28A7E8',
                },
              ]}
              onPress={handlePayment}
              disabled={load || selectedId === null}
            >
              {load ? (
                <ActivityIndicator size="small" color="#fff" />
              ) : (
                <Text
                  style={[
                    PaymentStyle.btnText,
                    {
                      color:
                        load || selectedId === null ? '#000000b9' : '#FFFF',
                    },
                  ]}
                >
                  {t("To'lash")}
                </Text>
              )}
            </TouchableOpacity>
          </Animated.View>
        </TouchableWithoutFeedback>
      </Animated.View>
    </TouchableWithoutFeedback>
  );
};

export default ModalPay;

const styles = StyleSheet.create({
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.4)',
    justifyContent: 'flex-end',
    zIndex: 30,
  },
  modalContent: {
    backgroundColor: '#F3FAFF',
    padding: 20,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    minHeight: 250,
    gap: 10,
  },
  option: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    borderRadius: 10,
    gap: 10,
    alignItems: 'center',
    padding: 20,
  },
});