// 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 { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInput } from 'esoftplay/cache/lib/input/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 { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketAds_cost_optionArgs } from 'esoftplay/cache/market/ads_cost_option/import';
import { MarketAds_homeProperty } from 'esoftplay/cache/market/ads_home/import';
import { MarketAds_periode_optionArgs } from 'esoftplay/cache/market/ads_periode_option/import';
import { MarketAds_store_preview } from 'esoftplay/cache/market/ads_store_preview/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 { MarketStyle } from 'esoftplay/cache/market/style/import';
import { MarketToggle } from 'esoftplay/cache/market/toggle/import';
import { UseForm } from 'esoftplay/cache/use/form/import';
import { UserClass } from 'esoftplay/cache/user/class/import';

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


export interface MarketAds_store_costArgs {

}
export interface MarketAds_store_costProps {

}
export default function m(props: MarketAds_store_costProps): any {
  const user = UserClass.state().useSelector(x => x)
  const [form, setForm, reForm, delForm] = UseForm<MarketAds_product_form>('market/ads_register')
  const [dailyOption, setDailyOption] = useSafeState<boolean>(false)
  const [merchant, setMerchant] = useSafeState<any>()
  const advertConfig = MarketAds_homeProperty.state().get()
  const previewAds = useRef<LibSlidingup>(null)

  useEffect(() => {
    new LibCurl('shop/merchant_detail/' + user?.merchant_id, null,
      (res) => { setMerchant(res) },
      (msg) => { }, 1
    )
  }, [])

  function createAds() {
    const product = form?.products?.map((item: any) => (
      {
        product_id: item?.id,
        active: 1
      }
    ))
    const keyword = form?.keywords?.map((item: any) => (
      {
        keyword_id: item?.id,
        active: 1,
        price_view: item?.price_total,
        price_view_each: 1000
      }
    ))

    const price: number = form?.keywords?.reduce((a, b) => ({ price_total: Number(a.price_total) + Number(b.price_total) })).price_total || 0

    let post = {
      type: 2,
      title: form?.title,
      price_limit: form?.price_limit || '',
      price_daily: form?.price_daily || '',
      products: JSON.stringify(product),
      keywords: JSON.stringify(keyword),
      start_date: form?.periode?.start_date || '',
      end_date: form?.periode?.end_date || '',
      price_view: form.price_view || '',
      price_view_each: form.price_view_each || 1000,
      description: form.description || ''
    }

    LibProgress.show(esp.lang("market/ads_store_cost", "wait_create"))
    new LibCurl('advert/ads', post,
      (res, msg) => {
        delForm()
        LibProgress.hide()
        LibDialog.info(esp.lang("market/ads_store_cost", "create_ok"), msg)
        LibNavigation.backToRoot()
        if (Number(user?.saldo_ads) > Number(price)) {
          LibNavigation.navigate('market/ads')
        } else {
          LibNavigation.navigate('market/ads_deposit_minus')
        }
      }, (msg) => {
        LibProgress.hide()
        LibDialog.warning(esp.lang("market/ads_store_cost", "create_failed"), msg?.message)
      }, 1
    )

  }

  function changePeriode() {
    LibNavigation.navigateForResult<MarketAds_periode_optionArgs>('market/ads_periode_option', { startDate: form?.periode?.start_date, endDate: form?.periode?.end_date }, 1044).then(setForm('periode'))
  }

  function changeCost() {
    LibNavigation.navigateForResult<MarketAds_cost_optionArgs>('market/ads_cost_option', { defValue: form?.price_limit || '' }, 1045).then(setForm('price_limit'))
  }

  let validPrice = Number(form?.price_view) >= Number(advertConfig?.ads_merchant?.price_view_min)

  return (
    <View style={styleId_Z2AMgN}>
      <MarketHeader title={esp.lang("market/ads_store_cost", "header_title")} style={styleId_Z2mwuu4} onlyBack rightView={() => (
        <View style={styleId_2nLyCQ}>
          <TouchableOpacity onPress={() => {

          }}>
            <LibIcon name="help-circle" color={"#c5c5c5"} />
          </TouchableOpacity>
        </View>
      )} />

      <LibKeyboard_avoid style={styleId_ZcMJmd}>
        <ScrollView>

          <View style={styleId_ac2Pw} >
            <Text allowFontScaling={false} style={styleId_Z10AQqI} >{esp.lang("market/ads_store_cost", "ads_cost")}</Text>
            <Text allowFontScaling={false} style={styleId_Z9OFYV} >{esp.lang("market/ads_store_cost", "ads_cost_msg")}</Text>
            <View style={[styleId_Z1FLjJn, { borderBottomColor: validPrice ? '#f1f1f1' : LibStyle.colorRed }]} >
              <Text allowFontScaling={false} style={styleId_Z1VxP4W} >{esp.lang("market/ads_store_cost", "prefix")}</Text>
              <LibInput
                base
                onChangeText={setForm('price_view')}
                defaultValue={String(form?.price_view) || ''}
                maskFrom="end"
                mask={'###.###.###.###.###'}
                keyboardType={'numeric'}
                placeholderTextColor={MarketStyle.colorPrimaryMarket}
                style={styleId_Z237861} />
              <Text allowFontScaling={false} style={styleId_1IjgdV} >{esp.lang("market/ads_store_cost", "per_view", form?.price_view_each || '1000')}</Text>
            </View>
            {
              validPrice &&
              <View style={styleId_1IDuOT} >
                <Text allowFontScaling={false} style={styleId_f1j5v} >{esp.lang("market/ads_store_cost", "recomendation")}</Text>
                <Text allowFontScaling={false} style={styleId_Z10M8g8} >{LibUtils.money(advertConfig?.ads_merchant?.price_view_suggest)}</Text>
              </View>
            }
            {
              !validPrice &&
              <View style={styleId_1IDuOT} >
                <Text allowFontScaling={false} style={styleId_1a6wep} >{esp.lang("market/ads_store_cost", "cost_min")}</Text>
                <Text allowFontScaling={false} style={styleId_1a6wep} >{LibUtils.money(advertConfig?.ads_merchant?.price_view_min)}</Text>
              </View>
            }
          </View>

          <View style={styleId_Z1mEUzj} >
            <View style={styleId_Z2boJRP}>
              <Text allowFontScaling={false} style={styleId_2szJz3} >{esp.lang("market/ads_store_cost", "ads_periode")}</Text>
              <TouchableOpacity onPress={() => { changePeriode() }} >
                <LibIcon name='pencil' color='#4a4a4a' />
              </TouchableOpacity>
            </View>
            <View style={styleId_Z27iQsf}>
              {
                form?.periode?.start_date ?
                  <Text allowFontScaling={false} style={styleId_Z1y3LM8} >{esp.lang("market/ads_store_cost", "date", form?.periode?.start_date, form?.periode?.end_date)}</Text>
                  :
                  <Text allowFontScaling={false} style={styleId_Z1y3LM8} >{esp.lang("market/ads_store_cost", "unlimited")}</Text>
              }
            </View>
          </View>

          <View style={styleId_Z1mEUzj} >
            <View style={styleId_Z2uqeP7}>
              <View style={styleId_ZcMJmd} >
                <Text allowFontScaling={false} style={styleId_1mDRxC} >{esp.lang("market/ads_store_cost", "cost_daily")}</Text>
                <Text allowFontScaling={false} style={styleId_Z2jfMeb} >{esp.lang("market/ads_store_cost", "cost_daily_msg")}</Text>
              </View>
              <MarketToggle onChangeValue={() => { setDailyOption(!dailyOption); setForm('price_daily')('') }} type='success' value={dailyOption} />
            </View>
            {
              dailyOption &&
              <MarketInput_square
                prefix={esp.lang("market/ads_store_cost", "daily_prefix")}
                suffix={esp.lang("market/ads_store_cost", "daily_suffix")}
                onChangeText={setForm('price_daily')}
                containerStyle={styleId_2tlMHb}
                style={styleId_Z9z4Qm}
              />
            }
          </View>

          <View style={styleId_Z1cCwDB} >
            <View style={styleId_Z2boJRP}>
              <Text allowFontScaling={false} style={styleId_2szJz3} >{esp.lang("market/ads_store_cost", "total_cost")}</Text>
              <TouchableOpacity onPress={() => { changeCost() }} >
                <LibIcon name='pencil' color='#4a4a4a' />
              </TouchableOpacity>
            </View>
            <View style={styleId_Z27iQsf}>
              {
                form?.price_limit ?
                  <Text allowFontScaling={false} style={styleId_Z1y3LM8} >{LibUtils.money(form?.price_limit)}</Text>
                  :
                  <Text allowFontScaling={false} style={styleId_Z1y3LM8} >{esp.lang("market/ads_store_cost", "unlimited_price")}</Text>
              }
            </View>
          </View>

        </ScrollView>


        <View style={styleId_ok1az} >
          <View style={styleId_L567G}>
            <MarketButton
              color={MarketStyle.colorPrimaryMarket}
              textStyle={{ color: MarketStyle.colorPrimaryMarket }}
              colorBackground={'white'}
              colorBorder={MarketStyle.colorPrimaryMarket}
              onPress={() => { previewAds?.current?.show() }}
              text={esp.lang("market/ads_store_cost", "ads_preview")}
              buttonStyle={styleId_ZWTVYs} />
          </View>
          <View style={styleId_L567G}>
            <MarketButton
              textStyle={styleId_Z1SArsq}
              onPress={() => { createAds() }}
              text={esp.lang("market/ads_store_cost", "btn_ads")}
              buttonStyle={styleId_HAz6T} />
          </View>
        </View>

      </LibKeyboard_avoid>
      <LibSlidingup ref={previewAds} >
        <View style={styleId_Z9k9z0} >
          <View style={styleId_Z2kJ2b8}>
            <TouchableOpacity onPress={() => { previewAds?.current?.hide() }} style={styleId_1hcIwd} >
              <LibIcon name='close' />
            </TouchableOpacity>
            <Text allowFontScaling={false} style={styleId_Ze5ku0} >{esp.lang("market/ads_store_cost", "text_preview")}</Text>
          </View>
          {
            !merchant ?
              <View style={{ height: 200 }}>
                <LibLoading />
              </View> :
              <MarketAds_store_preview description={form?.description} merchant={merchant} products={form?.products} />
          }
        </View>
      </LibSlidingup>
    </View>
  )
}
const styleId_Z2AMgN: any = { flex: 1, backgroundColor: '#f9f9f9' }
const styleId_Z2mwuu4: any = { backgroundColor: 'white' }
const styleId_2nLyCQ: any = { flexDirection: 'row', marginRight: 20 }
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_ac2Pw: any = { backgroundColor: 'white', paddingBottom: 15, paddingHorizontal: 15 }
const styleId_Z10AQqI: any = { fontFamily: 'Arial', marginTop: 15, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#4a4a4a' }
const styleId_Z9OFYV: any = { marginTop: 5, fontSize: 13, fontFamily: 'Arial', fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, lineHeight: 18, color: '#949494' }
const styleId_Z1FLjJn: any = { flexDirection: "row", alignItems: "center", borderBottomWidth: 1, paddingHorizontal: 10, marginTop: 10 }
const styleId_Z1VxP4W: any = { marginRight: 10, fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: MarketStyle.colorPrimaryMarket }
const styleId_Z237861: any = { flex: 1, paddingVertical: Platform.OS == 'ios' ? 10 : 4, fontFamily: 'Arial', fontSize: 24, fontWeight: 'bold', color: MarketStyle.colorPrimaryMarket }
const styleId_1IjgdV: any = { fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: '#949494' }
const styleId_1IDuOT: any = { flexDirection: 'row', alignItems: 'center', marginHorizontal: 5, marginTop: 10 }
const styleId_f1j5v: any = { fontSize: 12, fontStyle: "normal", letterSpacing: 0 }
const styleId_Z10M8g8: any = { fontSize: 12, fontStyle: "normal", letterSpacing: 0, fontWeight: 'bold' }
const styleId_1a6wep: any = { fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed }
const styleId_Z1mEUzj: any = { backgroundColor: 'white', marginTop: 10, paddingVertical: 15 }
const styleId_Z2boJRP: any = { flexDirection: 'row', alignItems: 'center', marginHorizontal: 15 }
const styleId_2szJz3: any = { flex: 1, fontSize: 14, fontFamily: 'Arial', fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#4a4a4a' }
const styleId_Z27iQsf: any = { marginHorizontal: 15 }
const styleId_Z1y3LM8: any = { marginTop: 10, fontSize: 14, fontFamily: 'Arial', fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, lineHeight: 18, color: MarketStyle.colorPrimaryMarket }
const styleId_Z2uqeP7: any = { marginHorizontal: 15, flexDirection: 'row', alignItems: 'baseline' }
const styleId_1mDRxC: any = { fontSize: 14, fontFamily: 'Arial', fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#4a4a4a' }
const styleId_Z2jfMeb: any = { marginTop: 10, fontSize: 13, fontFamily: 'Arial', fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, lineHeight: 18, color: '#949494' }
const styleId_2tlMHb: any = { marginTop: 10 }
const styleId_Z9z4Qm: any = { margin: 0 }
const styleId_Z1cCwDB: any = { backgroundColor: 'white', marginTop: 10, paddingVertical: 15, paddingBottom: 20 }
const styleId_ok1az: any = { flexDirection: "row", justifyContent: "space-between", backgroundColor: 'white', paddingVertical: 10 }
const styleId_L567G: any = { width: LibStyle.width * 0.5 - 5 }
const styleId_ZWTVYs: any = { marginLeft: 10, paddingHorizontal: 10 }
const styleId_Z1SArsq: any = { color: "white" }
const styleId_HAz6T: any = { marginRight: 10, paddingHorizontal: 10 }
const styleId_Z9k9z0: any = { backgroundColor: "white", borderTopLeftRadius: 15, borderTopRightRadius: 15 }
const styleId_Z2kJ2b8: any = { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 15, paddingVertical: 15, borderBottomWidth: 1, borderBottomColor: '#f5f5f5' }
const styleId_1hcIwd: any = { marginRight: 10 }
const styleId_Ze5ku0: any = { fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }