// 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 esp from 'esoftplay/esp';
import moment from 'esoftplay/moment';

import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface MarketProduct_discuss_replyArgs {

}
export interface MarketProduct_discuss_replyProps {
  data?: any
  item: any
}
export default function m(props: MarketProduct_discuss_replyProps): any {
  return (
    <View>
      <View style={{ marginLeft: 10, marginTop: 10, flexDirection: 'row' }}>
        <View style={{ width: 1, backgroundColor: '#c9c9c9' }} />
        <View style={{ marginLeft: 10 }}>
          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
            <View style={{ height: 30, borderRadius: 15, width: 30, backgroundColor: "#f1f2f3", marginRight: 10, overflow: 'hidden' }} >
              <LibPicture source={{ uri: props?.item?.user_image }} style={{ width: 30, height: 30, borderRadius: 15 }} resizeMode="contain" />
            </View>
            <View>
              {
                props?.item?.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_reply", "selelr")}</Text>
                    </View>
                    <LibTextstyle textStyle="caption1" text={props?.item?.user_name} style={styleId_GW3Y7} />
                  </View>
                  :
                  <LibTextstyle textStyle="caption1" text={props?.item?.user_name} style={styleId_GW3Y7} />
              }
              <LibTextstyle textStyle="caption2" style={{ color: "#888", marginTop: 5 }} text={moment(props?.item?.created).localeFormat("DD MMMM YYYY hh:mm")} />
            </View>
          </View>
          <LibTextstyle textStyle="caption2" style={{ color: "#888", marginTop: 8 }} text={props?.item?.message} />
          {/* jika ada jawaban yang lebih dari satu */}
          {
            props?.data?.total_replies > 0 &&
            <TouchableOpacity onPress={() => { LibNavigation.navigate('market/product_discuss_reply_detail', { url: props?.data?.url, data: props?.data }) }} style={{ flex: 1, padding: 10, paddingLeft: 0, paddingBottom: 0 }}>
              <LibTextstyle textStyle="caption1" text={esp.lang("market/product_discuss_reply", "other_answer", props?.data?.total_replies)} style={{ color: "#888", fontWeight: "bold" }} />
            </TouchableOpacity>
          }
        </View>
      </View>
    </View>
  )
}

const styleId_GW3Y7: any = { fontWeight: "bold" }