// withHooks
import { EventCounter_report_detailProperty } from 'esoftplay/cache/event/counter_report_detail/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import esp from 'esoftplay/esp';

import { EventHeader } from 'esoftplay/cache/event/header/import';
import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface EventCounter_report_breakdownArgs {

}
export interface EventCounter_report_breakdownProps {

}

export interface ReportDetailItem2 extends EventCounter_report_breakdownProps {
  title: string
  value: string
  valueColor?: string
  colorBg?: string
  onPress: () => void,
}

function Item(props: ReportDetailItem2) {
  return (
    <View style={{ backgroundColor: props.colorBg ? props.colorBg : "transparant", flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', marginBottom: 7 }}>
      <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', flex: 2, fontSize: 12 }}>{props.title}</Text>
      <View>
        <Text allowFontScaling={false} style={{ textAlign: 'right', marginLeft: 10, fontFamily: 'SFProText', flex: 1, fontWeight: 'bold', fontSize: 14, color: props.valueColor ? props.valueColor : "#000" }}>{props.value}</Text>
        <TouchableOpacity style={{ marginTop: 5 }} onPress={props.onPress}>
          <Text allowFontScaling={false} style={{ textDecorationLine: 'underline', textAlign: 'right', marginLeft: 10, fontFamily: 'SFProText', flex: 1, fontWeight: 'normal', fontSize: 12, color: LibStyle.colorBlue }}>{esp.lang("event/counter_report_breakdown", "show_detail")}</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}

export default function m(props: EventCounter_report_breakdownProps): any {
  const { data, type } = LibNavigation.getArgsAll(props)

  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <EventHeader title={esp.lang("event/counter_report_breakdown", "header_title")} />

      <View style={{ margin: 10, borderRadius: 5, backgroundColor: LibStyle.colorBgGrey }}>
        <ScrollView style={{ padding: 10 }}>
          {
            data.hasOwnProperty("modal") &&
            <Item
              title={esp.lang("event/counter_report_breakdown", "modal")}
              value={EventCounter_report_detailProperty.showValueExtention(type, data?.modal?.total)}
              onPress={() => { LibNavigation.navigate('event/counter_report_detail_list', { url: data?.modal?.url }) }}
            />
          }
          {
            data?.transaction?.total > 0 &&
            <Item
              title={esp.lang("event/counter_report_breakdown", "total_transaction")}
              value={EventCounter_report_detailProperty.showValueExtention(type, data?.transaction?.total)}
              onPress={() => { LibNavigation.navigate('event/counter_report_detail_list', { url: data?.transaction?.url }) }}
            />
          }
          {
            data?.transaction_edc?.total > 0 &&
            <Item
              title={esp.lang("event/counter_report_breakdown", "total_transaction_with_edc")}
              value={EventCounter_report_detailProperty.showValueExtention(type, data?.transaction_edc?.total)}
              onPress={() => { LibNavigation.navigate('event/counter_report_detail_list', { url: data?.transaction_edc?.url }) }}
            />
          }
          {
            data?.transfer?.total > 0 &&
            <Item
              title={esp.lang("event/counter_report_breakdown", "transfer")}
              value={EventCounter_report_detailProperty.showValueExtention(type, data?.transfer?.total)}
              onPress={() => { LibNavigation.navigate('event/counter_report_detail_list', { url: data?.transfer?.url }) }}
            />
          }

          <View style={{ width: LibStyle.width - 20, height: 1, backgroundColor: LibStyle.colorTextCaption, marginBottom: 10 }} />
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', marginBottom: 7 }}>
            <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', flex: 2, fontSize: 12 }}>{esp.lang("event/counter_report_breakdown", "total")}</Text>
            <Text allowFontScaling={false} style={{ textAlign: 'right', marginLeft: 10, fontFamily: 'SFProText', flex: 1, fontWeight: 'bold', fontSize: 14, color: LibStyle.colorGreen }}>{EventCounter_report_detailProperty.showValueExtention(type, data?.total)}</Text>
          </View>
        </ScrollView>
      </View>

    </View>
  )
}