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


import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibFocus } from 'esoftplay/cache/lib/focus/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 { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketProduct_detail_container } from 'esoftplay/cache/market/product_detail_container/import';
import { MarketProduct_discuss_item } from 'esoftplay/cache/market/product_discuss_item/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketProduct_detail_discussProps {
  data?: any,
  url?: string
}
export default function m(props: MarketProduct_detail_discussProps): any {
  const [data, setData] = useSafeState<any>()
  const limit = 4


  useEffect(() => {
    getDiscuss()
  }, [])

  function getDiscuss() {
    new LibCurl(props.url + "?limit=" + limit, null,
      (res) => {
        // esp.log(res, "res discuss");
        setData(res)
      }, (msg) => {
        // esp.log(msg);
      }, 1
    )
  }

  return (
    <MarketProduct_detail_container>
      <LibFocus onFocus={getDiscuss} />
      {/* <MarketProduct_discuss_empty /> */}
      <MarketSection_menu title={esp.lang("market/product_detail_discuss", "section_discuss")} />
      {
        (data && data?.discussion > 0) ?
          <>
            {
              data?.discussion?.map?.((item: any, i: number) => {
                return (
                  <MarketProduct_discuss_item data={item} key={i} />
                )
              })
            }
            <TouchableOpacity onPress={() => LibNavigation.navigate('market/product_detail_discuss_all', { url: data?.view_all, dataProduct: props.data })} style={{ flex: 1, padding: 10 }}>
              <LibTextstyle textStyle="caption1" text={esp.lang("market/product_detail", "show_all")} style={{ color: MarketStyle.colorPrimaryMarket, marginLeft: 7, fontWeight: "bold" }} />
            </TouchableOpacity>
          </>
          :
          <View style={{ flex: 1, paddingHorizontal: 17, paddingVertical: 10, flexDirection: 'row', justifyContent: 'space-between' }}>
            <View style={{ flex: 1, marginRight: 10 }}>
              <LibTextstyle textStyle='headline' text={esp.lang("market/product_detail_discuss", "question")} />
              <LibTextstyle textStyle='caption1' text={esp.lang("market/product_detail_discuss", "question_cap")} />

              <MarketButton text={esp.lang("market/product_detail_discuss", "btn_ask")} onPress={() => {
                LibNavigation.navigate('market/product_discuss_input', { dataProduct: props.data })
              }} colorBackground='#fff' color={MarketStyle.colorPrimaryMarket} colorBorder={MarketStyle.colorPrimaryMarket} buttonStyle={{ marginTop: 20, marginRight: 20, height: 38 }} textStyle={{ fontSize: 14, fontWeight: 'bold' }} />
            </View>
            <LibPicture source={esp.assets('market/img_failed_msg.png')} resizeMode="contain" style={{ height: LibStyle.width / 3, width: LibStyle.width / 3 }} />
          </View>
      }

    </MarketProduct_detail_container>
  )
}