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


import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketProduct_review_item } from 'esoftplay/cache/market/product_review_item/import';
import { MarketRating } from 'esoftplay/cache/market/rating/import';
import { MarketRating_star } from 'esoftplay/cache/market/rating_star/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

import React, { useRef } from 'react';
import { Animated, ScrollView, TouchableOpacity, View } from 'react-native';
const AnimatedInfinite = Animated.createAnimatedComponent(LibInfinite)


export interface MarketProduct_reviewArgs {
  url: string
  data: any
}

export interface MarketProduct_reviewProps {

}

export default function m(props: MarketProduct_reviewProps): any {
  const { url, data } = LibNavigation.getArgsAll<any>(props)
  const tabs = [5, 4, 3, 2, 1]
  const [rating, setRating, getRating] = useSafeState<any>()
  const [imgOnly, setImgOnly, getImgOnly] = useSafeState<any>(0)
  const dataRating = data.rating.split(',').reverse()

  let scrollY = useRef(new Animated.Value(0)).current

  const headerHeight = scrollY.interpolate({
    inputRange: [0, 110],
    outputRange: [0, -110],
    extrapolate: 'clamp'
  })

  function show() {
    Animated.timing(scrollY, {
      toValue: 0,
      duration: 200,
      useNativeDriver: true
    }).start()
  }

  function buildUrl(url: string): string {
    if (getRating()) {
      url += url.includes('?') ? '&' : '?'
      url += 'rating=' + getRating()
    }
    if (getImgOnly()) {
      url += url.includes('?') ? '&' : '?'
      url += 'image_only=' + getImgOnly()
    }
    return url
  }

  function renderItems(item: any, i: number) {
    return (
      <MarketProduct_review_item key={i} {...item} />
    )
  }

  let height = LibStyle.STATUSBAR_HEIGHT + 175 + 50

  return (
    <View style={{ flex: 1 }} >
      <View style={{ flex: 1 }} >
        <AnimatedInfinite
          key={buildUrl(url)}
          url={buildUrl(url)}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: scrollY } } }],
            { useNativeDriver: false }
          )}
          isDebug={1}
          errorView={(e: string) => (<MarketEmpty msg={e} />)}
          keyExtractor={(x, i) => i.toString()}
          ListHeaderComponent={
            <View style={{ height: height }} />
          }
          renderItem={renderItems}
        />
        <Animated.View style={{ transform: [{ translateY: headerHeight }], backgroundColor: "white", paddingHorizontal: 17, position: "absolute", top: LibStyle.STATUSBAR_HEIGHT + 50, left: 0, right: 0, overflow: "hidden" }} >
          <View style={{ flexDirection: "row" }} >
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: "white", marginVertical: 10 }} >
              <View style={{ flexDirection: "row", alignItems: "baseline" }} >
                <LibTextstyle textStyle="largeTitle" text={data?.rating_value} style={{}} />
                <LibTextstyle textStyle="title3" text={esp.lang("market/product_review", "from_5")} style={{}} />
              </View>
              <MarketRating rating={data.rating} />
              <LibTextstyle textStyle="footnote" text={esp.lang("market/product_review", "review", data?.rating_count)} style={{ marginTop: 5 }} />
            </View>
            <View style={{ flex: 2, backgroundColor: "white", marginVertical: 10 }} >
              {
                dataRating.map((item: any, i: number) => {
                  let percentage = ((item / data.rating_count) * 100) + '%'
                  return (
                    <View key={i} style={{ flexDirection: "row", alignItems: 'center' }} >
                      <MarketRating_star review={tabs[i].toString()} size={12} starStyle={{ marginRight: 0 }} containerStyle={{ marginVertical: 0 }} />
                      <View style={{ height: 5, borderRadius: 2.5, marginHorizontal: 5, backgroundColor: LibStyle.colorGrey, flex: 1 }} >
                        <View style={{ height: 5, borderRadius: 2.5, backgroundColor: MarketStyle.colorPrimaryMarket, width: percentage }} />
                      </View>
                      <LibTextstyle textStyle="footnote" text={item} style={{}} />
                    </View>
                  )
                })
              }
            </View>
          </View>
          <View style={{ marginHorizontal: -17, backgroundColor: "white", borderTopWidth: 0.5, borderTopColor: '#ddd', marginBottom: 10 }} >
            <ScrollView horizontal showsHorizontalScrollIndicator={false} pagingEnabled >
              <TouchableOpacity onPress={() => { setImgOnly(0); setRating(undefined); show() }} style={{ borderRadius: 20, borderWidth: 1, borderColor: rating == undefined ? MarketStyle.colorPrimaryMarket : "#ddd", backgroundColor: rating == undefined ? LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.1) : "white", paddingHorizontal: 17, paddingVertical: 10, marginRight: 10, marginTop: 10, alignItems: "center", marginLeft: 10 }} >
                <LibTextstyle textStyle="footnote" text={esp.lang("market/product_review", "all")} style={{ color: "#909090" }} />
              </TouchableOpacity>
              <TouchableOpacity onPress={() => { setRating(''); setImgOnly(1); show() }} style={{ borderRadius: 20, borderWidth: 1, borderColor: imgOnly == 1 ? MarketStyle.colorPrimaryMarket : "#ddd", backgroundColor: imgOnly == 1 ? LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.1) : "white", paddingHorizontal: 17, paddingVertical: 10, marginRight: 10, marginTop: 10, alignItems: "center" }} >
                <LibTextstyle textStyle="footnote" text={esp.lang("market/product_review", "with_photo")} style={{ color: "#909090" }} />
              </TouchableOpacity>
              {
                tabs.map((item: any, i: number) => (
                  <TouchableOpacity key={i} onPress={() => { setImgOnly(0); setRating(item); show() }} style={{ borderRadius: 20, borderWidth: 1, borderColor: rating == item ? MarketStyle.colorPrimaryMarket : "#ddd", backgroundColor: rating == item ? LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.1) : "white", paddingHorizontal: 17, paddingVertical: 10, flexDirection: "row", marginRight: 10, marginTop: 10, alignItems: "center" }} >
                    <LibIcon name="star" color={rating == item ? MarketStyle.colorPrimaryMarket : "#ddd"} size={13} />
                    <LibTextstyle textStyle="footnote" text={item} style={{ marginLeft: 5, color: "#909090" }} />
                  </TouchableOpacity>
                ))
              }
            </ScrollView>
          </View>
        </Animated.View>
      </View>
      <View style={{ position: "absolute", top: 0, left: 0, right: 0, backgroundColor: "white" }} >
        <MarketHeader onlyBack title={esp.lang("market/product_review", "header_title")} />
      </View>
    </View>
  )
}