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


import { LibIcon } from 'esoftplay/cache/lib/icon/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 { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketMerchant_labelItem, MarketMerchant_labelProperty } from 'esoftplay/cache/market/merchant_label/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketMerchant_label_listProps {

}
export default function m(props: MarketMerchant_label_listProps): any {
  const { label_ids } = LibNavigation.getArgsAll<any>(props)
  const [labels] = MarketMerchant_labelProperty.state().useState()
  const [datas, setDatas,getDatas] = useSafeState<string[]>(label_ids || [])

  useEffect(() => {
    MarketMerchant_labelProperty.list()
    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
  }, [])

  function updateDatas(id: string) {
    if (id != '') {
      let dt = [...getDatas()]
      if (dt.includes(String(id))) {
        dt.splice(dt.indexOf(String(id)), 1)
      } else {
        dt.push(String(id))
      }
      setDatas(dt)
    }
  }

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        onlyBack
        title={esp.lang("market/merchant_label_list", "header_title")}
        leftIcon={{ name: "close", onPress: () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props)) }}
        rightIcon={{ name: "plus", onPress: () => { LibNavigation.navigate('market/merchant_label_add') } }}
      />
      <LibList
        data={labels}
        extraData={datas}
        ListHeaderComponent={
          <View style={{ padding: 17, backgroundColor: "#f9f9f9" }} >
            <LibTextstyle textStyle="footnote" text={esp.lang("market/merchant_label_list", "display_etalase", String(labels?.length))} style={{ fontWeight: 'bold', textAlign: 'center', color: "#888" }} />
            <LibTextstyle textStyle="caption1" text={esp.lang("market/merchant_label_list", "display_info")} style={{ textAlign: 'center', color: "#888" }} />
          </View>
        }
        renderItem={(item: MarketMerchant_labelItem, idx) => (
          <TouchableOpacity
            onPress={() => { updateDatas(String(item.id)) }}
            style={{ paddingHorizontal: 17, paddingVertical: 10, flexDirection: "row", alignItems: 'center' }} >
            <LibIcon color={MarketStyle.colorGreen} name={datas.includes(String(item.id)) ? 'checkbox-marked-circle' : 'checkbox-blank-circle-outline'} />
            <LibPicture source={{ uri: item.image }} style={{ height: 30, width: 30, borderRadius: 6, marginLeft: 10 }} />
            <LibTextstyle textStyle="callout" text={item.title} style={{ flex: 1, marginLeft: 10 }} />
            <LibTextstyle textStyle="footnote" text={esp.lang("market/merchant_label_list", "total", LibUtils.number(item?.total || 0))} style={{ color: "#888" }} />
          </TouchableOpacity>
        )}
      />
      <MarketButton
        buttonStyle={{ marginHorizontal: 17, marginVertical: 12 }}
        onPress={() => { LibNavigation.sendBackResult(datas, LibNavigation.getResultKey(props)) }} text={esp.lang("market/merchant_label_list", "btn_save")} />
    </View>
  )
}