// withHooks
// noPage

import { LibCollaps } from 'esoftplay/cache/lib/collaps/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
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 { MarketRating_star } from 'esoftplay/cache/market/rating_star/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/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 MarketProduct_review_itemProps {
  sale_id: string,
  user_id: string,
  merchant_id: string,
  review: string,
  review_at: string,
  review_images: [],
  review_merchant: string,
  review_merchant_at: string,
  review_merchant_rating: string,
  review_rating: string,
  review_videos: string,
  merchant_image: string,
  user_name: string,
  user_image: string
}
export default function m(props: MarketProduct_review_itemProps): any {
  // const showCollapse = useRef<LibCollaps>(null)

  function renderImages(item: any, i: number) {
    if (i < 2) {
      return (
        <TouchableOpacity key={i} onPress={() => { LibNavigation.navigate("lib/gallery", { images: props.review_images }) }} >
          <LibPicture source={{ uri: item.image }} style={styleId_Z20JLsK} resizeMode="cover" />
        </TouchableOpacity>
      )
    } else if (i == 2) {
      return (
        <TouchableOpacity key={i} onPress={() => { LibNavigation.navigate("lib/gallery", { images: props.review_images, index: i }) }} style={styleId_Z295GYo} >
          <LibTextstyle text={esp.lang("market/product_review_item", "more_photo", String(props.review_images.length - 2))} textStyle="caption2" style={styleId_28OPIE} />
        </TouchableOpacity>
      )
    } else {
      return null
    }
  }

  return (
    <>
      <View style={styleId_E50SM} >
        <LibPicture source={{ uri: props?.user_image }} style={styleId_Z2lLyjc} />
        <View style={styleId_23fjhC} >
          <LibTextstyle textStyle="caption1" text={props?.user_name} style={styleId_GW3Y7} />
          <MarketRating_star review={props.review_rating} />
          {
            LibUtils.checkUndefined(props.review_images, '0') &&
            <View style={{ flexDirection: "row", marginTop: 10 }} >
              {
                LibUtils.checkUndefined(props.review_images, '0') && props.review_images.map(renderImages)
              }
            </View>
          }
          <LibTextstyle textStyle="caption1" style={styleId_HdCi7} text={props?.review} />
          <LibCollaps
            // ref={showCollapse}
            header={(show) =>
              <View style={styleId_1szId7} >
                {
                  props.review_at != null &&
                  <LibTextstyle textStyle="caption2" style={styleId_HdCi7} text={moment(props?.review_at).localeFormat('DD MMMM YYYY HH:mm')} />
                }
                <View style={{ flex: 1 }} />
                {
                  props.review_merchant != null &&
                  <TouchableOpacity /* onPress={() => showCollapse.current!.toggle()} */ style={styleId_Z5JOAL} >
                    <LibTextstyle textStyle="caption2" style={styleId_Z1fhvD6} text={show ? esp.lang("market/product_review_item", "close_reply") : esp.lang("market/product_review_item", "show_reply")} />
                    <LibIcon name={show ? "chevron-up" : "chevron-down"} color="#888" />
                  </TouchableOpacity>
                }
              </View>
            }
          >
            {
              props.review_merchant != null &&
              <View style={styleId_2tmrJ4} >
                <View style={styleId_Z1B0Lef} >
                  <Text allowFontScaling={false} style={styleId_N7ttz} >{esp.lang("market/product_review_item", "seller")}</Text>
                  {
                    props.review_merchant_at != null &&
                    <>
                      <Text style={styleId_ZhC3Ry} >•</Text>
                      <LibTextstyle textStyle="caption2" style={styleId_jBq3B} text={moment(props?.review_merchant_at).localeFormat('DD MMMM YYYY HH:mm')} />
                    </>
                  }
                </View>
                <LibTextstyle textStyle="caption2" style={styleId_Z1fhvD6} text={props?.review_merchant} />
              </View>
            }
          </LibCollaps>
        </View>
      </View>
      <MarketSection_menu size="line" />
    </>
  )
}
const styleId_E50SM: any = { paddingHorizontal: 17, paddingVertical: 10, flexDirection: 'row' }
const styleId_Z2lLyjc: any = { height: 30, borderRadius: 15, width: 30, backgroundColor: "#f1f2f3" }
const styleId_23fjhC: any = { flex: 1, marginLeft: 10 }
const styleId_GW3Y7: any = { fontWeight: "bold" }
const styleId_Z20JLsK: any = { height: 50, width: 50, backgroundColor: "#f1f2f3", marginRight: 10 }
const styleId_Z295GYo: any = { height: 50, width: 50, backgroundColor: "#f1f2f3", marginRight: 10, alignItems: 'center', justifyContent: "center" }
const styleId_28OPIE: any = { textAlign: "center", color: "#888" }
const styleId_HdCi7: any = { color: "#888", marginTop: 8 }
const styleId_1szId7: any = { flexDirection: "row", alignItems: "center" }
const styleId_Z5JOAL: any = { flexDirection: "row", alignItems: "center", marginTop: 8 }
const styleId_Z1fhvD6: any = { color: "#888", fontSize: 12 }
const styleId_2tmrJ4: any = { marginTop: 15 }
const styleId_Z1B0Lef: any = { flexDirection: "row", alignItems: "center", marginBottom: 5 }
const styleId_N7ttz: any = { backgroundColor: "#ddd", paddingHorizontal: 10, paddingVertical: 4, borderRadius: 10, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#707070" }
const styleId_ZhC3Ry: any = { fontSize: 18, marginHorizontal: 5, color: "#909090" }
const styleId_jBq3B: any = { color: "#888" }