// withHooks
// noPage
import esp from 'esoftplay/esp';

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInput } from 'esoftplay/cache/lib/input/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketSlidingupProperty } from 'esoftplay/cache/market/slidingup/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketAds_button_keyword_addArgs {

}
export interface MarketAds_button_keyword_addProps {
  cat_ids: string,
  onSuccess?: () => void,
  style?: any
}
export default function m(props: MarketAds_button_keyword_addProps): any {
  let keyword = useRef<string>('').current

  function doAddKeyword() {
    if (keyword != '') {
      new LibCurl('advert/ads_product_keyword_add', { cat_ids: JSON.stringify(props?.cat_ids?.split(',')), keyword },
        (res, msg) => {
          esp.log(res, msg);
          props.onSuccess && props.onSuccess()
          MarketSlidingupProperty.hide()
        }, (msg) => {
          esp.log(msg);
          MarketSlidingupProperty.hide()
          LibNavigation.back()
          LibToastProperty.show(msg?.message)
        }, 1
      )
    } else {
      LibToastProperty.show(esp.lang("market/ads_button_keyword_add", "empty_keywords"))
    }
  }

  return (
    <View style={[styleId_Z9ljKc, { ...props?.style }]} >
      <TouchableOpacity onPress={() => {
        MarketSlidingupProperty.add(
          <View style={styleId_22MUga} >
            <View style={styleId_Z1a59jN} >
              <TouchableOpacity onPress={() => MarketSlidingupProperty.hide()} style={styleId_1hcIwd} >
                <LibIcon name="close" size={26} />
              </TouchableOpacity>
              <Text allowFontScaling={false} style={styleId_Z26yQmp} >{esp.lang("market/ads_button_keyword_add", "add_keyword")}</Text>
            </View>
            <View style={styleId_KErCQ} >
              <LibInput
                base
                placeholder={esp.lang("market/ads_button_keyword_add", "placeholder_keyword")}
                onChangeText={(t) => { keyword = t }}
                onSubmitEditing={() => {
                }}
                style={styleId_2rKsIp} />
            </View>
            <MarketButton text={esp.lang("market/ads_button_keyword_add", "btn_save")} buttonStyle={styleId_ZBEBtQ} onPress={doAddKeyword} />
          </View>
        )
        MarketSlidingupProperty.show()
      }} style={styleId_1fmvBo} >
        <LibIcon name='plus-circle' style={styleId_wxwT1} color={MarketStyle.colorPrimaryMarket} />
        <Text allowFontScaling={false} style={styleId_dlaJW} >{esp.lang("market/ads_button_keyword_add", "add_keyword1")}</Text>
      </TouchableOpacity>
    </View>
  )
}
const styleId_Z9ljKc: any = { paddingHorizontal: 17, paddingTop: 10, paddingBottom: 5 }
const styleId_22MUga: any = { maxHeight: LibStyle.height / 2, backgroundColor: "white", paddingVertical: 15, paddingHorizontal: 17, borderTopRightRadius: 15, borderTopLeftRadius: 15 }
const styleId_Z1a59jN: any = { flexDirection: "row", alignItems: "center", marginVertical: 10 }
const styleId_1hcIwd: any = { marginRight: 10 }
const styleId_Z26yQmp: any = { fontWeight: 'bold', fontSize: 16 }
const styleId_KErCQ: any = { flexDirection: "row", alignItems: "center", borderBottomWidth: 1, borderBottomColor: '#f1f1f1', marginVertical: 10 }
const styleId_2rKsIp: any = { flex: 1, paddingVertical: Platform.OS == 'ios' ? 10 : 4, fontFamily: 'Arial', fontSize: 18, fontWeight: 'bold' }
const styleId_ZBEBtQ: any = { marginVertical: 10 }
const styleId_1fmvBo: any = { flexDirection: 'row', alignItems: 'center' }
const styleId_wxwT1: any = { marginRight: 5 }
const styleId_dlaJW: any = { fontFamily: 'Arial', fontSize: 14, fontWeight: 'bold', color: MarketStyle.colorPrimaryMarket }