// withHooks
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import esp from 'esoftplay/esp';

import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';

import React from 'react';
import { ScrollView, Text, View } from 'react-native';
import RenderHtml from 'react-native-render-html';


export interface MarketOrder_detail_payment_hintArgs {
  data: any
}
export interface MarketOrder_detail_payment_hintProps {

}
export default function m(props: MarketOrder_detail_payment_hintProps): any {
  const { data } = LibNavigation.getArgsAll<any>(props)
  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        leftIcon={{ name: "close", onPress: () => LibNavigation.back() }}
        title={esp.lang("market/order_detail_payment_hint", "header_title")}
      />
      <ScrollView>
        {
          !!data?.payment?.description &&
          Object.keys(data?.payment?.description).map((key: any, i: number) => {
            if (data?.payment?.description[key].length > 1) {
              return (
                <View key={i} style={{ borderWidth: 1, borderColor: '#9e9e9e', marginTop: 5, margin: 20, borderTopLeftRadius: 5, borderTopRightRadius: 5, paddingBottom: 10, marginBottom: 10 }}>
                  <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode={"tail"} style={{ borderBottomColor: '#9e9e9e', borderBottomWidth: 1, height: 40, textAlignVertical: 'center', margin: 10, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{key.toUpperCase()}</Text>
                  {
                    data?.payment && data?.payment?.description?.atm && data?.payment?.description[key].length > 1 && data?.payment?.description[key].map((item: any, i: number) => {
                      return (
                        <View key={i} style={{ flexDirection: 'row', marginLeft: 10, marginTop: 15, paddingRight: 25, paddingBottom: 0 }}>
                          <View style={{ marginRight: 15, marginTop: 3, borderRadius: 15, width: 14, height: 14, backgroundColor: "#f5e71e", borderStyle: "solid", borderWidth: 2, borderColor: "#70472b" }} />
                          {/* <Text allowFontScaling={false} numberOfLines={5} style={{ marginLeft: 10, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{props.text}</Text> */}
                          <View style={{ flex: 1 }} >
                            <RenderHtml contentWidth={LibStyle.width} source={{ html: item }} />
                          </View>
                        </View>
                      )
                    })
                  }
                </View>
              )
            } else {
              return null
            }
          })
        }
      </ScrollView>
    </View>
  )
}