// withHooks
// noPage
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 { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketAds_product_listArgs } from 'esoftplay/cache/market/ads_product_list/import';
import { MarketAds_product_preview } from 'esoftplay/cache/market/ads_product_preview/import';
import { MarketAds_store_preview } from 'esoftplay/cache/market/ads_store_preview/import';
import { MarketInput_underline } from 'esoftplay/cache/market/input_underline/import';
import { UseForm } from 'esoftplay/cache/use/form/import';
import { UserClass } from 'esoftplay/cache/user/class/import';

import React, { useEffect } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { MarketAds_product_form } from './ads_product_group';


export interface MarketAds_content_inputArgs {

}
export interface MarketAds_content_inputProps {

}
export default function m(props: MarketAds_content_inputProps): any {
  const [form, setForm] = UseForm<MarketAds_product_form>('market/ads_register')

  const user = UserClass.state().useSelector(x => x)
  const [merchant, setMerchant] = useSafeState<any>()

  useEffect(() => {
    new LibCurl('shop/merchant_detail/' + user?.merchant_id, null,
      (res) => { setMerchant(res) },
      (msg) => { LibDialog.warning(esp.lang("market/ads_content_input", "failed_get_detail"), msg?.message) }, 1
    )
  }, [])

  return (
    <View style={styleId_Z1nfYx6}>
      {
        !merchant ? <LibLoading /> :

          <LibKeyboard_avoid style={styleId_ZcMJmd} >
            <ScrollView>
              <View style={styleId_Z2maV4Q} >
                <Text allowFontScaling={false} style={styleId_Ze5ku0} >{esp.lang("market/ads_content_input", "displayed_product")}</Text>
                <View style={styleId_Z1i5nTz}>
                  <Text allowFontScaling={false} style={styleId_KcsXC} >{esp.lang("market/ads_content_input", "selected_product", String(form?.products?.length || 0))}</Text>
                  <Text allowFontScaling={false} style={styleId_cP8sW} > (sesuai rekomendasi)</Text>
                </View>
              </View>

              {/* preview produk yang di pilih */}
              {
                LibUtils.checkUndefined(form, 'products.0') && form?.products?.map((item: any, i: number) => {
                  return (
                    <MarketAds_product_preview
                      key={i}
                      {...item}
                      onDelete={() => {
                        const del = LibObject.splice(form.products, i, 1)()
                        setForm('products')(del)
                      }} />
                  )
                })
              }

              {
                <TouchableOpacity disabled={form?.products?.length == 10} onPress={() => {
                  LibNavigation.setRedirect(() => LibNavigation.back())
                  LibNavigation.push<MarketAds_product_listArgs>('market/ads_product_list', { from: 'market/ads_summary' })
                }} style={styleId_1l7Fkv}>
                  <LibIcon name="plus" size={25} color="#c5c5c5" />
                  <Text allowFontScaling={false} style={styleId_GekIv} > {form?.products?.length > 0 ? esp.lang("market/ads_content_input", "add_product") : esp.lang("market/ads_content_input", "select_product")}</Text>
                </TouchableOpacity>
              }

              <View style={styleId_28MYQz} >
                <Text allowFontScaling={false} style={styleId_Ze5ku0} >Pesan Promosi</Text>
                <MarketInput_underline
                  onChangeText={setForm('description')}
                  defaultValue={form?.description}
                  placeholder={esp.lang("market/ads_content_input", "placeholder_msg_promo")}
                  additionalText={esp.lang("market/ads_content_input", "msg_promo")}
                  containerStyle={{ marginLeft: -15 }}
                />
              </View>

              <View style={styleId_1WAFLr}>
                <Text allowFontScaling={false} style={styleId_Ze5ku0} >{esp.lang("market/ads_content_input", "preview_adds")}</Text>
              </View>

              {/* preview ads */}
              <MarketAds_store_preview merchant={merchant} description={form.description} products={form.products} />

              <View style={styleId_1epgnA} >
                <Text allowFontScaling={false} style={styleId_cP8sW} >{esp.lang("market/ads_content_input", "display_product_merchant")}</Text>
              </View>
            </ScrollView>
          </LibKeyboard_avoid>
      }
    </View>
  )
}
const styleId_Z1nfYx6: any = { backgroundColor: 'white', flex: 1 }
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_Z2maV4Q: any = { marginHorizontal: 15, marginTop: 15 }
const styleId_Ze5ku0: any = { fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }
const styleId_Z1i5nTz: any = { flexDirection: 'row', marginTop: 8 }
const styleId_KcsXC: any = { fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }
const styleId_cP8sW: any = { fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0 }
const styleId_1l7Fkv: any = { alignContent: 'center', alignItems: 'center', justifyContent: 'center', marginTop: 15, marginHorizontal: 15, flexDirection: 'row', borderWidth: 2, borderColor: "#c5c5c5", borderStyle: "dashed", padding: 10, borderRadius: 1, height: 70 }
const styleId_GekIv: any = { color: '#c5c5c5', fontSize: 18, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0 }
const styleId_28MYQz: any = { marginTop: 15, marginHorizontal: 15 }
const styleId_1WAFLr: any = { marginTop: 10, marginHorizontal: 15 }
const styleId_1epgnA: any = { marginHorizontal: 15, marginTop: 8 }