// withHooks
// noPage

import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketRating_input } from 'esoftplay/cache/market/rating_input/import';
import { MarketRating_star } from 'esoftplay/cache/market/rating_star/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import esp from 'esoftplay/esp';

import moment from 'esoftplay/moment';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
moment().locale('id')


export interface MarketOrder_detail_review_itemArgs {

}

export interface MarketOrder_detail_review_item_list {
  product_id: string
  product_name: string
  product_option: string
  price_id: string
  review: string
  review_rating: string
  review_images: string
  review_videos: string
  review_at: string
  review_merchant: string
  review_merchant_rating: string
  review_merchant_at: string
  product_image: string
}

export interface MarketOrder_detail_review_itemProps {
  id: string
  sale_id: string
  user_id: string
  invoice_merchant: string
  merchant_id: string
  merchant_name: string
  merchant_image: string
  is_merchant: number
  user_name: string
  user_image: string
  list: MarketOrder_detail_review_item_list[]
}
export default function m(props: MarketOrder_detail_review_itemProps): any {
  const userId = UserClass.state().get()?.id
  return (
    <>
      <View style={{ marginTop: 10, marginHorizontal: 15, backgroundColor: "white", marginBottom: 10 }} >
        {
          userId != props.user_id ?
            <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
              <LibPicture source={{ uri: props?.user_image }} style={{ width: 25, height: 25, borderRadius: 12.5 }} resizeMode="cover" />
              <View style={{ marginLeft: 10 }} >
                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#03192a" }}>{props?.user_name}</Text>
                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", lineHeight: 16, letterSpacing: 0, textAlign: "left", color: "#03192a" }}>{props?.invoice_merchant}</Text>
              </View>
            </View>
            :
            <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
              <LibPicture source={{ uri: props?.merchant_image }} style={{ width: 25, height: 25, borderRadius: 12.5 }} resizeMode="cover" />
              <View style={{ marginLeft: 10 }} >
                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#03192a" }}>{props?.merchant_name}</Text>
                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#03192a" }}>{props?.invoice_merchant}</Text>
              </View>
            </View>
        }
        {
          LibUtils.checkUndefined(props.list, "0") && props.list.map((item: MarketOrder_detail_review_item_list, idx: number) => {
            return (
              <View key={idx} style={{ marginTop: 15, marginBottom: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'flex-start', backgroundColor: "white" }}>
                <LibPicture source={{ uri: item?.product_image }} style={{ width: 50, height: 50, borderRadius: 4 }} resizeMode="cover" />
                <View style={{ marginLeft: 10, marginRight: 15, flex: 1 }}>
                  <Text allowFontScaling={false} numberOfLines={2} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#707070", flexWrap: 'wrap' }}>{item?.product_name}</Text>
                  {
                    item.price_id > '0' &&
                    <View style={{ flexDirection: 'row', marginTop: 4 }} >
                      <View style={{ borderRadius: 4, paddingHorizontal: 8, paddingVertical: 2, backgroundColor: '#f1f1f1' }} >
                        <Text allowFontScaling={false} numberOfLines={2} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#999", flexWrap: 'wrap' }}>{item?.product_option}</Text>
                      </View>
                    </View>
                  }
                  {
                    item.review_rating == "0" ?
                      <>
                        <View pointerEvents={props.is_merchant == 1 ? "none" : "auto"} >
                          <MarketRating_input
                            onChangeRating={(x) => { }}
                            onPress={(r) => { LibNavigation.navigate('market/product_review_send', { products: item, data: props, ratingNumber: r }) }} />
                        </View>
                        <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode="tail" style={{ paddingTop: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#707070", flexWrap: 'wrap' }}>{esp.lang("market/order_detail_review_item", "empty_review")}</Text>
                      </>
                      :
                      <View style={{ flexDirection: "row", alignItems: "center" }} >
                        <MarketRating_star review={item.review_rating} />
                        {
                          item.review_at != null &&
                          <>
                            <Text style={{ fontSize: 18, marginHorizontal: 5, color: "#909090" }} >•</Text>
                            <Text allowFontScaling={false} style={{ fontSize: 10, fontFamily: "Arial", color: "#707070" }} >{moment(item.review_at).localeFormat('DD MMMM YYYY')}</Text>
                          </>
                        }
                      </View>
                  }
                  {
                    item.review != null &&
                    <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode="tail" style={{ paddingTop: 5, lineHeight: 18, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#707070", flexWrap: 'wrap' }}>{item.review == "" ? esp.lang("market/order_detail_review_item", "empty_reason1") : item?.review}</Text>
                  }
                  {
                    item.review_merchant_rating &&
                    <View style={{ marginTop: 15 }} >
                      {
                        item.review_merchant != null &&
                        <>
                          <View style={{ flexDirection: "row", alignItems: "center", marginBottom: 5 }} >
                            {
                              item.review_merchant_rating != '0' &&
                              <MarketRating_star review={item.review_merchant_rating} />
                              // <View style={{ flexDirection: "row", marginVertical: 5 }} >
                              //   {
                              //     ar1.map((val: any, i: number) => (
                              //       <LibIcon key={i} name={val == 1 ? 'star' : 'star-outline'} size={14} color="gold" style={{ marginRight: 1 }} />
                              //     ))
                              //   }
                              // </View>
                            }
                            <Text allowFontScaling={false} style={{ marginLeft: 5, backgroundColor: "#ddd", paddingHorizontal: 10, paddingVertical: 4, borderRadius: 10, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#707070" }} >{esp.lang("market/order_detail_review_item", "seller")}</Text>
                          </View>
                          <View style={{ flexDirection: "row", alignItems: "center", marginBottom: 5 }} >
                            <Text allowFontScaling={false} style={{ fontSize: 12, fontFamily: "Arial" }} >{esp.lang("market/order_detail_review_item", "seller_from", props.merchant_name)}</Text>
                            {
                              item.review_merchant_at != null &&
                              <>
                                <Text style={{ fontSize: 18, marginHorizontal: 5, color: "#909090" }} >•</Text>
                                <Text allowFontScaling={false} style={{ fontSize: 10, fontFamily: "Arial", color: "#707070" }} >{moment(item.review_at).localeFormat('DD MMMM YYYY')}</Text>
                              </>
                            }
                          </View>
                          {
                            item.review_merchant != "" &&
                            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#707070", flexWrap: 'wrap' }} >{item.review_merchant}</Text>
                          }
                        </>
                      }
                    </View>
                  }
                  {
                    props.is_merchant == 1 && item.review_rating > "0" && item.review_merchant_rating == "0" &&
                    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }} >
                      <TouchableOpacity onPress={() => LibNavigation.navigate('market/merchant_feedback', { data: props, product: item, user_name: props.user_name })}
                        style={{ flexDirection: "row", backgroundColor: MarketStyle.colorPrimaryMarket, paddingHorizontal: 10, paddingVertical: 5, borderRadius: 16 }} >
                        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "white" }} >{esp.lang("market/order_detail_review_item", "give_review")}</Text>
                      </TouchableOpacity>
                    </View>
                  }
                </View>
              </View>
            )
          })
        }
      </View>
      <View style={{ height: 10, backgroundColor: LibStyle.colorGrey }} />
    </>
  )
}