// 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 { LibSkeleton } from 'esoftplay/cache/lib/skeleton/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_merchant_listArgs {

}
export interface MarketReview_merchant_listProps {

}
export default function m(props: MarketReview_merchant_listProps): any {
  const { index, url } = LibNavigation.getArgsAll<any>(props)
  const [tab, setTab] = useSafeState(index || 0)
  const _url = url || "shop/order_merchant_review?is_reviewed="

  let tabs = [
    {
      title: esp.lang("market/review_merchant_list", "not_review"),
    },
    {
      title: esp.lang("market/review_merchant_list", "reviewed"),
    }
  ]

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

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader onlyBack title={esp.lang("market/review_merchant_list", "header_title")} subtitle={esp.lang("market/review_merchant_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 / 2, alignItems: 'center', overflow: 'visible', justifyContent: 'center', backgroundColor: '#fff' }}>
                  <Text allowFontScaling={false} style={{
                    width: LibStyle.width / 2, 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 / 2) - 20, height: 3, backgroundColor: tab == i ? MarketStyle.colorPrimaryMarket : "#fff", position: 'absolute', bottom: 0 }} />
                </View>
              </TouchableOpacity>
            ))
          }
        </ScrollView>
      </View>

      <LibInfinite
        key={tab}
        url={_url + tab}
        isDebug={1}
        keyExtractor={(d, i) => i.toString()}
        errorView={(e: string) => (<MarketEmpty msg={e} />)}
        renderItem={renderItems}
        LoadingView={
          <LibSkeleton backgroundStyle={{ height: LibStyle.height }}>
            {
              [1, 1, 1, 1].map((x: any, i: number) => (
                <View key={i}>
                  <View style={{ marginTop: 10, marginHorizontal: 15, marginBottom: 10 }} >
                    <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
                      <View style={{ width: 25, height: 25, borderRadius: 12.5, backgroundColor: 'white' }} />
                      <View style={{ marginLeft: 10, flex: 1 }} >
                        <View style={{ width: '25%', height: 10, borderRadius: 10, backgroundColor: 'white' }} />
                        <View style={{ width: '40%', height: 13, borderRadius: 10, marginTop: 3, backgroundColor: 'white' }} />
                      </View>
                    </View>
                    <View style={{ marginTop: 15, marginBottom: 20, flexDirection: 'row', alignContent: 'center', alignItems: 'flex-start' }}>
                      <View style={{ width: 50, height: 50, borderRadius: 5, backgroundColor: 'white' }} />
                      <View style={{ marginLeft: 10, marginRight: 15, flex: 1 }}>
                        <View style={{ width: '60%', height: 13, borderRadius: 10, backgroundColor: 'white' }} />
                        <View style={{ flexDirection: 'row', marginTop: 5 }}>
                          <LibIcon name='star' size={20} />
                          <LibIcon name='star' size={20} />
                          <LibIcon name='star' size={20} />
                          <LibIcon name='star' size={20} />
                          <LibIcon name='star' size={20} />
                        </View>
                        <View style={{ width: '40%', height: 13, borderRadius: 10, marginTop: 5, backgroundColor: 'white' }} />
                      </View>
                    </View>
                  </View>
                  <View style={{ height: 10, backgroundColor: LibStyle.colorGrey }} />
                </View>
              ))
            }
          </LibSkeleton>
        }
      />

    </View>
  )
}