// withHooks
// noPage

import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketProduct_discuss_reply } from 'esoftplay/cache/market/product_discuss_reply/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';
import moment from 'esoftplay/moment';
import React from 'react';
import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface MarketProduct_discuss_itemProps {
  data?: any,
  isDetailReply?: boolean,
}
export default function m(props: MarketProduct_discuss_itemProps): any {
  // esp.log(props.data, "data");

  return (
    <Pressable onPress={() => {
      if (!props.isDetailReply) {
        LibNavigation.navigate('market/product_discuss_reply_detail', { url: props?.data?.url, data: props?.data })
      }
    }} style={styleId_okYAl}>
      <View style={styleId_1AVyQt}>
        <View style={{ height: 30, borderRadius: 15, width: 30, backgroundColor: "#f1f2f3", marginRight: 10, overflow: 'hidden' }}>
          <LibPicture source={{ uri: props?.data?.user_image }} style={{ width: 30, height: 30, borderRadius: 15 }} resizeMode="contain" />
        </View>
        <View>
          {
            props?.data?.is_merchant == 1 ?
              <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
                <View style={{ flexDirection: 'row' }}>
                  <Text allowFontScaling={false} style={{ marginRight: 10, backgroundColor: "#ddd", paddingHorizontal: 10, paddingVertical: 4, borderRadius: 3, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#707070" }} >{esp.lang("market/product_discuss_item", "seller")}</Text>
                </View>
                <LibTextstyle textStyle="caption1" text={props?.data?.user_name} style={styleId_GW3Y7} />
              </View>
              :
              <LibTextstyle textStyle="caption1" text={props?.data?.user_name} style={styleId_GW3Y7} />
          }
          {/* <LibTextstyle textStyle="caption1" text={props?.data?.user_name} style={styleId_GW3Y7} /> */}
          <LibTextstyle textStyle="caption2" style={styleId_jBq3B} text={moment(props?.data?.created).localeFormat("DD MMMM YYYY hh:mm")} />
        </View>
      </View>
      <LibTextstyle textStyle="caption2" style={styleId_HdCi7} text={props?.data?.message} />

      <View style={{ marginTop: 10 }}>
        <ScrollView horizontal>
          <View style={{ flexDirection: 'row' }}>
            {
              props?.data?.attach?.length > 0 && props?.data?.attach?.map((item: any, index: number) => {
                return (
                  <TouchableOpacity key={index} activeOpacity={1} onPress={() => {
                    LibNavigation.navigate('market/product_detail', { url: item?.url })
                  }} style={{ padding: 10, marginRight: 10, borderWidth: 1, borderColor: MarketStyle.colorBgGrey, borderRadius: 5 }} >
                    <View style={{ flexDirection: 'row' }} >
                      <LibPicture source={{ uri: item.image }} style={{ backgroundColor: '#d1d1d1', height: 40, width: 40, borderRadius: 4 }} />
                      <View style={{ flex: 1, marginLeft: 10, justifyContent: "space-around" }} >
                        <LibTextstyle textStyle='footnote' numberOfLines={1} text={item?.title} ellipsizeMode={'tail'} style={{ fontWeight: 'bold', fontSize: 14 }} />
                        <LibTextstyle textStyle='caption1' text={LibUtils.money(Number(item?.sale)) || ''} style={{ fontSize: 14 }} />
                      </View>
                    </View>
                  </TouchableOpacity>
                )
              })
            }

          </View>
        </ScrollView>
      </View>

      {
        props?.data?.hasOwnProperty("replies") && props?.data?.replies?.length > 0 && props?.data?.replies?.map((item: any, i: number) => {
          return (
            <MarketProduct_discuss_reply key={i} data={props.data} item={item} />
          )
        })
      }
    </Pressable>
  )
}
const styleId_okYAl: any = { paddingHorizontal: 17, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: "#eee" }
const styleId_1AVyQt: any = { flexDirection: 'row', alignContent: 'center', alignItems: 'center' }
const styleId_GW3Y7: any = { fontWeight: "bold" }
const styleId_jBq3B: any = { color: "#888" }
const styleId_HdCi7: any = { color: "#888", marginTop: 8 }