// withHooks
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import esp from 'esoftplay/esp';

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


export interface EventTms_dashboardArgs {

}
export interface EventTms_dashboardProps {

}
export default function m(props: EventTms_dashboardProps): any {
  const [user] = UserClass.state().useState()
  let menus = [
    {
      id: 1,
      title: esp.lang("user/profile", "tms_scanner"),
      icon: 'menu/ic_turnstile.png',
      active: 1,
      color_accent: '#FFC523',
      onPress: () => {
        LibNavigation.navigateForResult('event/tms_event_list', { data: user?.is_tms }).then((value) => {
          LibNavigation.navigate('event/tms_gate', { is_scanner: value, typeScanner: 'tms' })
        })
      }
    },
    {
      id: 2,
      title: esp.lang("user/profile", "hall_scanner"),
      icon: 'menu/ic_hall.png',
      active: 1,
      color_accent: '#01D0FB',
      onPress: () => {
        LibNavigation.navigateForResult('event/tms_event_list', { data: user?.is_tms }).then((value) => {
          LibNavigation.navigate('event/tms_gate', { is_scanner: value, typeScanner: 'hall' })
        })
      }
    },
    {
      id: 3,
      title: esp.lang("user/profile", "exchange"),
      icon: 'menu/ic_redempt.png',
      active: 1,
      color_accent: '#D0004F',
      onPress: () => {
        LibNavigation.navigateForResult('event/tms_event_list', { data: user?.is_tms }).then((value) => {
          LibNavigation.navigate('event/exchange_ticket', { dataEvent: value })
        })
      }
    },
  ]

  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?.map(renderMenu)
        }
      </ScrollView>

    </View>
  )
}