// withHooks

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
import { LibList } from 'esoftplay/cache/lib/list/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 { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { UserData } from 'esoftplay/cache/user/data/import';
import esp from 'esoftplay/esp';

import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
import React, { useEffect } from 'react';
import { TouchableOpacity, View } from 'react-native';


export interface MarketMerchant_labelProps {

}

export interface MarketMerchant_labelItem {
  id?: string
  title: string,
  image: string,
  total?: string,
}

const _state = useGlobalState<MarketMerchant_labelItem[]>([], { persistKey: 'market/merchant_label' })

export function state(): useGlobalReturn<MarketMerchant_labelItem[]> {
  return _state
}

export function list(): void {
  new LibCurl('shop/merchant_label', null,
    (res, msg) => {
      _state.set(res)
    },
    (msg) => {
      _state.set([])
    }
  )
}

export function add(data?: MarketMerchant_labelItem, onDone?: (res: any, msg: string) => void, onFailed?: (msg: string) => void): void {
  new LibCurl('shop/merchant_label_add', { ...data },
    (res, msg) => {
      list()
      onDone && onDone(res, msg)
    },
    (msg) => {
      onFailed && onFailed(msg?.message)
      LibToastProperty.show(msg?.message)
    }
  )

}

export function edit(data?: MarketMerchant_labelItem, onDone?: (res: any, msg: string) => void, onFailed?: (msg: string) => void): void {
  new LibCurl('shop/merchant_label_edit', { ...data },
    (res, msg) => {
      list()
      onDone && onDone(res, msg)
    },
    (msg) => {
      onFailed && onFailed(msg?.message)
      LibToastProperty.show(msg?.message)
    }
  )
}

export function del(id: string, onDone?: (res: any, msg: string) => void, onFailed?: (msg: string) => void): void {
  new LibCurl('shop/merchant_label_del', { id: id },
    (res, msg) => {
      list()
      onDone && onDone(res, msg)
    },
    (msg) => {
      onFailed && onFailed(msg?.message)
      LibToastProperty.show(msg?.message)
    }
  )
}

export default function m(props: MarketMerchant_labelProps): any {
  const [data, setData] = _state.useState()
  UserData.register('market/merchant_label')

  useEffect(list, [])

  return (
    <LibKeyboard_avoid style={{ flex: 1 }} >
      <MarketHeader
        onlyBack
        title={esp.lang("market/merchant_label", "header_title")}
        rightIcon={{ name: "plus", onPress: () => { LibNavigation.navigate('market/merchant_label_add') } }}
      />
      <LibList
        data={data}
        onRefresh={list}
        ListHeaderComponent={
          <View style={{ padding: 17, backgroundColor: "#f9f9f9" }} >
            <LibTextstyle textStyle="footnote" text={esp.lang("market/merchant_label", "total_display", String(data?.length))} style={{ fontWeight: 'bold', textAlign: 'center', color: "#888" }} />
            <LibTextstyle textStyle="caption1" text={esp.lang("market/merchant_label", "display")} style={{ textAlign: 'center', color: "#888" }} />
          </View>
        }
        renderItem={(item: MarketMerchant_labelItem, i) => (
          <TouchableOpacity
            onPress={() => { LibNavigation.navigate("market/merchant_label_product", { ...item }) }}
            style={{ flexDirection: "row", paddingHorizontal: 17, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: "#eee", alignItems: 'center' }} >
            <LibPicture source={{ uri: item.image }} style={{ height: 40, width: 40, resizeMode: "cover", borderRadius: 3, ...LibStyle.elevation(2) }} />
            <View style={{ flex: 1, marginLeft: 17 }} >
              <LibTextstyle text={item.title} textStyle="callout" style={{ fontWeight: "normal" }} />
              <LibTextstyle text={esp.lang("market/merchant_label", "total_product", String(item?.total))} textStyle="caption1" style={{ fontWeight: "normal", color: "#888" }} />
            </View>
            <LibIcon.SimpleLineIcons name={'arrow-right'} color={MarketStyle.colorPrimaryMarket} size={16} />
          </TouchableOpacity>
        )}
      />
    </LibKeyboard_avoid>
  )
}