// withHooks
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import esp from 'esoftplay/esp';
import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
import { useRef } from 'react';

import { EventTms_dashboardProperty } from 'esoftplay/cache/event/tms_dashboard/import';
import { EventTms_gateProperty } from 'esoftplay/cache/event/tms_gate/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/import';
import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface EventTms_dashboardArgs {

}
export interface EventTms_dashboardProps {

}


const stateClosingData = useGlobalState({
  event_id: 0,
  event_name: '',
  gate_id: 0,
}, {
  persistKey: 'event/tms_dashboard',
  loadOnInit: true
})

export function closingDataState(): useGlobalReturn<any> {
  return stateClosingData
}

const stateEvent = useGlobalState({})

export function stateSelectedEvent(): useGlobalReturn<any> {
  return stateEvent
}

export default function m(props: EventTms_dashboardProps): any {
  const [user] = UserClass.state().useState()
  const dialogClosing = useRef<LibSlidingup>(null)
  let dataEvent = user?.is_tms[0]


  function loadGate(event_id: any, is_v2: boolean) {
    let post = {
      event_id: event_id
    }
    LibProgress?.show(esp.lang("event/tms_dashboard", "please_wait_loading_data_gate"))
    new LibCurl('event_gate', post, (res, msg) => {
      LibProgress.hide()
      if (res.length == 1) {
        let a = LibObject.set(EventTms_dashboardProperty.closingDataState().get(), res[0].id)('gate_id')
        EventTms_dashboardProperty.closingDataState().set(a)
        LibNavigation.navigate(is_v2 ? 'tms/tms_home' : 'event/tms_home', { selectedGate: res[0], typeScanner: "tms" })
        EventTms_gateProperty?.stateSelectedGate()?.set(res?.[0])
      } else {
        LibNavigation.navigate('event/tms_gate', { typeScanner: 'tms', is_v2: is_v2 })
      }
    }, (error) => {
      LibProgress.hide()
      LibDialog.warning(esp.lang("event/tms_gate", "warning_load"), error?.message)
    }, 1)
  }

  function loadHall(event_id: any, is_v2: boolean) {
    let post = {
      event_id: event_id
    }
    LibProgress?.show(esp.lang("event/tms_dashboard", "please_wait_loading_data_hall"))
    new LibCurl('event_hall', post, (res, msg) => {
      LibProgress.hide()
      if (res.length == 1) {
        LibNavigation.navigate(is_v2 ? 'tms/tms_home' : 'event/tms_home', { selectedGate: res[0], typeScanner: "hall" })
        EventTms_gateProperty.stateSelectedHall().set(res?.[0])
      } else {
        LibNavigation.navigate('event/tms_gate', { typeScanner: 'hall', is_v2: is_v2 })
      }
    }, (error) => {
      LibProgress.hide()
      LibDialog.warning(esp.lang("event/tms_gate", "warning_loadhall"), error?.message)
    }, 1)
  }

  let menus = [
    {
      id: 1,
      title: esp.lang("user/profile", "tms_scanner"),
      icon: 'menu/ic_turnstile.png',
      active: 1,
      color_accent: '#FFC523',
      onPress: () => {
        let a = LibObject.set(stateClosingData?.get(), dataEvent?.id)('event_id')
        let b = LibObject.set(a, dataEvent?.name)('event_name')
        stateClosingData?.set(b)
        stateSelectedEvent()?.set(dataEvent)
        loadGate(dataEvent?.id, false)
      }
    },
    {
      id: 2,
      title: esp.lang("user/profile", "hall_scanner"),
      icon: 'menu/ic_hall.png',
      active: 1,
      color_accent: '#01D0FB',
      onPress: () => {
        stateSelectedEvent()?.set(dataEvent)
        loadHall(dataEvent?.id, false)
      }
    },
    {
      id: 3,
      title: esp.lang("user/profile", "exchange"),
      icon: 'menu/ic_redempt.png',
      active: 1,
      color_accent: '#800020',
      onPress: () => {
        LibNavigation.navigate('event/exchange_ticket', { dataEvent: dataEvent })
      }
    },
    {
      id: 4,
      title: esp.lang("event/tms_dashboard", "closing_tms"),
      icon: 'failed_icon.png',
      active: 1,
      color_accent: '#D0004F',
      onPress: () => {
        dialogClosing.current?.show()
      }
    },
    {
      id: 5,
      title: esp.lang("user/profile", "tms_scanner") + " (Testing)",
      icon: 'menu/ic_turnstile.png',
      active: esp.isDebug("") ? 1 : 0,
      color_accent: '#FFC523',
      onPress: () => {
        let a = LibObject.set(stateClosingData?.get(), dataEvent?.id)('event_id')
        let b = LibObject.set(a, dataEvent?.name)('event_name')
        stateClosingData?.set(b)
        stateSelectedEvent()?.set(dataEvent)
        loadGate(dataEvent?.id, true)
      }
    },
    {
      id: 6,
      title: esp.lang("user/profile", "hall_scanner") + " (Testing)",
      icon: 'menu/ic_hall.png',
      active: esp.isDebug("") ? 1 : 0,
      color_accent: '#01D0FB',
      onPress: () => {
        stateSelectedEvent()?.set(dataEvent)
        loadHall(dataEvent?.id, true)
      }
    },
  ]

  const options = [
    {
      id: 1,
      title: esp.lang("event/tms_dashboard", "log_tms"),
      onPress: () => {
        LibNavigation.navigate('event/tms_log')
        dialogClosing.current?.show()
      }
    },
    {
      id: 2,
      title: esp.lang("event/tms_dashboard", "log_exchange"),
      onPress: () => {
        dialogClosing.current?.show()
        LibNavigation.navigate('event/exchange_ticket_list')
      }
    },
  ]

  function renderMenu(item: any, i: number) {
    return (
      <TouchableOpacity
        onPress={item.onPress}
        key={i} style={{ ...LibStyle.elevation(3), backgroundColor: item.color_accent, paddingBottom: 3, margin: 10, marginBottom: 0 }}>
        <View style={{ padding: 10, backgroundColor: '#fff', height: 80, }}>
          <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 18, letterSpacing: 1 }}>{item.title}</Text>

          <View style={{ position: 'absolute', bottom: 10, right: 10 }}>
            <LibPicture source={esp.assets(item.icon)} style={{ height: 50, width: 50 }} />
          </View>

        </View>
      </TouchableOpacity>
    )
  }

  return (
    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
      <EventHeader title={'Dashboard TMS'} />

      <ScrollView>
        {
          menus?.filter((x: any) => x.active == 1).map(renderMenu)
        }
      </ScrollView>
      <LibSlidingup ref={dialogClosing}>
        <View style={{ alignItems: 'center', marginBottom: 17 }} >
          <View style={{ width: LibStyle.width - 30, borderRadius: 13, overflow: 'hidden', }} >
            <ScrollView showsVerticalScrollIndicator={false} style={{ borderRadius: 13, overflow: 'hidden', backgroundColor: "white", maxHeight: LibStyle.height * 0.5 }} >
              <View style={{ marginVertical: 17 }} >
                <LibTextstyle textStyle="caption1" text={esp.lang("event/tms_dashboard", "closing_tms")} style={{ textAlign: 'center', fontWeight: "bold", color: "#888" }} />
              </View>
              {
                options.map((opt, i) => (
                  <TouchableOpacity
                    key={i}
                    style={{ paddingHorizontal: 17, paddingVertical: 15, alignItems: 'center', borderTopWidth: 1, borderTopColor: "#f4f4f4" }}
                    onPress={opt.onPress} >
                    <LibTextstyle text={opt.title} textStyle="body" />
                  </TouchableOpacity>
                ))
              }
            </ScrollView>
            <View style={{ borderRadius: 13, marginTop: 10, backgroundColor: "white" }} >
              <TouchableOpacity
                style={{ paddingHorizontal: 17, paddingVertical: 15, alignItems: 'center' }}
                onPress={() => {
                  dialogClosing.current?.hide()
                }} >
                <LibTextstyle text={esp.lang("event/tms_dashboard", "cancel")} textStyle="body" style={{ fontWeight: "bold", color: LibStyle.colorBlue }} />
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </LibSlidingup>
    </View>
  )
}