// withHooks

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 { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketProduct_detail_container } from 'esoftplay/cache/market/product_detail_container/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import esp from 'esoftplay/esp';
import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';

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


export interface MarketProduct_discussArgs {

}
export interface MarketProduct_discussProps {

}
export default function m(props: MarketProduct_discussProps): any {
  const { url, is_merchant, fromPage } = LibNavigation.getArgsAll<any>(props)
  const user = UserClass.state().get()

  const [tab, setTab] = useSafeState<any>(0)
  const [counter, setCounter] = useSafeState<any>(0)
  const [_url, set_url] = useSafeState<any>(url ? url : 'shop/product_discussion')
  let defaultTab = fromPage == 'user/profile' ? { id: 2, title: esp.lang("market/product_discuss", "discus") } : { id: 1, title: esp.lang("market/product_discuss", "store_discus") }
  const [selectTab, setSelectTab] = useSafeState<any>(defaultTab)

  let tabs = [
    {
      id: 1,
      title: esp.lang("market/product_discuss", "store_discus")
    },
    {
      id: 2,
      title: esp.lang("market/product_discuss", "discus")
    }
  ]
  let status = [
    {
      id: 1,
      title: esp.lang("market/product_discuss", "status1")
    },
    {
      id: 2,
      title: esp.lang("market/product_discuss", "status2")
    },
    {
      id: 3,
      title: esp.lang("market/product_discuss", "status3")
    }
  ]

  const post = {
    merchant_id: user?.merchant_id
  }

  // ini untuk menampilkan semua diskusi yang ada di semua produk
  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <MarketHeader onlyBack title={esp.lang("market/product_discuss", "headr")} />
      {/* <ScrollView horizontal showsHorizontalScrollIndicator={false}>
          <View style={{ paddingBottom: 5, padding: 15, flexDirection: 'row', }}>
            {
              status?.map((item, i) => {
                return (
                  <TouchableOpacity
                    key={i}
                    onPress={() => { esp.log("dipencet"); }}
                    style={{ height: 32, marginRight: 8, marginBottom: 8, borderRadius: 20, backgroundColor: props.status == status.code ? MarketStyle.colorPrimaryMarket : 'transparent', borderColor: props.status == status.code ? 'transparent' : '#ccc', borderWidth: 1, paddingHorizontal: 17, justifyContent: 'center' }} >
                    <LibTextstyle textStyle='footnote' text={item.title} style={{ color: props.status == status.code ? "white" : "#7E7E7E" }} />
                  </TouchableOpacity>
                )
              })
            }
          </View>
        </ScrollView> */}
      <MarketProduct_detail_container>
        <LibInfinite
          url={_url}
          refreshEnabled
          isDebug={1}
          key={counter}
          ListHeaderComponent={
            fromPage != 'user/profile' &&
            <View style={{ height: 38, marginBottom: 2, flexDirection: 'row', backgroundColor: '#fff', ...LibStyle.elevation(2) }} >
              {
                tabs && tabs.map((item: any, i: number) => {
                  return (
                    <TouchableOpacity key={i} onPress={() => {
                      setTab(i)
                      setSelectTab(item)
                      setCounter(counter + 1)
                    }}>
                      <View style={{ height: 38, width: LibStyle.width / tabs.length, alignItems: 'center', overflow: 'visible', justifyContent: 'center', backgroundColor: '#fff' }}>
                        <Text allowFontScaling={false} style={{
                          width: LibStyle.width / tabs.length, fontFamily: "Arial", fontSize: tab == i ? 13 : 12,
                          fontWeight: tab == i ? "bold" : "normal",
                          fontStyle: "normal", letterSpacing: 0, textAlign: "center",
                          color: tab == i ? "#51b596" : "#c5c5c5"
                        }}>{item.title}</Text>
                        <View style={{ width: (LibStyle.width / tabs.length) - 20, height: 3, backgroundColor: tab == i ? "#51b596" : "#fff", position: 'absolute', bottom: 0 }} />
                      </View>
                    </TouchableOpacity>
                  )
                })
              }

            </View>
          }
          post={selectTab?.id == 1 ? post : null}
          errorView={(error: any) => (
            <MarketEmpty msg={error} />
          )}
          renderItem={(item) => {
            return (
              <TouchableOpacity onPress={() => {
                LibNavigation.navigate('market/product_discuss_reply_detail', { url: item?.url, data: item, fromPage: 'market/product_discuss' })
              }} style={{ flex: 1, flexDirection: 'row', padding: 10, borderBottomWidth: 1, borderBottomColor: MarketStyle.colorBgGrey }}>
                <LibPicture source={{ uri: item?.product_image }} style={{ height: 50, width: 50, borderRadius: 10 }} />
                <View style={{ flex: 1, marginLeft: 10 }}>
                  <View style={{ flex: 1, flexDirection: 'row' }}>
                    <LibTextstyle numberOfLines={1} ellipsizeMode={"tail"} textStyle='caption2' text={item?.product_name} style={{ color: '#7E7E7E', flex: 1, marginRight: 10 }} />
                    <LibTextstyle textStyle='caption2' text={moment(item.created).localeFormat("DD MMM YYYY")} style={{ color: '#7E7E7E' }} />
                  </View>
                  <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
                    <LibTextstyle textStyle='m_body2' text={item.message} style={{ flex: 1, marginRight: 10, color: '#4E4E4E', fontWeight: 'bold' }} />

                    {
                      selectTab?.id == 1 ?
                        <LibIcon name='circle' size={10} color={item.status == 1 ? "#fff" : MarketStyle.colorGreen} />
                        :
                        <LibIcon name='circle' size={10} color={item.status == 2 ? "#fff" : item.status == 1 ? MarketStyle.colorBgGrey : MarketStyle.colorGreen} />
                    }

                  </View>
                  <LibTextstyle textStyle='caption2' text={item?.total_replies > 0 ? item?.total_replies + esp.lang("market/product_discuss", "comment") : ""} style={{ marginTop: 4, color: '#7E7E7E' }} />
                </View>
              </TouchableOpacity>
            )
          }}
        />
      </MarketProduct_detail_container>
    </View>
  )
}