import { View, Text, ScrollView, Pressable, StyleSheet, Image } from 'react-native'
import React, { useState } from 'react'
import { Ionicons } from '@expo/vector-icons';
import PaymentOption from "../components/PaymentOption";
import PaymentFooter from "../components/PaymentFooter";
import { LinearGradient } from 'expo-linear-gradient';
import { useStore } from '../store/store';


const PaymentOptionList = [
  {
    id: 1,
    name: 'Debit/Credit ',
    icon: require('../../assets/images/payment/debit_credit.png'),
    iconStatus: true,
  },
  {
    id: 2,
    name: 'Apple Pay',
    icon: require('../../assets/images/payment/apple_pay.png'),
    iconStatus: false,
  },
  {
    id: 3,
    name: 'Google Pay',
    icon: require('../../assets/images/payment/google_pay.png'),
    iconStatus: false,
  },
]


const Payment = ({navigation, route}: any) => {
  const calculateCartPrice = useStore((state: any) => state.calculateCartPrice);
  const addToReceiptList = useStore(((state: any) => state.addToReceiptList));

  const [paymentMethod, setPaymentMenthod] = useState('Credit card');
  const [showApprove, setShowApprove] = useState(false);

  
  const buttonPressHandler = () => {
    setShowApprove(true);
    addToReceiptList();
    calculateCartPrice();
    setTimeout(() => {
      setShowApprove(false);
      navigation.navigate('receipt')
    }, 3000)
  };

  return (
    <View style={{flex:1, backgroundColor: 'white'}}>
      {showApprove ? (
        <View style={{flex: 1, position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, zIndex: 1000, backgroundColor: 'rgba(0, 0, 0, 0.5)', justifyContent: 'center', alignItems: 'center'}}>
          <Image source={require('../../assets/images/misc/check.png')} style={{width: 100, height: 100}} />
          <Text style={{marginTop: 20, marginBottom: 10, fontSize: 26, color: '#88D66C'}}>Approved!</Text>
          <Text style={{fontSize: 20, color: '#88D66C'}}>Thank you for your order!</Text>
        </View>
      ) : (
        <></>
      )}
      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1}}>
        <View style={{marginTop: 20, paddingHorizontal: 20, paddingVertical: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
          <Pressable onPress={() => {navigation.pop()}}>
            <Ionicons name="chevron-back" size={24} color="gray" />
          </Pressable>
          <Text style={{fontSize: 28, fontWeight: 600}}>Payments</Text>
          <View style={{padding: 10}}/>
        </View>
        <View style={{padding: 15, gap: 15}}>
          <Pressable onPress={() => {setPaymentMenthod('Credit Card')}}>
            <LinearGradient colors={['#B2B2B2', '#3C4048']} start={[0, 0.5]} end={[1, 0.5]} style={{padding: 10, borderRadius: 10}}>
              <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                <View/>
                <Image source={require('../../assets/images/payment/master.png')} style={{ width: 70, height: 70, resizeMode: "contain"}}/>
              </View>
              <View style={{marginTop: 20}}>
                <Image source={require('../../assets/images/payment/chip.png')} style={{ width: 50, height: 50, resizeMode: "contain"}}/>
              </View>
              <View style={{marginTop: 50}}>
                <Text style={{fontSize: 18, color: 'white'}}>Fakey McFaker</Text>
              </View>
            </LinearGradient>
          </Pressable>
          {PaymentOptionList.map((data: any) => (
            <Pressable key={data.name} onPress={() => {setPaymentMenthod(data.name);}}>
              <PaymentOption 
                paymentMethod={paymentMethod}
                name={data.name}
                icon={data.icon}
                iconStatus={data.iconStatus}
              />
            </Pressable>
          ))}
        </View>
      </ScrollView>
      <PaymentFooter
        buttonTitle={`Pay with ${paymentMethod}`}
        price={{price: route.params.amount, currency: '$'}}
        buttonPressHandler={buttonPressHandler}
      />
    </View>
  )
}

export default Payment

const styles = StyleSheet.create({})