// withHooks
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import esp from 'esoftplay/esp';
import { useRef } from 'react';

import { applyStyle } from 'esoftplay';
import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventOrder_status } from 'esoftplay/cache/event/order_status/import';
import { EventSection_menu } from 'esoftplay/cache/event/section_menu/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import useSafeState from 'esoftplay/state';
import React from 'react';
import { Pressable, ScrollView, Text, View } from 'react-native';


export interface EventToken_orderArgs {

}
export interface EventToken_orderProps {

}
export default function m(props: EventToken_orderProps): any {

  const allStatus = EventOrder_status()
  const statusCode = LibNavigation.getArgs(props, 'status', esp.isDebug("filter") ? '0,1,2,3,4,5,6,7,10' : '1')
  const [status, setStatus] = useSafeState(statusCode)
  const [code, setCode] = useSafeState(statusCode)
  const [selectedDate, setSelectedDate] = useSafeState({ date_start: '', date_end: '', id: 1, title: esp.lang("event/order", "all_date") })
  const [selectedDateRange, setSelectedDateRange] = useSafeState({ date_start: LibUtils.moment().localeFormat("YYYY-MM-DD"), date_end: LibUtils.moment().localeFormat("YYYY-MM-DD") })

  const statusRef = useRef<LibSlidingup>(null)


  return (
    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
      <EventHeader title='Riwayar Transaksi Token' />
      <View style={{ minHeight: 50, }} >
        <LibScroll
          initialNumToRender={20}
          horizontal
        >
          <View style={{ width: 10 }} />
          <Pressable
            onPress={() => { statusRef.current?.show() }}
            style={applyStyle({ height: 30, marginVertical: 10, marginRight: 10, borderRadius: 12, backgroundColor: 'white', borderColor: '#ccc', borderWidth: 1, paddingHorizontal: 10, justifyContent: 'center', flexDirection: 'row', alignItems: 'center' })} >
            <LibTextstyle textStyle='footnote' text={allStatus[allStatus.findIndex((x) => String(x.code) == status)]?.text || esp.lang("event/order", "all_statis")} style={applyStyle({ fontSize: 11, color: "#4E4E4E", marginRight: 5 })} />
            <LibIcon name='chevron-down' style={applyStyle({ color: "#4E4E4E" })} />
          </Pressable>
        </LibScroll>
        <EventSection_menu size='line' />
      </View>
      <ScrollView>
        <Pressable onPress={() => {

        }} style={{ padding: 7, margin: 15, marginTop: 10, backgroundColor: '#fff', marginBottom: 0, borderRadius: 5, borderWidth: 1, borderColor: LibStyle.colorPrimary, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
          <Text allowFontScaling={false} style={{ marginLeft: 8 }}>{esp.lang("event/order", "wawit")}</Text>
          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
            {/* {
              badge != 0 &&
              <View style={{ backgroundColor: LibStyle.colorRed, height: 17, padding: 5, paddingVertical: 2, borderRadius: 10, alignContent: 'center', alignItems: 'center' }}>
                <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, letterSpacing: 0, color: "#ffffff" }}>{badge > 99 ? "99+" : LibUtils.number(badge)}</Text>
              </View>
            } */}
            <LibIcon name='chevron-right' />
          </View>
        </Pressable>
      </ScrollView>
      <LibSlidingup ref={statusRef} onChangeShow={(s) => { if (!s) setCode(status) }} >
        <View style={applyStyle({ backgroundColor: 'white', paddingHorizontal: 17, borderTopLeftRadius: 10, borderTopRightRadius: 10, maxHeight: LibStyle.height * 0.9 })}>
          <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', marginTop: 15 })}>
            <Pressable onPress={() => { statusRef.current?.hide() }} style={applyStyle({ marginRight: 10 })} >
              <LibIcon name='close' />
            </Pressable>
            <LibTextstyle textStyle='footnote' text={esp.lang("event/order", "Transaction_Status")} style={applyStyle({ fontWeight: 'bold', fontSize: 14, color: "#4E4E4E" })} />
          </View>
          <ScrollView>
            <Pressable onPress={() => { setCode('0,1,2,3,4,5,6,7,10') }} style={applyStyle({ flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e6e6e6', paddingVertical: 12 })}>
              <LibTextstyle textStyle='footnote' text={esp.lang("event/order", "All_Transaction_Status")} style={applyStyle({ flex: 1, fontWeight: 'bold', fontSize: 10, color: "#4E4E4E" })} />
              <LibIcon.Ionicons name={code == '0,1,2,3,4,5,6,7,10' ? 'radio-button-on' : 'radio-button-off'} color={code == '0,1,2,3,4,5,6,7,10' ? LibStyle.colorPrimary : '#4E4E4E'} />
            </Pressable>
            {
              allStatus?.filter((item: any) => item.publish == 1).map((it: any, i: number) => {
                return (
                  <Pressable key={i} onPress={() => setCode(it.code)} style={applyStyle({ flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e6e6e6', paddingVertical: 12 })}>
                    <LibTextstyle textStyle='footnote' text={it.text} style={applyStyle({ flex: 1, fontWeight: 'bold', fontSize: 10, color: "#4E4E4E" })} />
                    <LibIcon.Ionicons name={it.code == code ? 'radio-button-on' : 'radio-button-off'} color={it.code == code ? LibStyle.colorPrimary : '#4E4E4E'} />
                  </Pressable>
                )
              })
            }
          </ScrollView>
          <EventButton label={esp.lang("event/order", "apply")} style={applyStyle({ fontSize: 14, marginVertical: 15 })} backgroundColor={LibStyle.colorPrimary} onPress={() => { setStatus(code); statusRef.current?.hide() }} />
        </View>
      </LibSlidingup>
    </View>
  )
}