// withHooks
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';


import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketInput_square } from 'esoftplay/cache/market/input_square/import';
import { MarketRating_input } from 'esoftplay/cache/market/rating_input/import';
import { MarketRating_star } from 'esoftplay/cache/market/rating_star/import';

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/import';
import React, { useRef } from 'react';
import { Text, View } from 'react-native';


export interface MarketMerchant_feedbackArgs {
  data: any,
  product: any,
  user_name: string
}
export interface MarketMerchant_feedbackProps {

}

export default function m(props: MarketMerchant_feedbackProps): any {
  const { data, product, user_name } = LibNavigation.getArgsAll(props)
  const [rating, setRating] = useSafeState(0)
  const reviewText = useRef<MarketInput_square>(null)
  let inputReview = useRef('').current
  const status = [esp.lang("market/merchant_feedback", "review0"), esp.lang("market/merchant_feedback", "review1"), esp.lang("market/merchant_feedback", "review2"), esp.lang("market/merchant_feedback", "review3"), esp.lang("market/merchant_feedback", "review4"), esp.lang("market/merchant_feedback", "review5")]

  function sendReview() {

    if (rating == 0) {
      LibToastProperty.show(esp.lang("market/merchant_feedback", "empty_rating"))
      return
    }

    let post = {
      product_id: product.product_id,
      price_id: product.price_id,
      review_merchant_rating: rating,
      review_merchant: reviewText.current?.getText() || ''
    }
    LibProgress.show(esp.lang("market/merchant_feedback", "rating_wait"))
    new LibCurl('shop/order_merchant_detail_review/' + data.sale_id, post,
      (res) => {
        esp.log(res)
        LibProgress.hide()
        LibNavigation.back()
      },
      (err) => {
        LibProgress.hide()
        LibToastProperty.show(err?.message)
        esp.log(err);
      }, 1)
  }

  return (
    <View style={{ flex: 1 }}>
      <MarketHeader
        onlyBack
        title={esp.lang("market/merchant_feedback", "header_title")}
        subtitle={esp.lang("market/merchant_feedback", "header_subtitle")}
      />
      <LibScroll>
        <View style={{ borderWidth: 1, borderColor: '#ddd', margin: 15, padding: 10, borderRadius: 10 }} >
          <View style={{ flexDirection: "row" }} >
            <LibPicture source={{ uri: product?.product_image }} style={{ borderRadius: 5, backgroundColor: "#ddd", width: 60, height: 60 }} />
            <Text allowFontScaling={false} style={{ paddingLeft: 10, fontFamily: "Arial", fontSize: 14, lineHeight: 20, fontWeight: "500" }} >{product?.product_name}</Text>
          </View>
        </View>
        <View style={{ marginHorizontal: 15 }} >
          <MarketRating_star review={product.review_rating} />
          <View style={{ flexDirection: "row", alignItems: "center", marginVertical: 10 }} >
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12 }} >{esp.lang("market/merchant_feedback", "text_by")}</Text>
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12 }} >{user_name}</Text>
          </View>
          {
            product.review != null &&
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12 }} >{product?.review}</Text>
          }
        </View>
        <View style={{ borderBottomWidth: 0.5, borderBottomColor: "#ddd", marginVertical: 15 }} />
        <View style={{ marginHorizontal: 15, padding: 10, backgroundColor: "#f8f8f8", borderRadius: 5 }} >
          <LibTextstyle text={status[rating]} textStyle="subhead" style={{ alignSelf: "center" }} />
          <MarketRating_input
            starSize={40}
            onChangeRating={setRating}
            style={{ alignSelf: "center", paddingTop: 10 }} />
        </View>
        <MarketInput_square
          ref={reviewText}
          defaultValue={inputReview}
          style={{ height: 100, textAlignVertical: "top" }}
          containerStyle={{ marginTop: 15 }}
          multiline
          placeholder={esp.lang("market/merchant_feedback", "plcaholder_reply")}
          onChangeText={(t) => { inputReview = t }} />

      </LibScroll>

      <MarketButton
        text={esp.lang("market/merchant_feedback", "btn_send")}
        buttonStyle={{ margin: 10 }}
        onPress={sendReview} />
    </View >
  )
}