// withHooks
import { EventCounter_history_item } from 'esoftplay/cache/event/counter_history_item/import';
import { EventCounter_status } from 'esoftplay/cache/event/counter_status/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 { LibScroll } from 'esoftplay/cache/lib/scroll/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';
import useGlobalSubscriber, { UseSubscribeReturn } from 'esoftplay/subscribe';
import { useTimeout } from 'esoftplay/timeout';

import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventMessage } from 'esoftplay/cache/event/message/import';
import React, { useEffect, useRef } from 'react';
import { Pressable, Text, TouchableOpacity, View } from 'react-native';


export interface EventCounter_requestArgs {

}
export interface EventCounter_requestProps {

}

function Status(props: any) {
  const tabRef = useRef<LibScroll>(null)
  const allStatus = EventCounter_status()
  const timeout = useTimeout()

  useEffect(() => {
    if (props.status != 1)
      timeout(() => {
        tabRef?.current?.scrollToIndex?.(allStatus.map((s) => s.code).indexOf(props.status) - 1)
      }, 500);
  }, [])

  function renderStatus(status: any, index: number) {
    return (
      <TouchableOpacity
        key={index}
        onPress={() => props.onChangeStatus(status.code)}
        style={{ height: 32, marginVertical: 10, marginRight: 10, borderRadius: 20, backgroundColor: props.status == status.code ? props.colorTheme : 'transparent', borderColor: props.status == status.code ? 'transparent' : '#ccc', borderWidth: 1, paddingHorizontal: 17, justifyContent: 'center' }} >
        <LibTextstyle textStyle='footnote' text={status.text} style={{ color: props.status == status.code ? "white" : "#4E4E4E" }} />
      </TouchableOpacity>
    )
  }

  return (
    <View style={{ minHeight: 50 }} >
      <LibScroll
        ref={tabRef}
        initialNumToRender={20}
        horizontal>
        <View style={{ width: 10 }} />
        {
          allStatus.map(renderStatus)
        }
      </LibScroll>
      {/* <MarketSection_menu size='line' /> */}
    </View>
  )
}

const subs = useGlobalSubscriber()
export function subscribe(): UseSubscribeReturn {
  return subs
}
export default function m(props: EventCounter_requestProps): any {
  const { event_id, status_user } = LibNavigation.getArgsAll(props)
  const active_tab = LibNavigation.getArgs(props, 'active_tab', 1)
  const [activeTab, setActiveTab] = useSafeState<any>(active_tab)
  const type = EventCounter_type()
  const ref = useRef<LibInfinite>(null)

  const statusCode = LibNavigation.getArgs(props, 'status', 1)
  const [status, setStatus] = useSafeState(statusCode)

  let a = status_user == 1 ? 'event_eo_ticket_request?event_id=' + event_id + '&status=' + status : status_user == 2 ? 'event_manager_ticket_request?event_id=' + event_id + '&status=' + status : 'event_seller_ticket_request?event_id=' + event_id + '&status=' + status

  let b = status_user == 1 ? 'event_eo_money_request?event_id=' + event_id + '&status=' + status : status_user == 2 ? 'event_manager_money_request?event_id=' + event_id + '&status=' + status : 'event_seller_money_request?event_id=' + event_id + '&status=' + status

  let url = activeTab == 1 ? a : b
  let colorTheme = status_user == 1 ? "#009AE4" : status_user == 2 ? "#00AA43" : "#6A0740"

  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>
    )
  }

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

  subs.useSubscribe(() => {
    ref.current?.loadData?.()
  })

  return (
    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
      <EventHeader title={esp.lang("event/counter_request", "header_title")} subtitle={status_user == 1 ? esp.lang("event/counter_request", "sub_eo") : status_user == 2 ? esp.lang("event/counter_request", "sub_lm") : esp.lang("event/counter_request", "sub_cashier")} />
      <Status status={status} onChangeStatus={setStatus} colorTheme={colorTheme} />

      <LibInfinite
        ref={ref}
        url={url}
        key={activeTab + " " + status}
        errorView={(error: any) => {
          return (
            <View style={{ margin: 15, borderRadius: 15, marginBottom: 0, backgroundColor: '#fff', overflow: 'hidden' }}>
              <EventMessage message={error} />
            </View>
          )
        }}
        style={{ margin: 15, marginTop: 10, borderRadius: 15, backgroundColor: '#fff', }}
        ListHeaderComponent={
          <View style={{ flexDirection: 'row', borderRadius: 10, padding: 3, overflow: 'hidden', backgroundColor: LibStyle.colorBgGrey }}>
            {
              type.map(renderType)
            }
          </View>
        }
        renderItem={renderItem}
      />
    </View>
  )
}