// 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 { LibFocus } from 'esoftplay/cache/lib/focus/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketMerchant_voucher_item } from 'esoftplay/cache/market/merchant_voucher_item/import';
import { UserClass } from 'esoftplay/cache/user/class/import';

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


export interface MarketMerchant_voucherArgs {

}
export interface MarketMerchant_voucherProps {

}
export default function m(props: MarketMerchant_voucherProps): any {
  const [tab, setTab] = useSafeState<any>(0)
  const [counter, setCounter] = useSafeState<any>(0)
  const [selectTab, setSelectTab] = useSafeState<any>({
    id: 1,
    title: esp.lang("market/merchant_voucher", "coming")
  })
  const user = UserClass.state().useSelector(s => s)


  let tabs = [
    {
      id: 1,
      title: esp.lang("market/merchant_voucher", "coming")
    },
    {
      id: 2,
      title: esp.lang("market/merchant_voucher", "running")
    },
    {
      id: 3,
      title: esp.lang("market/merchant_voucher", "done")
    },
  ]

  function deleteVoucher(id: any) {
    LibDialog.warningConfirm(esp.lang("market/merchant_voucher", "delete_title"), esp.lang("market/merchant_voucher", "delete_msg"), esp.lang("market/merchant_voucher", "delete_confirm"), () => {
      LibProgress.show(esp.lang("market/merchant_voucher", "delete_wait"))
      new LibCurl('shop/merchant_voucher_delete/' + id, null, (res, msg) => {
        LibProgress.hide()
        LibDialog.info(esp.lang("market/merchant_voucher", "delete_ok"), msg)
        setCounter((x) => x + 1)

        esp.log(res, msg);

      }, (error) => {
        esp.log(error);
        setCounter((x) => x + 1)
        LibProgress.hide()
        LibDialog.warning(esp.lang("market/merchant_voucher", "delete_failed"), error?.message)
      })

    }, esp.lang("market/merchant_voucher", "delete_cancel"), () => { })
  }

  function renderItems(item: any, i: number) {
    return (
      <MarketMerchant_voucher_item key={i + item.id} {...item} onDelete={() => { deleteVoucher(item.id) }} />
    )
  }

  return (
    <View style={styleId_qpkod}>
      <MarketHeader title={esp.lang("market/merchant_voucher", "header_title")} onlyBack style={styleId_Z6xnfR} />
      <LibFocus onFocus={() => { setCounter(counter + 1) }} />
      <View style={styleId_8tdt6} >
        <ScrollView horizontal showsHorizontalScrollIndicator={false} >
          {
            tabs && tabs.map((item: any, i: number) => {
              return (
                <TouchableOpacity key={i} onPress={() => {
                  setTab(i)
                  setSelectTab(item)
                  setCounter(counter + 1)
                }}>
                  <View style={{ height: 38, width: LibStyle.width / tabs.length, alignItems: 'center', overflow: 'visible', justifyContent: 'center', backgroundColor: '#fff' }}>
                    <Text allowFontScaling={false} style={{
                      width: LibStyle.width / tabs.length, fontFamily: "Arial", fontSize: tab == i ? 13 : 12,
                      fontWeight: tab == i ? "bold" : "normal",
                      fontStyle: "normal", letterSpacing: 0, textAlign: "center",
                      color: tab == i ? "#51b596" : "#c5c5c5"
                    }}>{item.title}</Text>
                    <View style={{ width: (LibStyle.width / tabs.length) - 20, height: 3, backgroundColor: tab == i ? "#51b596" : "#fff", position: 'absolute', bottom: 0 }} />
                  </View>
                </TouchableOpacity>
              )
            })
          }
        </ScrollView>

      </View>

      <LibInfinite
        url={'shop/merchant_voucher?merchant_id=' + user?.merchant_id + '&date=' + selectTab.id}
        key={counter}
        // isDebug={1}
        errorView={(error: string) => {
          return (
            <MarketEmpty msg={error} />
          )
        }}
        renderItem={renderItems}
      />

      <View style={styleId_Z2qlY6B}>
        <MarketButton onPress={() => { LibNavigation.navigate('market/merchant_voucher_input') }} text={esp.lang("market/merchant_voucher", "create_voucher")} />
      </View>
    </View>
  )
}
const styleId_qpkod: any = { flex: 1, backgroundColor: '#fff' }
const styleId_Z6xnfR: any = { backgroundColor: '#fff' }
const styleId_8tdt6: any = { height: 38, marginBottom: 2, flexDirection: 'row', backgroundColor: '#fff', ...LibStyle.elevation(2) }
const styleId_Z2qlY6B: any = { padding: 10, backgroundColor: '#fff' }