// withHooks

import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketAds_date_selection } from 'esoftplay/cache/market/ads_date_selection/import';
import { MarketAds_deposit_saldo } from 'esoftplay/cache/market/ads_deposit_saldo/import';
import { MarketEmpty_product } from 'esoftplay/cache/market/empty_product/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';

import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';
import React from 'react';
import { Text, View } from 'react-native';


export interface MarketAds_depositArgs {

}
export interface MarketAds_depositProps {

}
export default function m(props: MarketAds_depositProps): any {
  let lastDate = ''
  const [saldoTotal, setSaldoTotal] = useSafeState<any>({ saldo: 0, saldo_used: 0 })
  const [dateRange, setDateRange] = useSafeState<any>({ date_start: moment().add(-6, 'days').localeFormat('YYYY-MM-DD'), date_end: moment().localeFormat('YYYY-MM-DD') })

  return (
    <View style={styleId_qpkod}>
      <MarketHeader onlyBack title={esp.lang("market/ads_deposit", "header_title")} />
      <MarketAds_deposit_saldo />
      <View style={styleId_Z2cWUqr} />
      <View style={styleId_N1PCS}>
        <Text allowFontScaling={false} style={styleId_Z1C8Hfx} >{esp.lang("market/ads_deposit", "history_deposit")}</Text>
        <MarketAds_date_selection date_range={(start: string, end: string) => { setDateRange({ date_start: start, date_end: end }) }} />
      </View>
      <LibInfinite
        key={dateRange.date_start}
        isDebug={1}
        url={"advert/deposit_saldo?date_start=" + dateRange.date_start + '&date_end=' + dateRange.date_end}
        onResponseEdit={(res) => {
          setSaldoTotal({ saldo: res?.saldo, saldo_used: res?.saldo_used })
          return res
        }}
        ListHeaderComponent={
          <View style={styleId_ZTsWUQ}>
            <View style={styleId_Dg6W5}>
              <Text allowFontScaling={false} style={styleId_cP8sW} >{esp.lang("market/ads_deposit", "total_deposit")}</Text>
              <Text allowFontScaling={false} style={styleId_Z136kV4} >{LibUtils.money(saldoTotal?.saldo)}</Text>
            </View>
            <View style={styleId_Z19pqjI}>
              <Text allowFontScaling={false} style={styleId_cP8sW} >{esp.lang("market/ads_deposit", "saldo_used")}</Text>
              <Text allowFontScaling={false} style={styleId_Z136kV4} >{LibUtils.money(saldoTotal?.saldo_used)}</Text>
            </View>
          </View>
        }
        errorView={(error: any) => (<MarketEmpty_product style={styleId_1GO6f} message={error} />)}
        renderItem={(item) => {
          let newDate = item.updated != '0000-00-00 00:00:00' ? moment(item.updated).localeFormat("DD MMMM YYYY") : moment(item.created).localeFormat("DD MMMM YYYY")
          const showDate = lastDate != newDate
          lastDate = newDate
          return (
            <>
              {
                showDate &&
                <MarketSection_menu title={newDate} />
              }
              <View style={styleId_Z1elR1s} >
                <View style={{ flex: 1 }} >
                  <LibTextstyle
                    textStyle="caption1"
                    text={item.title}
                    style={styleId_Z2uUMhi}
                  />
                  <LibTextstyle
                    textStyle="footnote"
                    style={[styleId_17GlQL, { color: item.is_credit == 1 ? MarketStyle.colorGreen : LibStyle.colorRed }]}
                    text={(item.is_credit == 1 ? '+' : '-') + " " + LibUtils.money(item.amount)} />
                </View>
                <LibTextstyle textStyle="caption2" text={item.updated != '0000-00-00 00:00:00' ? moment(item.updated).localeFormat("HH:mm") : moment(item.created).localeFormat("HH:mm")} />
              </View>
            </>
          )
        }} />
    </View>
  )
}
const styleId_qpkod: any = { flex: 1, backgroundColor: '#fff' }
const styleId_Z2cWUqr: any = { marginTop: 10, height: 10, backgroundColor: '#f5f5f5' }
const styleId_N1PCS: any = { margin: 15, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }
const styleId_Z1C8Hfx: any = { flex: 1, fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }
const styleId_ZTsWUQ: any = { borderTopWidth: 1, borderTopColor: '#f1f1f1', padding: 15 }
const styleId_Dg6W5: any = { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }
const styleId_cP8sW: any = { fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0 }
const styleId_Z136kV4: any = { fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#000' }
const styleId_Z19pqjI: any = { marginTop: 10, flexDirection: 'row', justifyContent: 'space-between' }
const styleId_1GO6f: any = { fontSize: 16, lineHeight: 20, marginBottom: 5 }
const styleId_Z1elR1s: any = { paddingHorizontal: 17, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: "#f4f4f4", flexDirection: 'row' }
const styleId_Z2uUMhi: any = { color: '#707070', fontSize: 11 }
const styleId_17GlQL: any = { fontWeight: "bold" }