import * as React from 'react';

import { View, Text, Pressable, Button } from 'react-native';
import { createRequest, getPaymentTypes } from 'fawaterak-online-payment';

type PAYMENT_METHOD_DATA = {
  '0': string;
  '+2 hours': string;
  '+4 hours': string;
  '+6 hours': string;
  '+12 hours': string;
  '+1 days': string;
  '+2 days': string;
};

type PATMENT_TYPE = {
  paymentId: number;
  paymentCode: string;
  paymentMethod: string;
  paymentMethodData: PAYMENT_METHOD_DATA;
};

export default function App() {
  const [paymentTypes, setPaymentTypes] = React.useState<Array<PATMENT_TYPE>>(
    []
  );

  const [paymentMethodId, setPaymentMethodId] = React.useState<number>(0);

  React.useEffect(() => {
    getPaymentTypes('USER_TOKEN_KEY').then((res) => {
      setPaymentTypes(res as PATMENT_TYPE[]);
    });
  }, []);

  const saveSelectedPaymentType = async () => {
    let request = {
      payment_method_id: paymentMethodId, // paymentId
      cartTotal: 10,
      currency: 'EGP',
      customer: {
        first_name: 'FIRST NAME',
        last_name: 'LAST NAME',
        email: 'Test@email.com',
        phone: '010xxxxxxxx',
        address: 'ADDRESS',
      },
      cartItems: [
        {
          name: 'PRODUCT NAME',
          price: 10,
          quantity: 1,
        },
      ],
    };

    const apiPath = '/invoiceInitPay';
    await createRequest('USER_TOKEN_KEY', apiPath, request);
  };

  return (
    <View>
      {paymentTypes.map((type, index) => {
        return (
          <Pressable
            key={index}
            onPress={() => setPaymentMethodId(type.paymentId)}
          >
            <Text> {type.paymentMethod} </Text>
          </Pressable>
        );
      })}
      <Button onPress={saveSelectedPaymentType} title="Save" />
    </View>
  );
}