// withHooks

import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/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 { MarketEmpty } from 'esoftplay/cache/market/empty/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 React from 'react';
import { TouchableOpacity, View } from 'react-native';


export interface MarketMerchant_saldo_historyProps {

}
export default function m(props: MarketMerchant_saldo_historyProps): any {
  let lastDate = ''

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        onlyBack
        title={esp.lang("market/merchant_saldo_history", "header_title")}

      />
      <LibInfinite
        onDataChange={() => { lastDate = '' }}
        url={"shop/merchant_saldo"}
        errorView={(error: any) => (<MarketEmpty msg={error} />)}
        renderItem={(item) => {
          const showDate = lastDate != moment(item.created).localeFormat("DD MMMM YYYY")
          lastDate = moment(item.created).localeFormat("DD MMMM YYYY")
          return (
            <>
              {
                showDate &&
                <MarketSection_menu title={moment(item.created).localeFormat("DD MMMM YYYY")} />
              }
              <TouchableOpacity
                style={{ paddingHorizontal: 17, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: "#f4f4f4", flexDirection: 'row' }}
                onPress={() => { LibNavigation.navigate("market/saldo_detail", { url: item.url_detail }) }}>
                <View style={{ flex: 1 }} >
                  <LibTextstyle
                    textStyle="caption1"
                    text={item.title} />
                  <LibTextstyle
                    textStyle="footnote"
                    style={{ fontWeight: "bold", color: item.is_credit == 1 ? MarketStyle.colorGreen : LibStyle.colorRed }}
                    text={(item.is_credit == 1 ? '+' : '-') + " " + LibUtils.money(item.amount)} />
                </View>
                <LibTextstyle textStyle="caption2" text={moment(item.created).localeFormat("HH:mm")} />
              </TouchableOpacity>
            </>
          )
        }}
        LoadingView={
          <LibSkeleton backgroundStyle={{ height: LibStyle.height }}>
            {
              [1, 1, 1, 1, 1, 1].map((x: any, i: number) => (
                <View key={i}>
                  <View style={{ paddingHorizontal: 15, paddingTop: 10, paddingBottom: 5, borderTopWidth: 1, borderBottomWidth: 1 }}>
                    <View style={{ width: '30%', height: 15, borderRadius: 10, backgroundColor: 'orange' }} />
                  </View>
                  <View style={{ flexDirection: 'row', paddingHorizontal: 15, paddingVertical: 10 }}>
                    <View style={{ flex: 1, marginRight: 10 }}>
                      <View style={{ width: '100%', height: 15, borderRadius: 10, backgroundColor: 'orange' }} />
                      <View style={{ width: '80%', height: 15, borderRadius: 10, marginTop: 3, backgroundColor: 'orange' }} />
                      <View style={{ width: '40%', height: 18, borderRadius: 10, marginTop: 5, backgroundColor: 'orange' }} />
                    </View>
                    <View style={{ width: '20%', height: 15, borderRadius: 10, backgroundColor: 'orange' }} />
                  </View>
                </View>

              ))
            }
          </LibSkeleton>
        }
      />
    </View>
  )
}