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


import { LibFocus } from 'esoftplay/cache/lib/focus/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 { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketOrder_detail_review_item } from 'esoftplay/cache/market/order_detail_review_item/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketReview_listArgs {
  index?: number,
  url?: string
}
export interface MarketReview_listProps {

}
export default function m(props: MarketReview_listProps): any {
  const { index, url } = LibNavigation.getArgsAll<any>(props)
  const [tab, setTab] = useSafeState(index || 0)
  const [counter, setCounter] = useSafeState(0)
  const itWidth = LibStyle.width / 3
  const _url = url || "shop/order_review?is_reviewed="

  let tabs = [
    {
      title: esp.lang("market/review_list", "waiting_review"),
    },
    {
      title: esp.lang("market/review_list", "history"),
    },
    {
      title: esp.lang("market/review_list", "buyer_review"),
    }
  ]

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

  return (
    <View style={{ flex: 1 }} >
      <LibFocus onFocus={() => { setCounter(counter + 1) }} />
      <MarketHeader onlyBack title={esp.lang("market/review_list", "header_title")} subtitle={esp.lang("market/review_list", "header_sub")} />
      <View style={{ height: 38, marginBottom: 2, flexDirection: 'row', backgroundColor: '#fff', ...LibStyle.elevation(2) }} >
        <ScrollView horizontal showsHorizontalScrollIndicator={false} >
          {
            tabs.map((item: any, i: number) => (
              <TouchableOpacity key={i} onPress={() => setTab(i)} >
                <View style={{ height: 38, width: LibStyle.width / 3, alignItems: 'center', overflow: 'visible', justifyContent: 'center', backgroundColor: '#fff' }}>
                  <Text allowFontScaling={false} style={{
                    width: LibStyle.width / 3, fontFamily: "Arial", fontSize: tab == i ? 13 : 12,
                    fontWeight: tab == i ? "bold" : "normal",
                    fontStyle: "normal", letterSpacing: 0, textAlign: "center",
                    color: tab == i ? MarketStyle.colorPrimaryMarket : "#c5c5c5"
                  }}>{item.title}</Text>
                  <View style={{ width: (LibStyle.width / 3) - 20, height: 3, backgroundColor: tab == i ? MarketStyle.colorPrimaryMarket : "#fff", position: 'absolute', bottom: 0 }} />
                </View>
              </TouchableOpacity>
            ))
          }
        </ScrollView>
      </View>

      <LibInfinite
        key={tab + 'c' + counter}
        url={_url + tab}
        isDebug={1}
        errorView={(e: string) => (<MarketEmpty msg={e} />)}
        keyExtractor={(d, i) => i.toString()}
        renderItem={renderItems}
      />

      {/* <LibList
        data={[2, 1]}
        renderItem={(item: any, i: number) => {
          if (tab == 0) {
            return (
              <View key={i} style={[{ flexDirection: "row", backgroundColor: "white", borderRadius: 5, marginTop: 15, marginBottom: 2, marginHorizontal: 15, padding: 10 }, LibStyle.elevation(2)]} >
                <View style={{ width: 50, height: 50, backgroundColor: LibStyle.colorGrey }} />
                <View style={{ marginHorizontal: 10 }} >
                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12 }} >{"09 Des 2020"}</Text>
                  <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode="tail" style={{ paddingVertical: 5, fontFamily: "Arial", fontSize: 14 }} >{"Nama Produk"}</Text>
                  <MarketRating_input onChangeRating={(x) => { }} starSize={30} />
                </View>
              </View>
            )
          }
          else if (tab == 1) {
            return (
              <>
                <View key={i} style={{ padding: 15 }} >
                  <Text allowFontScaling={false} ellipsizeMode={"tail"} numberOfLines={1} style={{ flex: 1, fontFamily: "Arial", fontSize: 14 }} >{"Nama Produk"}</Text>
                  <View style={{ flexDirection: "row", alignItems: "center", marginVertical: 5 }} >
                    <MarketRating rating="1,1,1,1,1" starSize={15} />
                    <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 20, paddingHorizontal: 5 }} >•</Text>
                    <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12 }} >{"09 Des 2020"}</Text>
                  </View>
                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#ddd" }} >{"Tidak ada ulasan"}</Text>
                </View>
                <View style={{ height: 10, backgroundColor: LibStyle.colorGrey }} />
              </>
            )
          }
          else if (tab == 1) {
            return null
          } else {
            return null
          }
        }}
      /> */}
    </View>
  )
}