// withHooks
import { applyStyle } from 'esoftplay';
import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibList } from 'esoftplay/cache/lib/list/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 esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

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


export interface EventTurnstile_event_ticketArgs {

}
export interface EventTurnstile_event_ticketProps {

}
export default function m(props: EventTurnstile_event_ticketProps): any {
  const { event_id } = LibNavigation.getArgsAll(props)
  const [result, setResult, getResult] = useSafeState<any>(undefined)

  useEffect(() => {
    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
  }, [])

  useEffect(() => {
    loadDataGate()
  }, [])

  function loadDataGate() {
    new LibCurl("gate_turnstile_event_ticket?event_id=" + event_id, null, (res, msg) => {
      res?.push({
        id: 0,
        type: esp.lang("event/turnstile_event_ticket", "id")
      })
      const a = res.length > 0 && res.map((item: any, i: number) => {
        return ({
          ...item,
          checked: 1
        })
      })

      setResult(a)
    }, (err) => {
      // setError(err)
    }, 1)
  }

  function renderItem(item: any, i: number) {
    let _selectTypeTicket = item.checked == 1
    return (
      <TouchableOpacity activeOpacity={item.id == 0 ? 1 : 0} onPress={() => {
        if (item.id != 0) {
          setResult(LibObject.set(getResult(), item.checked == 0 ? 1 : 0)(i, "checked"))
        }

      }} style={applyStyle({ borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey })} >
        <View style={applyStyle({ margin: 15, width: LibStyle.width, flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' })} >
          <LibIcon name={_selectTypeTicket ? "checkbox-marked" : "checkbox-blank-outline"} style={{ /* opacity: textOpacity */ }} size={18} color={item.id == 0 ? "#c9c9c9" : _selectTypeTicket ? "#3ea4dc" : "#434343"} />
          <Text allowFontScaling={false} style={applyStyle({ marginLeft: 10, fontFamily: "Arial", fontSize: 13, /* opacity: textOpacity */fontWeight: "bold", fontStyle: "normal", letterSpacing: 0/* , color: LibStyle.colorBlue */ })} >{item.type}</Text>
        </View>
      </TouchableOpacity>
    )
  }

  function sendDataBack() {
    let _ids = result.filter((item: any) => item.checked == 1).map((it: any) => it.id)
    let data = {
      ids: _ids,
      title: esp.lang("event/turnstile_event_ticket", "ticket_type", _ids.length)
    }
    LibNavigation.sendBackResult(data)
  }

  return (
    <View style={{ flex: 1, backgroundColor: "#fff" }}>
      <EventHeader title={esp.lang("event/turnstile_event_ticket", "header_title")} />
      <LibList
        data={result}
        onRefresh={loadDataGate}
        renderItem={renderItem}
      />

      <EventButton label={esp.lang("event/turnstile_event_ticket", "label_next")} onPress={() => {
        sendDataBack()
      }} style={{ margin: 10 }} backgroundColor={LibStyle.colorPrimary} fontColor='#000' />
    </View>
  )
}