// 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 { LibImage } from 'esoftplay/cache/lib/image/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 { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketInput_label } from 'esoftplay/cache/market/input_label/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 { 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={(id ? esp.lang("market/merchant_label_add2", "edit") : esp.lang("market/merchant_label_add2", "add")) + esp.lang("market/merchant_label_add2", "display")} />
      <MarketSection_menu title={esp.lang("market/merchant_label_add2", "label")}
        rightView={
          !id
            ?
            null
            :
            <TouchableOpacity
              style={{ marginTop: 5, flexDirection: "row", alignItems: 'center' }}
              onPress={() => {
                LibDialog.warningConfirm(esp.lang("market/merchant_label_add2", "delete_title", title), esp.lang("market/merchant_label_add2", "delete_info"), esp.lang("market/merchant_label_add2", "delete_oke"), () => {
                  MarketMerchant_labelProperty.del(id, () => LibNavigation.back())
                }, esp.lang("market/merchant_label_add2", "delete_cancel"), () => { })
              }}>
              <LibTextstyle textStyle="caption2" text={esp.lang("market/merchant_label_add2", "delete_label")} style={{ color: LibStyle.colorRed, marginRight: 3 }} />
              <LibIcon.SimpleLineIcons name={'trash'} color={LibStyle.colorRed} size={10} />
            </TouchableOpacity>
        } />
      <View style={{ marginHorizontal: 17, marginVertical: 10 }} >
        <View style={{ flexDirection: "row" }} >
          <View style={{ paddingTop: 4 }} >
            <MarketInput_label label={esp.lang("market/merchant_label_add2", "image")} />
            <TouchableOpacity
              onPress={() => LibImage.fromGallery({ crop: { forceCrop: true, ratio: "1:1" } }).then((r) => setImg(Array.isArray(r) ? r[0] : r))}
              style={{ height: 40, width: 40, backgroundColor: "#f1f2f3", borderRadius: 6, alignItems: 'center', justifyContent: 'center' }} >
              {
                (img)
                  ?
                  <LibPicture source={{ uri: img }} style={{ height: 40, width: 40, borderRadius: 6 }} />
                  :
                  <LibIcon name='camera-image' />
              }
            </TouchableOpacity>
          </View>
          <View style={{ flex: 1, marginRight: -17 }} >
            <MarketInput_square
              label={esp.lang("market/merchant_label_add2", "name")}
              defaultValue={title}
              placeholder={esp.lang("market/merchant_label_add2", "placeholder_name")}
              onChangeText={setTtl} />
          </View>
        </View>
      </View>
      <MarketButton text={esp.lang("market/merchant_label_add2", "save")} 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 }} />
    </>
  )
}