// withHooks
import { BigbangPayment_list } from 'esoftplay/cache/bigbang/payment_list/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';

import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface EventToken_paymentArgs {

}
export interface EventToken_paymentProps {

}
export default function m(props: EventToken_paymentProps): any {

  let items = [
    {
      id: 1,
      title: 'ID Card + Token',
      price: 20000,
      qty: 1
    },
    {
      id: 2,
      title: 'Token',
      price: 7500,
      qty: 1
    }
  ]

  return (
    <View style={{ flex: 1 }}>
      <EventHeader title='Beli IDCard/Token' />
      <ScrollView>

        {
          items?.map((item: any, i: number) => {
            return (
              <View key={i} style={{ ...LibStyle.elevation(3), backgroundColor: '#fff', margin: 15, paddingHorizontal: 10, borderRadius: 5, marginBottom: 0, flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
                <View style={{ flex: 2 }}>
                  <Text allowFontScaling={false}>{item?.title}</Text>
                  <Text allowFontScaling={false}>{LibUtils.money(item?.price)}</Text>
                </View>
                <View style={{ flex: 1 }}>
                  <View style={{ flexDirection: 'row', marginVertical: 10, alignContent: 'center', alignItems: 'center', alignSelf: 'center' }}>
                    <TouchableOpacity onPress={() => { /* min() */ }}>
                      <View style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' }}>
                        <LibIcon name="minus" color="#e74c3c" />
                      </View>
                    </TouchableOpacity>
                    <Text style={{ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginLeft: 15, marginRight: 15 }}>{item?.qty}</Text>
                    <TouchableOpacity onPress={() => { /* add(item?.quota, item?.quota_used) */ }}>
                      <View style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' }}>
                        <LibIcon name="plus" color="#16a085" />
                      </View>
                    </TouchableOpacity>
                  </View>
                </View>
              </View>
            )
          })
        }

        <BigbangPayment_list
          priceTotal={100000}
          order_type={1}
          paymentId={2}
          onPressPayment={() => {

          }}
        />
      </ScrollView>
    </View>
  )
}