// withHooks

import { applyStyle } from 'esoftplay';
import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { EventOrder_itemProperty } from 'esoftplay/cache/event/order_item/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';
import React from 'react';
import { Platform, Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface EventTms_out_listArgs {

}
export interface EventTms_out_listProps {

}
export default function m(props: EventTms_out_listProps): any {
  const { data, scan_type, url_ticket_update, url_ticket_detail, price_type, gate_type, event_id, selectGate, typeScanner, event_title, configPriority }: any = LibNavigation.getArgsAll<any>(props)
  const [result, setResult] = useSafeState<any>(data)
  const [useAll, setUseAll] = useSafeState<boolean>(true)

  const transformStyle = Platform.OS == "ios" ? { transform: [{ scaleY: - 1 }] } : { transform: [{ rotateX: '180deg' }] }
  function renderItem(item: any, i: number) {
    return (
      <Pressable onPress={() => {
        setResult(LibObject.set(result, item?.checked == 0 ? 1 : 0)('list', i, 'checked'))
        setUseAll(false)
      }} key={i} style={{ margin: 10, marginBottom: 10, marginTop: 5, padding: 10, borderRadius: 10, backgroundColor: LibStyle.colorPrimary, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
        <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ fontSize: 20, fontWeight: 'bold', flexWrap: 'wrap', color: EventOrder_itemProperty.textColor(item?.color), marginRight: 10 }}>{item?.price_name}</Text>
        <LibIcon.Ionicons name={item?.checked == 1 ? 'checkmark-circle' : 'radio-button-off-outline'} size={26} color={EventOrder_itemProperty.textColor(item?.color)} />
      </Pressable>
    )
  }

  let args = {
    selectGate: selectGate,
    fromPage: 'event/tms_home',
    event_id: event_id,
    event_title: event_title,
    typeScanner: typeScanner,
    gate_type: gate_type,
    price_type: price_type,
    url_ticket_detail: url_ticket_detail,
    url_ticket_update: url_ticket_update,
    configPriority: configPriority,
    data: result,
    scan_type: scan_type
  }

  function quit(): void {
    let a = result?.list?.filter((item: any) => item.checked == 1).map((it: any) => it.id)
    if (a.length == 0) {
      LibToastProperty.show(esp.lang("event/tms_out_list", "select_ticket"))
      return
    } else {
      let url = "event_tms_out_confirm"
      let post = {
        event_id: event_id,
        ids: JSON.stringify(a),
        gate_id: selectGate?.id,
        trx_id: new Date().getTime() + "" + UserClass.state().get()?.id,
        price_id: result?.list?.filter((item: any) => item.checked == 1).map((it: any) => it.price_id),
        scanned_out: LibUtils.moment().format('YYYY-MM-DD HH:mm:ss'),
      }

      LibNavigation.replace('event/tms_out_success', { ...args, url, post })
    }
  }

  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <EventHeader title={esp.lang("event/tms_out_list", "header_title")} subtitle={esp.lang("event/tms_out_list", "exit_gate", data?.event_name)} />
      <ScrollView style={{ marginTop: 20 }}>
        {
          result?.list?.map(renderItem)
        }
      </ScrollView>
      <View style={{ padding: 10 }}>
        <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
          <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode={'tail'} style={{ fontWeight: 'bold', fontSize: 14, letterSpacing: 1 }}>{result?.list?.filter((item: any) => item.checked == 1).length + " Tiket digunakan"}</Text>
          <TouchableOpacity onPress={() => {
            let a = result?.list?.map((item: any, i: number) => {
              return { ...item, checked: useAll ? 0 : 1 }
            })
            let b = {
              ...result,
              list: a
            }
            setResult(b)
            setUseAll(useAll ? false : true)
          }} style={applyStyle({ paddingHorizontal: 15, borderWidth: 1, borderColor: 'rgba(0, 0, 0, 0)', height: 35, borderRadius: 16, backgroundColor: useAll ? LibStyle.colorRed : LibStyle.colorGreen, flexDirection: 'row', alignItems: 'center', alignContent: 'center', justifyContent: 'center' })} >
            <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: '#fff', marginRight: 15 })} >{useAll ? esp.lang("event/tms_in_list", "cancel_use") : esp.lang("event/tms_in_list", "use_all")}</Text>
            <LibIcon.Ionicons size={18} color="#fff" name={useAll ? "close" : "checkmark-done"} />
          </TouchableOpacity>
        </View>

        <EventButton
          label={esp.lang("event/tms_out_list", "exit")}
          backgroundColor={LibStyle.colorRed}
          onPress={() => {
            quit()
          }}
          style={{ marginTop: 30 }}
        />

      </View>
    </View>
  )
}