// withHooks
import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
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 { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import esp from 'esoftplay/esp';

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


export interface MarketPoint_historyArgs {

}
export interface MarketPoint_historyProps {

}

let lastDate = ''

export default function m(props: MarketPoint_historyProps): any {
  const [url, setUrl] = useSafeState<string>('shop/member_point')

  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <MarketHeader title={esp.lang("market/point_history", "header_title")} onlyBack />
      <LibInfinite
        key={url}
        onDataChange={() => { lastDate = '' }}
        url={url}

        errorView={(e: any) => (
          <MarketEmpty msg={e} />
        )}
        renderItem={(item) => {
          const showDate = lastDate != moment(item.created).localeFormat("DD MMMM YYYY")
          lastDate = moment(item.created).localeFormat("DD MMMM YYYY")
          return (
            <>
              {
                showDate &&
                <View style={{ backgroundColor: '#f1f2f3', padding: 10 }} >
                  <Text allowFontScaling={false} style={{ marginTop: 6, fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9f9f9f" }}>{moment(item.created).localeFormat("DD MMMM YYYY")}</Text>
                </View>
              }
              <Pressable onPress={() => {
                if (item?.hasOwnProperty('url_detail') && item?.url_detail != "") {
                  LibNavigation.navigate("user/transaction_detail", { url: item.url_detail })
                }
              }}>
                <View style={{ marginBottom: 0, borderBottomColor: '#f1f2f3', borderBottomWidth: 1, padding: 10, borderRadius: 8, backgroundColor: '#fff' }}>
                  <View style={{ flexDirection: 'row' }}>
                    <View>
                      <Text allowFontScaling={false} numberOfLines={3} style={{ flexWrap: "wrap", marginTop: 6, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{item.title}</Text>
                      {
                        item.amount != 0 ?
                          <Text allowFontScaling={false} style={{ marginTop: 6, fontFamily: "Arial", fontSize: 13, fontStyle: "normal", letterSpacing: 0, color: item.is_credit == 1 ? LibStyle.colorGreen : LibStyle.colorRed }}>{item.is_credit == 1 ? '+' : '-'} {LibUtils.number(item.amount)}</Text>
                          :
                          (item.amount == 0 && item.is_credit == 0) ?
                            <Text allowFontScaling={false} style={{ marginTop: 6, fontFamily: "Arial", fontSize: 13, fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorGreen }}>{esp.lang("market/point_history", "free")}</Text>
                            : null
                      }
                    </View>
                  </View>
                </View>
              </Pressable>
            </>
          )
        }
        }
      />
    </View>
  )
}