// withHooks
// noPage
import { applyStyle } from 'esoftplay';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import esp from 'esoftplay/esp';

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


export interface EventCounter_infoArgs {

}
export interface EventCounter_infoProps {
  colorTheme: string
  amount?: any
  ticket?: any
  event_id: any,
  status_user?: number
}
export default function m(props: EventCounter_infoProps): any {
  function isEvenNumber(value: number) {
    if (value % 2 == 0)
      return true;
    else
      return false;
  }

  function renderTicket(item: any, i: number) {
    return (
      <TouchableOpacity onPress={() => {
        LibNavigation.navigate('event/counter_history', { event_id: props?.event_id, status_user: props.status_user, tabActive: 1 })
      }} style={{ padding: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center', paddingVertical: 5, backgroundColor: isEvenNumber(i) ? "#fff" : LibStyle.colorBgGrey }}>
        <View style={applyStyle({ flex: 3, marginTop: 5, marginBottom: 5 })}>
          <Text allowFontScaling={false} style={applyStyle({ flexWrap: 'wrap', fontSize: 12 })}>{item.price_name}</Text>
          {
            item.ondate != "0000-00-00" &&
            <Text allowFontScaling={false} style={applyStyle({ flexWrap: 'wrap', fontSize: 12 })}>( {LibUtils.moment(item.ondate).localeFormat("D MMM YYYY")} )</Text>
          }
        </View>
        <View style={applyStyle({ flex: 1, marginTop: 5, marginBottom: 5 })}>
          <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, textAlign: 'right' })}>{item.debit}</Text>
        </View>
        <View style={applyStyle({ flex: 1, marginTop: 5, marginBottom: 5 })}>
          <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, textAlign: 'right' })}>{item.credit}</Text>
        </View>
        <View style={applyStyle({ flex: 1, marginTop: 5, marginBottom: 5 })}>
          <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, textAlign: 'right' })}>{Number(item.debit) - Number(item.credit)}</Text>
        </View>
      </TouchableOpacity>
    )
  }

  return (
    <View style={{ margin: 15, marginBottom: 10, marginTop: 25, backgroundColor: '#fff', borderRadius: 15, padding: 10 }}>
      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <TouchableOpacity onPress={() => { LibNavigation.navigate('event/counter_history', { event_id: props?.event_id, status_user: props.status_user, tabActive: 2 }) }} style={{ padding: 10, borderRadius: 15, backgroundColor: LibStyle.colorPrimaryDark, width: (LibStyle.width - 60) * 0.5 }}>
          <Text allowFontScaling={false} style={{ fontSize: 10, color: "#000" }}>{esp.lang("event/counter_info", "debit_detail")}</Text>
          <Text allowFontScaling={false} style={{ flex: 1, flexWrap: 'wrap', fontSize: 16, fontWeight: 'bold', color: "#000" }}>{LibUtils.money(props.amount?.debit_today)}</Text>
          <Text allowFontScaling={false} style={{ marginTop: 10, textAlign: 'right', fontSize: 8, color: "#000" }}>{esp.lang("event/counter_info", "debit", LibUtils.money(props.amount?.debit))}</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => { LibNavigation.navigate('event/counter_history', { event_id: props?.event_id, status_user: props.status_user, tabActive: 2 }) }} style={{ padding: 10, borderRadius: 15, backgroundColor: props.colorTheme, width: (LibStyle.width - 60) * 0.5 }}>
          <Text allowFontScaling={false} style={{ fontSize: 10, color: "#fff" }}>{esp.lang("event/counter_info", "credit_today")}</Text>
          <Text allowFontScaling={false} style={{ flex: 1, flexWrap: 'wrap', fontSize: 16, fontWeight: 'bold', color: "#fff" }}>{LibUtils.money(props.amount?.credit_today)}</Text>
          <Text allowFontScaling={false} style={{ marginTop: 10, textAlign: 'right', fontSize: 8, color: "#fff" }}>{esp.lang("event/counter_info", "credit", LibUtils.money(props.amount?.credit))}</Text>
        </TouchableOpacity>
      </View>

      {
        props.ticket?.length > 0 &&
        <View style={{ flex: 1, marginTop: 10, overflow: 'hidden', borderWidth: 0.5, borderRadius: 15, borderColor: "#717171" }}>
          <View style={{ padding: 10, borderTopLeftRadius: 15, borderTopRightRadius: 15, flexDirection: 'row', backgroundColor: '#f1f2f3' }}>
            <View style={{ flex: 3 }}>
              <Text allowFontScaling={false} style={applyStyle({ fontSize: 14 })}>{esp.lang("event/counter_info", "ticket_type")}</Text>
            </View>
            <View style={{ flex: 1 }}>
              <Text allowFontScaling={false} style={applyStyle({ fontSize: 14, textAlign: 'right' })}>{esp.lang("event/counter_info", "i_debit")}</Text>
            </View>
            <View style={{ flex: 1 }}>
              <Text allowFontScaling={false} style={applyStyle({ fontSize: 14, textAlign: 'right' })}>{esp.lang("event/counter_info", "i_credit")}</Text>
            </View>
            <View style={{ flex: 1 }}>
              <Text allowFontScaling={false} style={applyStyle({ fontSize: 14, textAlign: 'right' })}>{esp.lang("event/counter_info", "i_saldo")}</Text>
            </View>
          </View>
          {
            props.ticket?.sort((a: any, b: any) => a.price_name > b.price_name || a.ondate?.split('-').reverse().join('') > b.ondate?.split('-').reverse().join('') ? 1 : -1).map(renderTicket)
          }
        </View>
      }

    </View>
  )
}