// withHooks
import { EventCounter_history_item } from 'esoftplay/cache/event/counter_history_item/import';
import { EventCounter_type } from 'esoftplay/cache/event/counter_type/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/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 { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventMessage } from 'esoftplay/cache/event/message/import';
import React from 'react';
import { Pressable, Text, View } from 'react-native';


export interface EventCounter_historyArgs {

}
export interface EventCounter_historyProps {

}
export default function m(props: EventCounter_historyProps): any {
  const { event_id, status_user, tabActive } = LibNavigation.getArgsAll(props)

  const type = EventCounter_type()
  const [activeTab, setActiveTab] = useSafeState<any>(tabActive ? tabActive : 1)

  let a = status_user == 1 ? 'event_eo_ticket_mutation?event_id=' + event_id : status_user == 2 ? 'event_manager_ticket_mutation?event_id=' + event_id : 'event_seller_ticket_mutation?event_id=' + event_id
  let b = status_user == 1 ? 'event_eo_money_mutation?event_id=' + event_id : status_user == 2 ? 'event_manager_money_mutation?event_id=' + event_id : 'event_seller_money_mutation?event_id=' + event_id
  let url = activeTab == 1 ? a : b

  function renderItem(item: any, i: number) {
    return (
      <EventCounter_history_item key={i} item={item} show_icon onPress={() => {/* LibNavigation.navigate('event/counter_request_detail') */ }} is_ticket={activeTab == 1 ? true : false} />
    )
  }

  function renderType(item: any, i: number) {
    return (
      <Pressable key={i} onPress={() => {
        setActiveTab(item.id)
      }} style={{ ...LibStyle.elevation(item.id == activeTab ? 3 : 0), flex: 1, padding: 7, backgroundColor: item.id == activeTab ? "#fff" : "#EEF1F8", borderRadius: 10 }}>
        <Text allowFontScaling={false} style={{ alignSelf: 'center', textAlign: 'center', fontFamily: "Arial", fontWeight: item.id == activeTab ? "bold" : "normal", fontStyle: "normal", letterSpacing: 0, color: item.id == activeTab ? "#000" : "#aab0b7" }}>{item.title}</Text>
      </Pressable>
    )
  }

  return (
    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
      <EventHeader title={esp.lang("event/counter_history", "header_title")} subtitle={status_user == 1 ? esp.lang("event/counter_history", "subtitle_eo") : status_user == 2 ? esp.lang("event/counter_history", "subtitle_lm") : esp.lang("event/counter_history", "subtitle_cashier")} />
      <LibInfinite
        url={url}
        key={activeTab}
        
        errorView={(error: any) => {
          return (
            <View style={{ margin: 15, borderRadius: 15, backgroundColor: '#fff', overflow: 'hidden' }}>
              <EventMessage message={error} />
            </View>
          )
        }}
        ListHeaderComponent={
          <View style={{ flexDirection: 'row', borderRadius: 10, padding: 3, overflow: 'hidden', backgroundColor: LibStyle.colorBgGrey }}>
            {
              type.map(renderType)
            }
          </View>
        }
        style={{ margin: 15, borderRadius: 15, backgroundColor: '#fff' }}
        renderItem={renderItem}
      />
    </View>
  )
}