// withHooks
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 { 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_gateArgs {

}
export interface EventTurnstile_event_gateProps {

}
export default function m(props: EventTurnstile_event_gateProps): any {
  const { api_key, event_id } = LibNavigation.getArgsAll(props)
  const [result, setResult] = useSafeState<any>(undefined)
  const [selectGate, setSelectGate] = useSafeState<any>()
  const [error, setError] = useSafeState<any>()

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

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

  function loadDataGate() {
    new LibCurl("gate_turnstile_event_gate?event_id=" + event_id, null, (res, msg) => {
      setResult(res)
    }, (err) => {
      // setError(err)
    }, 1)
  }


  function renderGate(item: any, i: number) {
    let _selectGate = item.gate_id == selectGate?.gate_id

    return (
      <TouchableOpacity onPress={() => {
        setSelectGate(item)
        LibNavigation.sendBackResult(item)
      }} style={styleId_Z1965m2} >
        <View style={styleId_ZPIul6} >
          <LibIcon name={_selectGate ? "radiobox-marked" : "radiobox-blank"} size={18} color={_selectGate ? "#3ea4dc" : "#434343"} />
          <Text allowFontScaling={false} style={styleId_2eEf4t} >{item.gate_name}</Text>
        </View>
      </TouchableOpacity>
    )
  }


  return (
    <View style={{ flex: 1, backgroundColor: "#fff" }}>
      <EventHeader title={esp.lang("event/turnstile_event_gate", "header_title")} />
      <LibList
        data={result}
        onRefresh={loadDataGate}
        renderItem={renderGate}
      />
    </View>
  )
}
const styleId_Z1965m2: any = { borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }
const styleId_ZPIul6: any = { margin: 15, width: LibStyle.width, flex: 1, flexDirection: 'row' }
const styleId_2eEf4t: any = { marginLeft: 10, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0/* , color: LibStyle.colorBlue */ }