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


import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketInput_square } from 'esoftplay/cache/market/input_square/import';
import { MarketMerchant_labelProperty } from 'esoftplay/cache/market/merchant_label/import';
import { MarketMerchant_label_productArgs } from 'esoftplay/cache/market/merchant_label_product/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';

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


export interface MarketMerchant_label_addProps {

}
export default function m(props: MarketMerchant_label_addProps): any {
  const args = LibNavigation.getArgsAll<MarketMerchant_label_productArgs>(props)
  const { id, title, image, total } = args
  let data = useRef<any>().current
  const [img, setImg] = useSafeState(image)
  const [ttl, setTtl] = useSafeState(title)

  useEffect(() => {
    data = { image: img, title: ttl }
  })

  return (
    <>
      <MarketHeader onlyBack title={esp.lang("market/merchant_label_add", "header_title", id ? esp.lang("market/merchant_label_add", "text_edit") : esp.lang("market/merchant_label_add", "text_add"))} />
      <ScrollView>
        <MarketSection_menu title={esp.lang("market/merchant_label_add", "section_display")}
          rightView={
            !id
              ?
              null
              :
              <TouchableOpacity
                style={{ marginTop: 5, flexDirection: "row", alignItems: 'center' }}
                onPress={() => {
                  LibDialog.warningConfirm(esp.lang("market/merchant_label_add", "delete_title", title), esp.lang("market/merchant_label_add", "delete_msg"), esp.lang("market/merchant_label_add", "delete_confirm"), () => {
                    MarketMerchant_labelProperty.del(id, () => LibNavigation.back(2))
                  }, esp.lang("market/merchant_label_add", "delete_cancel"), () => { })
                }}>
                <LibTextstyle textStyle="caption2" text={esp.lang("market/merchant_label_add", "delete_display")} style={{ color: LibStyle.colorRed, marginRight: 3 }} />
                <LibIcon.SimpleLineIcons name={'trash'} color={LibStyle.colorRed} size={10} />
              </TouchableOpacity>
          } />
        <MarketInput_square
          label={esp.lang("market/merchant_label_add", "label_name")}
          placeholder={esp.lang("market/merchant_label_add", "placeholder_name")}
          defaultValue={title}
          onChangeText={setTtl}
        />
        <LibTextstyle textStyle="footnote" text={esp.lang("market/merchant_label_add", "info_display")} style={{ fontSize: 10, marginHorizontal: 17, color: "#A8A7B8", marginTop: -5 }} />
      </ScrollView>
      <View pointerEvents={ttl ? 'auto' : 'none'} >
        <MarketButton text={esp.lang("market/merchant_label_add", "btn_save")} textStyle={{ color: 'white' }} colorBackground={ttl ? undefined : '#aaa'} onPress={() => {
          if (id) {
            MarketMerchant_labelProperty.edit({ id: id, ...data }, () => { LibNavigation.back(2) })
          } else {
            MarketMerchant_labelProperty.add(data, () => { LibNavigation.back(1) })
          }
        }} buttonStyle={{ marginHorizontal: 17, marginVertical: 10 }} />
      </View>
    </>
  )
}