// withHooks
import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventToggle } from 'esoftplay/cache/event/toggle/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 { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

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


export interface EventTurnstile_settingsArgs {

}
export interface EventTurnstile_settingsProps {

}

export interface Turnstile_settingsItem2 extends EventTurnstile_settingsProps {
  title: string
  value: string
  iconLeft: string
  isTouchable: boolean
  isDisable?: boolean
  onPress: () => void,
}

function Item(props: Turnstile_settingsItem2) {
  return (
    <Pressable onPress={props.onPress} style={{ backgroundColor: props.isDisable ? "#f1f2f3" : "transparent", flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey, paddingBottom: 7, paddingTop: 7, paddingHorizontal: 10, paddingRight: 5 }}>
      <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
        <LibIcon name={props.iconLeft} style={{ opacity: props.isDisable ? 0.2 : 1 }} />
        <View style={{ marginLeft: 8, flex: 2, flexDirection: 'row', opacity: props.isDisable ? 0.2 : 1 }}>
          <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', fontSize: 12 }}>{props.title}</Text>
          <Text allowFontScaling={false} style={{ color: LibStyle.colorRed }}>*</Text>
        </View>
      </View>
      <View style={{ marginLeft: 10, flex: 1, justifyContent: 'flex-end', flexDirection: 'row', alignContent: 'center', alignItems: 'center', }}>
        <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode='middle' style={{ opacity: props.isDisable ? 0.5 : 1, flex: 1, textAlign: 'right', marginRight: 5, fontFamily: 'SFProText', fontSize: 12, color: LibStyle.colorTextPrimary }}>{props.value}</Text>
        {
          props.isTouchable &&
          <LibIcon name='chevron-right' color={LibStyle.colorTextPrimary} style={{ opacity: props.isDisable ? 0.4 : 1 }} />
        }
        {/* <LibIcon name='logo' color={LibStyle.colorTextPrimary} /> */}
      </View>
    </Pressable>
  )
}

export const config = esp.config();

export default function m(props: EventTurnstile_settingsProps): any {
  const { serial_number } = LibNavigation.getArgsAll<any>(props)
  const [userScan, setUserScan] = useSafeState<boolean>(false)
  const [forExhibitor, setForExhibitor] = useSafeState<boolean>(false)
  const [result, setResult] = useSafeState<any>(undefined)
  const [selectedEvent, setSelectedEvent] = useSafeState<any>()
  const [selectedGate, setSelectedGate] = useSafeState<any>()
  const [selectedTypeGate, setSelectedTypeGate] = useSafeState<any>()
  const [selectedTypeTicket, setSelectedTypeTicket] = useSafeState<any>()

  const dialogTypeGate = useRef<LibSlidingup>(null)


  const typeGate = [
    {
      id: 1,
      title: esp.lang("event/turnstile_settings", "entrance"),
      icon: 'login'
    },
    {
      id: 0,
      title: esp.lang("event/turnstile_settings", "exit"),
      icon: 'logout'
    }
  ]


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


  function checkStatus() {
    LibProgress.show(esp.lang("event/turnstile_settings", "please_wait"))
    new LibCurl("gate_turnstile?serial_number=" + serial_number, null, (res, msg) => {
      setResult(res)
      LibProgress.hide()
      // default value
      let defaultValue = res?.turnstile_data_backup
      let dataEvent = {
        event_id: defaultValue.event_id,
        event_name: defaultValue.event_name
      }
      setSelectedEvent(dataEvent)

      let dataGate = {
        gate_id: defaultValue.gate_id,
        gate_name: defaultValue.gate_name
      }
      setSelectedGate(dataGate)

      let dataTypeGate = {
        id: defaultValue.gate_type,
        title: defaultValue.gate_type == 1 ? esp.lang("event/turnstile_settings", "entrance") : esp.lang("event/turnstile_settings", "exit")
      }
      setSelectedTypeGate(dataTypeGate)

      let dataTypeTicket = {
        ids: defaultValue.ticket_types,
        title: defaultValue.ticket_types.length + esp.lang("event/turnstile_settings", "type_ticket")
      }
      setSelectedTypeTicket(dataTypeTicket)

    }, (error) => {
      LibProgress.hide()
      registerTurnstile()
    }, 1)
  }

  function registerTurnstile() {
    let post = {
      serial_number: serial_number
    }
    LibProgress.show(esp.lang("event/turnstile_settings", "please_wait"))
    new LibCurl("gate_turnstile", post, (res, msg) => {
      LibProgress.hide()
    }, (error) => {
      LibProgress.hide()
    }, 1)
  }

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

      let _ids = a.filter((item: any) => item.checked == 1).map((it: any) => it.id)
      let data = {
        ids: _ids,
        title: _ids.length + esp.lang("event/turnstile_settings", "type_ticket")
      }
      setSelectedTypeTicket(data)
      LibProgress.hide()
    }, (err) => {
      LibProgress.hide()
      LibDialog.warning(esp.lang("event/turnstile_settings", "err"), err?.message)
    }, 1)
  }

  function checkInput() {
    if (!selectedEvent) {
      LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_event_first"))
      return false
    }
    if (!selectedGate) {
      LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_gate_event"))
      return false
    }
    if (!selectedTypeGate) {
      LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_entrance_or_exit"))
      return false
    }
    if (!selectedTypeTicket) {
      LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_type_ticket"))
      return false
    }

    return true
  }

  function settingTurnstile() {
    LibDialog.warningConfirm(esp.lang("event/turnstile_settings", "warning"), esp.lang("event/turnstile_settings", "submit_this"), esp.lang("event/turnstile_settings", "yes"), () => {
      let post = {
        event_id: selectedEvent?.event_id,
        gate_id: selectedGate?.gate_id,
        gate_type: selectedTypeGate?.id,
        ticket_types: forExhibitor ? "" : selectedTypeTicket?.ids.join('|'),
        user_scan: userScan ? 1 : 0,
        serial_number: serial_number,
        type: forExhibitor ? 2 : 1 //"type":"1=scan tiket, 2 = scan idcard, 3 = scan tiket dan idcard "
      }

      LibProgress.show(esp.lang("event/turnstile_settings", "please_wait"))
      new LibCurl("gate_turnstile_setting", post, (res, msg) => {
        LibProgress.hide()
        LibNavigation.back()
        LibNavigation.navigate('event/turnstile_settings_otp', { data: res, serial_number: serial_number })
      }, (err) => {
        LibProgress.hide()
        LibDialog.warning(esp.lang("event/turnstile_settings", "err1"), err?.message)
      }, 1)

    }, esp.lang("event/turnstile_settings", "no"), () => {

    })
  }

  function renderTypeGate(item: any, i: number) {
    const styleId_Z2dCK0A: any = { backgroundColor: item.id == 1 ? LibStyle.colorGreen : LibStyle.colorRed, padding: 10, borderRadius: 5, ...LibStyle.elevation(2), justifyContent: 'center', alignContent: 'center', alignItems: 'center' }
    return (
      <TouchableOpacity onPress={() => {
        setSelectedTypeGate(item)
        dialogTypeGate.current!.hide()
      }} key={i} style={styleId_Z2dCK0A}>
        <LibIcon name={item.icon} color='#fff' />
        <Text allowFontScaling={false} style={styleId_QwGnx}>{item.title}</Text>
      </TouchableOpacity>
    )
  }

  return (
    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
      <EventHeader title={esp.lang("event/turnstile_settings", "setting_turnstile")} />
      <ScrollView>
        <View style={{ backgroundColor: '#fff', borderRadius: 10, margin: 10, ...LibStyle.elevation(2) }}>
          <Item isTouchable onPress={() => {
            LibNavigation.navigateForResult('event/turnstile_event_list', { api_key: result?.api_key }).then((item: any) => {
              setSelectedEvent(item)
              setSelectedGate(undefined)
              setSelectedTypeGate(undefined)
              setSelectedTypeTicket(undefined)

              // set Type ticket
              loadDataGate(item.event_id)
            })
          }} iconLeft='calendar-today' title={esp.lang("event/turnstile_settings", "select_event")} value={selectedEvent?.event_name} />
          <Item isTouchable iconLeft='door-open' title={esp.lang("event/turnstile_settings", "select_gate")} value={selectedGate?.gate_name} onPress={() => {
            if (!selectedEvent) {
              LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_event_first"))
            } else {
              LibNavigation.navigateForResult('event/turnstile_event_gate', { api_key: result?.api_key, event_id: selectedEvent?.event_id }).then((item: any) => {
                setSelectedGate(item)
              })
            }
          }} />


          <Item isTouchable iconLeft='login' title={esp.lang("event/turnstile_settings", "select_type_gate")} value={selectedTypeGate?.title} onPress={() => {
            dialogTypeGate.current!.show()
          }} />

          {/* untuk turnstile khusus exhibitor */}
          <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey, paddingBottom: 7, marginTop: 7, paddingHorizontal: 10, }}>
            <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
              <LibIcon name={"id-card"} />
              <Text allowFontScaling={false} style={{ marginLeft: 8, fontFamily: 'SFProText', flex: 2, fontSize: 12 }}>{esp.lang("event/turnstile_settings", "id_card")}</Text>
            </View>
            <View style={{ marginLeft: 10, marginRight: 5, flex: 1, justifyContent: 'flex-end', flexDirection: 'row', alignContent: 'center', alignItems: 'center', }}>
              <EventToggle value={forExhibitor} onChangeValue={() => {
                setForExhibitor(forExhibitor == true ? false : true)
                if (forExhibitor) {
                  setForExhibitor(false)
                } else {
                  let dataTypeTicket = {
                    ids: '',
                    title: ''
                  }
                  setSelectedTypeTicket(dataTypeTicket)

                  setForExhibitor(true)
                }

              }} type='success' />
            </View>
          </View>

          <Item isDisable={forExhibitor} isTouchable iconLeft='ticket-confirmation' title={esp.lang("event/turnstile_settings", "select_type_ticket")} value={selectedTypeTicket?.title} onPress={() => {
            if (forExhibitor == false) {
              if (!selectedEvent) {
                LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_event_first"))
              } else {
                LibNavigation.navigateForResult('event/turnstile_event_ticket', { api_key: result?.api_key, event_id: selectedEvent?.event_id }).then((item: any) => {
                  setSelectedTypeTicket(item)
                })
              }
            }
          }} />

          <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey, paddingBottom: 7, marginTop: 7, paddingHorizontal: 10, }}>
            <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
              <LibIcon name={"magnify-scan"} />
              <Text allowFontScaling={false} style={{ marginLeft: 8, fontFamily: 'SFProText', flex: 2, fontSize: 12 }}>{esp.lang("event/turnstile_settings", "Enable_User_Scan")}</Text>
            </View>
            <View style={{ marginLeft: 10, marginRight: 5, flex: 1, justifyContent: 'flex-end', flexDirection: 'row', alignContent: 'center', alignItems: 'center', }}>
              <EventToggle value={userScan} onChangeValue={() => { setUserScan(userScan == true ? false : true) }} type='success' />
            </View>
          </View>
        </View>

      </ScrollView>

      <EventButton label={esp.lang("event/turnstile_settings", "submit")} onPress={() => {
        if (checkInput()) {
          settingTurnstile()
        }
      }} style={{ margin: 10 }} backgroundColor={LibStyle.colorPrimary} fontColor='#000' />


      <LibSlidingup ref={dialogTypeGate}>
        <View style={{ backgroundColor: '#f6f6f6', borderTopRightRadius: 10, borderTopLeftRadius: 10, paddingBottom: 25, paddingHorizontal: 19, }}>
          <Text allowFontScaling={false} style={{ marginTop: 15, marginBottom: 23, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("event/turnstile_settings", "please_select_type_gate")}</Text>
          <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
            {
              typeGate?.map(renderTypeGate)
            }
          </View>

        </View>
      </LibSlidingup>
    </View >
  )
}
const styleId_QwGnx: any = { marginTop: 8, fontFamily: 'SFProText', fontSize: 12, color: '#fff' }