// withHooks
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import esp from 'esoftplay/esp';

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


export interface EventCounter_menuArgs {

}
export interface EventCounter_menuProps {
  colorTheme: string,
  event_id: any,
  user_type?: number,
  status_user?: number
}
export default function m(props: EventCounter_menuProps): any {

  let arrMenu = [
    {
      title: esp.lang("event/counter_menu", "menu_send"),
      icon: "send",
      show: 1,
      navigate: "event/counter_send",
    },
    {
      title: esp.lang("event/counter_menu", "menu_approve"),
      icon: "download-box-outline",
      show: 1,
      navigate: 'event/counter_request',
    },
    {
      title: esp.lang("event/counter_menu", "menu_history"),
      icon: "history",
      show: 1,
      navigate: "event/counter_history"
    },
    {
      title: esp.lang("event/counter_menu", "menu_scan"),
      icon: "qrcode-scan",
      show: 1,
      navigate: 'component/scanner'
    },
    // {
    //   title: esp.lang("event/counter_menu", "menu_report"),
    //   icon: "book-lock",
    //   show: props.status_user == 2 ? 1 : 0,
    //   navigate: 'event/counter_report'
    // },
  ]

  const styleId_brLTP: any = { paddingBottom: 30, padding: 15, backgroundColor: props.colorTheme, flexDirection: 'row', justifyContent: 'space-between' }

  function renderMenu(item: any, i: number) {
    return (
      <TouchableOpacity onPress={() => {
        LibNavigation.navigate(item.navigate, {
          event_id: props.event_id,
          fromPage: 'event/counter_eo',
          user_type: props?.user_type,
          status_user: props?.status_user
        })
      }} key={i} style={styleId_ZmGELw}>
        <View style={styleId_86CJp}>
          <LibIcon name={item.icon} style={styleId_1ovWUw} color="#fff" />
        </View>
        <Text allowFontScaling={false} style={styleId_Z1QT107}>{item.title}</Text>
      </TouchableOpacity>
    )
  }

  return (
    <View style={styleId_brLTP}>
      {
        arrMenu.filter((x: any) => x.show == 1).map(renderMenu)
      }
    </View>
  )
}
const styleId_ZmGELw: any = { flex: 1, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }
const styleId_86CJp: any = { backgroundColor: 'rgba( 255, 255, 255, 0.40 )', padding: 15, borderRadius: 10 }
const styleId_1ovWUw: any = { opacity: 1 }
const styleId_Z1QT107: any = { height: 30, textAlign: 'center', fontFamily: 'SFProText', margin: 10, marginTop: 5, color: '#fff', marginBottom: 0, fontSize: 10 }