// withHooks
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/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 { EventTms_dashboardProperty } from 'esoftplay/cache/event/tms_dashboard/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
import React, { useEffect } from 'react';
import { Pressable, ScrollView, Text, View } from 'react-native';


export interface EventTms_gateArgs {

}
export interface EventTms_gateProps {

}

const stateGate = useGlobalState({})

export function stateSelectedGate(): useGlobalReturn<any> {
  return stateGate
}

const stateHall = useGlobalState({})

export function stateSelectedHall(): useGlobalReturn<any> {
  return stateHall
}

export default function m(props: EventTms_gateProps): any {
  const { is_v2, typeScanner } = LibNavigation.getArgsAll(props)

  const [selectGate, setSelectGate] = useSafeState<any>()
  const [gates, setGates] = useSafeState<any>()

  useEffect(() => {
    if (typeScanner == "tms") {
      loadDataGates()
    } else {
      loadDataHall()
    }
    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
  }, [])

  function loadDataGates() {
    let post = {
      event_id: EventTms_dashboardProperty.stateSelectedEvent()?.get()?.id
    }
    new LibCurl('event_gate', post, (res, msg) => {
      setGates(res)
    }, (error) => {
      LibDialog.warning(esp.lang("event/tms_gate", "warning_load"), error?.message)
      LibNavigation.back()
    }, 1)
  }

  function loadDataHall() {
    let post = {
      event_id: EventTms_dashboardProperty.stateSelectedEvent()?.get()?.id
    }
    new LibCurl('event_hall', post, (res, msg) => {
      setGates(res)
    }, (error) => {
      LibDialog.warning(esp.lang("event/tms_gate", "warning_loadhall"), error?.message)
      LibNavigation.back()
    }, 1)
  }

  function renderGates(item: any, i: number) {
    let _selectGate = item.id == selectGate?.id
    return (
      <Pressable key={i} onPress={() => {
        if (typeScanner == "tms") {
          stateSelectedGate().set(item)
        } else {
          stateSelectedHall()?.set(item)
        }

        setSelectGate(item)
        let a = LibObject.set(EventTms_dashboardProperty.closingDataState().get(), item?.id)('gate_id')
        EventTms_dashboardProperty.closingDataState().set(a)
        LibNavigation.back()
        LibNavigation.navigate(is_v2 ? 'tms/tms_home' : 'event/tms_home', { selectedGate: item, typeScanner: typeScanner })
      }} style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', backgroundColor: _selectGate ? LibStyle.colorGrey : '#fff', ...LibStyle.elevation(2), padding: 16, marginBottom: 10, marginHorizontal: 15, borderRadius: 5, flex: 1 }}>
        <LibIcon name={_selectGate ? "radiobox-marked" : "radiobox-blank"} size={18} color={_selectGate ? "#3ea4dc" : "#434343"} />
        <Text allowFontScaling={false} style={{ marginLeft: 10, fontSize: 17, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: '#9e9e9e', paddingLeft: 3, paddingRight: 3 }}>{item.name}</Text>
      </Pressable>
    )
  }

  if (!gates) {
    return (
      <View style={{ flex: 1 }}>
        <EventHeader title={typeScanner == "tms" ? esp.lang("event/tms_gate", "header_title1") : esp.lang("event/tms_gate", "header_title2")} subtitle={esp.lang("event/tms_gate", "gate_sub")} />
        <LibLoading />
      </View>
    )
  }

  return (
    <View style={{ flex: 1 }}>
      <EventHeader title={typeScanner == "tms" ? esp.lang("event/tms_gate", "header_title1") : esp.lang("event/tms_gate", "header_title2")} subtitle={esp.lang("event/tms_gate", "gate_sub")} />
      <ScrollView style={{}}>
        <Text allowFontScaling={false} style={{ margin: 20, marginBottom: 10, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, paddingLeft: 3, paddingRight: 3 }}>{esp.lang("event/tms_gate", "text_select", typeScanner == "tms" ? esp.lang("event/tms_gate", "gate") : esp.lang("event/tms_gate", "hall"))}</Text>
        {
          gates?.length > 1 && gates?.map(renderGates)
        }
      </ScrollView>
    </View>
  )
}