import React, {useContext, useEffect, useState} from 'react';
import {
  Dimensions,
  Image,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  ScrollView,
} from 'react-native';
import {color, textStyles} from '../../styles/Styles';
import Button from '../button/Button';
import SuccessFailModal from '../Modal/SuccessFailModal';
import Loading from '../Loading/Loading';
import {StyleSheet} from 'react-native';
import CryptoJS from 'react-native-crypto-js';
import CheckoutService from '../../services/CheckoutService';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Ionicons from 'react-native-vector-icons/Ionicons';
import CustomDropDown from '../input/CustomDropDown';
import {WebView} from 'react-native-webview';

interface AddisPayProps {
  transaction_detail: any;
  order: any;
  navigation: any;
  //   source: any;
}
const AddisPay: React.FC<AddisPayProps> = ({
  transaction_detail,
  order,
  navigation,
  //   source,
}) => {
  const [isLoading, setIsLoading] = useState(false);
  const [selectedType, setselectedType] = useState('ussd');
  const [modalPress, setmodalPress] = useState(false);
  const [savedtransaction_detail, setsavedtransaction_detail] =
    useState(transaction_detail);
  console.log('savedtransactiondet', savedtransaction_detail);

  let encrypted = (message: string) => {
    return CryptoJS.AES.encrypt(message, 'addispay').toString();
  };

  const [paymentData, setpaymentData] = useState({
    uuid: order?.uuid,
    phone_number: transaction_detail?.data?.phone_number,
    encrypted_total_amount: encrypted(transaction_detail?.data?.total_amount),
    merchant_name: transaction_detail.merchantName,
  });

  const [successModal, setSuccessModal] = useState({
    visibility: false,
    fail: false,
    message: '',
    title: '',
  });

  // useEffect(() => {

  //   transaction_detail && payWithAddispay();
  // }, [transaction_detail]);

  const [selectedSource, setSelectedSource] = useState('wallet');
  const paymentSource = ['wallet', 'card', 'international'];
  const paymentSourceTypes = [
    {
      name: 'wallet',
      icon: (
        <AntDesign
          name="mobile1"
          size={24}
          color={selectedSource == 'wallet' ? 'white' : color.outline}
        />
      ),
    },
    {
      name: 'card',
      icon: (
        <Ionicons
          name="card-outline"
          size={24}
          color={selectedSource == 'card' ? 'white' : color.outline}
        />
      ),
    },
    {
      name: 'international',
      icon: (
        <Ionicons
          name="globe-outline"
          size={24}
          color={selectedSource == 'international' ? 'white' : color.outline}
        />
      ),
    },
  ];

  const [selectedService, setSelectedService] = useState({
    catagory: 'wallet',
    fee: 1.5,
    id: 82,
    name: 'telebirr',
    photo:
      'https://banks-management.addispay.et/uploads/1724487646288601474_telebirr.png',
    service: 'both',
  });
  const [activeBAnks, setActiveBanks] = useState('');
  const [service, setService] = useState({id: 1, name: 'otp'});

  const fetchActive = () => {
    const url = 'https://banks-management.addispay.et/payment_methods';
    const options = {
      method: 'GET',
      headers: {
        Accept: 'application/json',
      },
    };

    fetch(url, options)
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
      })
      .then(
        data => setActiveBanks(data),
        //  { let mergedArray:any = [];
        //   if (data.both) {
        //     mergedArray = mergedArray.concat(data.both);
        //   }

        //   // Concatenate the 'otp' array if it exists and is not null
        //   if (data.otp) {
        //     mergedArray = mergedArray.concat(data.otp);
        //   }

        //   // Concatenate the 'ussd' array if it exists
        //   if (data.ussd) {
        //     mergedArray = mergedArray.concat(data.ussd);
        //   }
        //   setActiveBanks(mergedArray)
        // }

        // setActiveBanks(data)
      )
      .catch(error => {
        responseModal('service unavailable please try again later', true);
        console.error('There was a problem with your fetch operation:', error);
      });
  };

  useEffect(() => {
    fetchActive();
  }, []);

  const responseModal = (message: string, fail?: boolean, Press?: any) => {
    console.log('first', Press);
    setSuccessModal({
      ...successModal,
      visibility: true,
      message: message,
      fail: fail === 'false' ? false : true,
      title: Press ? 'ok' : 'close',
    });
    // Press ? setmodalPress(true) : setmodalPress("")
  };

  const styles = StyleSheet.create({
    input: {
      borderWidth: 1,
      borderRadius: 15,
      borderColor: color.outline,
      padding: 15,
    },
    paymentMethodLogo: {
      width: Dimensions.get('window').width / 6,
      height: Dimensions.get('window').width / 8,
      borderRadius: 20,
      resizeMode: 'contain',
      borderWidth: 3,
      padding: 10,
    },
    addispayLogo: {
      width: Dimensions.get('window').width / 2.5,
      height: Dimensions.get('window').width / 6,
      borderRadius: 20,
      resizeMode: 'contain',
      paddingTop: 20,
    },
    paymentMethods: {
      paddingTop: 20,
      gap: 10,
    },
    logo: {
      width: 66,
      height: 58,
    },
  });

  const Checkout = new CheckoutService();

  return (
    <View style={[{flex: 1}]}>
      {isLoading ? (
        <Loading />
      ) : (
        <View style={[{backgroundColor: color.primary, flex: 1}]}>
          {/* top  */}
          <View style={[{}]}>
            <TouchableOpacity
              onPress={() => navigation.goBack()}
              style={[{position: 'absolute', top: 15, left: 20}]}>
              <FontAwesome name="angle-left" size={34} color={color.white} />
            </TouchableOpacity>

            <View style={[{alignItems: 'center', justifyContent: 'center'}]}>
              <Image
                style={styles.addispayLogo}
                source={require('./assets/addipaylogopngwhite-01.png')}
              />
            </View>
          </View>
          <View style={[{flex: 1}]}>
            <WebView
              source={{
                uri: `https://checkouts.addispay.et/get-orders/${paymentData.uuid}`,
              }}
              style={{marginTop: 20, flex: 1}}
            />
          </View>

          <View>
            <SuccessFailModal
              modalVisible={successModal.visibility}
              setModalVisible={
                value =>
                  successModal.fail == true
                    ? setSuccessModal({...successModal, visibility: value})
                    : (setSuccessModal({...successModal, visibility: value}),
                      navigation.navigate('Home-screen'))
                // setSuccessModal({ ...successModal, visibility: value })
              }
              title={successModal.title}
              message={successModal.message}
              fail={successModal.fail}
              onpress={() => {
                modalPress
                  ? (setSuccessModal({...successModal, visibility: false}),
                    setmodalPress(false))
                  : successModal.fail == true
                  ? (setSuccessModal({...successModal, visibility: false}),
                    navigation.navigate('Home-screen'))
                  : setSuccessModal({...successModal, visibility: false});
                navigation.navigate('Home-screen');
              }}
            />
          </View>
        </View>
      )}
    </View>
  );
};

export default AddisPay;