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


import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibInput } from 'esoftplay/cache/lib/input/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTheme } from 'esoftplay/cache/lib/theme/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { MarketAds_chart } from 'esoftplay/cache/market/ads_chart/import';
import { MarketAds_grup_editArgs } from 'esoftplay/cache/market/ads_grup_edit/import';
import { MarketAds_product_grup_item } from 'esoftplay/cache/market/ads_product_grup_item/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketEmpty_product } from 'esoftplay/cache/market/empty_product/import';

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


export interface MarketAds_productArgs {

}
export interface MarketAds_productProps {

}
export default function m(props: MarketAds_productProps): any {
  const [upData, setUpData] = useSafeState<any>()
  const [result, setResult] = useSafeState<any>()

  function changeActiveGroup(ads_id: string, active: number, index: number) {
    let post = {
      active: active
    }
    new LibCurl('advert/ads_list_edit/' + ads_id, post,
      (res, msg) => {
        setUpData((x: any) => LibObject.set(x, active)(index, 'active'))
      }, (msg) => {
        LibToastProperty.show(msg?.message)
      }, 1
    )
  }

  function deleteGroup(ads_id: string, index: number) {
    LibDialog.warningConfirm(esp.lang("market/ads_product", "delete_title"), esp.lang("market/ads_product", "delete_msg"), esp.lang("market/ads_product", "delete_confirm"), () => {
      LibProgress.show(esp.lang("market/ads_product", "delete_wait"))
      new LibCurl('advert/ads_list_delete/' + ads_id, null,
        (res, msg) => {
          LibProgress.hide()
          setUpData((x: any) => LibObject.splice(x, index, 1)())
        }, (msg) => {
          LibProgress.hide()
          LibToastProperty.show(msg?.message)
        }, 1
      )
    }, esp.lang("market/ads_product", "delete_cancel"), () => { })
  }

  function renderError(x: string) {
    return (
      <View style={styleId_Z27eMgy} >
        <MarketEmpty_product message={x} style={styleId_2eznyQ} />
        <MarketButton onPress={() => {
          LibNavigation.navigate('market/ads_product_group')
        }} text={esp.lang("market/ads_product", "eror_msg")} buttonStyle={styleId_2gaWiM} />
      </View>
    )
  }

  function renderItems(item: any, i: number) {
    return (
      <MarketAds_product_grup_item
        key={i} {...item}
        onEdit={() => { LibNavigation.navigate<MarketAds_grup_editArgs>('market/ads_grup_edit', { url: item?.url_detail }) }}
        onChangeActive={() => { changeActiveGroup(item?.id, item?.active == 1 ? 0 : 1, i) }}
        onDelete={() => { deleteGroup(item?.id, i) }}
      />
    )
  }

  return (
    <LibInfinite
      url={'advert/ads_list?type=1'}
      onDataChange={(dt: any, page: number) => { setUpData(dt) }}
      onResponseEdit={(res) => {
        setResult(res)
        return res
      }}
      injectData={upData}
      ListHeaderComponent={
        <>
          {
            result &&
            <>
              <View style={styleId_13OsfE} >
                <MarketAds_chart advert_type={1} title={esp.lang("market/ads_product", "product_ads")} />
              </View>
              <View style={styleId_1km1J9} >
                <View style={styleId_Z1L9PAd}>
                  <View style={styleId_2qyAJx} >
                    <LibIcon name="magnify" color={LibTheme._colorTextTertiary()} style={styleId_1hcIwd} />
                    <LibInput
                      placeholder={esp.lang("market/ads_product", "search_product")}
                      base={true}
                      style={styleId_12Uvsc} />
                  </View>
                  <TouchableOpacity onPress={() => { }}>
                    <LibIcon name="filter" color="#c5c5c5" />
                  </TouchableOpacity>
                </View>
              </View>
            </>
          }
        </>
      }
      errorView={renderError}
      renderItem={renderItems}
    />

  )
}
const styleId_13OsfE: any = { margin: 15, padding: 10, justifyContent: 'space-between', borderRadius: 5, backgroundColor: "#fff", ...LibStyle.elevation(2) }
const styleId_1km1J9: any = { paddingHorizontal: 17, marginTop: 5, marginBottom: 8 }
const styleId_Z1L9PAd: any = { flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }
const styleId_2qyAJx: any = { width: LibStyle.width - 70, flexDirection: "row", alignItems: "center", borderWidth: 1, borderRadius: 20, borderColor: "#ddd", backgroundColor: "#F9F9F9", paddingHorizontal: 10 }
const styleId_1hcIwd: any = { marginRight: 10 }
const styleId_12Uvsc: any = { paddingVertical: Platform.OS == 'ios' ? 10 : 4, fontSize: 14 }
const styleId_Z27eMgy: any = { marginHorizontal: 25 }
const styleId_2eznyQ: any = { fontSize: 16, lineHeight: 20 }
const styleId_2gaWiM: any = { marginTop: 50, margin: 17 }