// 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, Text, TouchableOpacity, View } from 'react-native';


export interface MarketAds_storeArgs {

}
export interface MarketAds_storeProps {

}

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

  function changeActiveAds(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 deleteAds(ads_id: string, index: number) {
    LibDialog.warningConfirm(esp.lang("market/ads_store", "delete_title"), esp.lang("market/ads_store", "delete_msg"), esp.lang("market/ads_store", "delete_confirm"), () => {
      LibProgress.show(esp.lang("market/ads_store", "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_store", "delete_cancel"), () => { })
  }

  function renderError(x: string) {
    return (
      <View style={styleId_Z27eMgy} >
        <MarketEmpty_product message={esp.lang("market/ads_store", "error_msg")} style={styleId_1GO6f} />
        <Text allowFontScaling={false} style={styleId_Z1z7AQi} >{esp.lang("market/ads_store", "error_msg1")}</Text>
        <MarketButton onPress={() => {
          LibNavigation.navigate('market/ads_store_name')
        }} text={esp.lang("market/ads_store", "btn_create")} buttonStyle={styleId_2gaGi2} />
      </View>
    )
  }

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

  return (
    <LibInfinite
      url={'advert/ads_list?type=2'}
      onDataChange={(dt: any, page: number) => { setUpData(dt) }}
      injectData={upData}
      onResponseEdit={(res) => {
        setResult(res)
        return res
      }}
      ListHeaderComponent={
        <>
          {
            result &&
            <>
              <View style={styleId_13OsfE} >
                <MarketAds_chart advert_type={2} title={esp.lang("market/ads_store", "text_chart_title")} />
              </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_store", "search_product")}
                      base={true}
                      style={styleId_12Uvsc} />
                  </View>
                  <TouchableOpacity onPress={() => { }}>
                    <LibIcon name="filter" color="#c5c5c5" />
                  </TouchableOpacity>
                </View>
              </View>
            </>
          }
        </>
      }
      errorView={renderError}
      renderItem={renderItem}
    />

  )
}
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_1GO6f: any = { fontSize: 16, lineHeight: 20, marginBottom: 5 }
const styleId_Z1z7AQi: any = { margin: 15, textAlign: 'center', marginTop: 20, fontSize: 12, lineHeight: 18, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0 }
const styleId_2gaGi2: any = { marginTop: 50, margin: 15 }