// 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 { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketAds_cost_keyword_item } from 'esoftplay/cache/market/ads_cost_keyword_item/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_keywordArgs } from 'esoftplay/cache/market/ads_keyword/import';
import { MarketAds_periode_optionArgs } from 'esoftplay/cache/market/ads_periode_option/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 { 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 from 'react';
import { Platform, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { MarketAds_product_form } from './ads_product_group';


export interface MarketAds_cost_keywordArgs {
  data: any
}
export interface MarketAds_cost_keywordProps {

}
export default function m(props: MarketAds_cost_keywordProps): any {
  const { data } = LibNavigation.getArgsAll<MarketAds_cost_keywordArgs>(props)
  const user = UserClass.state().useSelector(p => p)
  const [dailyOption, setDailyOption, getDailyOption] = useSafeState<boolean>(false)
  const advertConfig = MarketAds_homeProperty.state().get()
  const [form, setForm, reForm, delForm] = UseForm<MarketAds_product_form>('market/ads_register')

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

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

  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: item?.price
      }
    ))

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

    let post = {
      type: 1,
      title: form?.title,
      price: form?.price,
      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 || '',
    }
    LibProgress.show(esp.lang("market/ads_cost_keyword", "waiting_create_ads"))
    new LibCurl('advert/ads', post,
      (res, msg) => {
        delForm()
        LibProgress.hide()
        LibDialog.info(esp.lang("market/ads_cost_keyword", "create_ads_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_cost_keyword", "create_ads_failed"), msg?.message)
      }, 1
    )
  }

  function renderKeywordItems(item: any, i: number) {
    return (
      <MarketAds_cost_keyword_item
        key={i}
        {...item}
        price_min={advertConfig?.ads_product?.price_min}
        price_suggest={advertConfig?.ads_product?.price_suggest}
        onChangePrice={(p) => {
          const ch = LibObject.set(form?.keywords, p)(i, 'price')
          setForm('keywords')(ch)
        }}
        onDelete={() => {
          const del = LibObject.splice(form?.keywords, i, 1)()
          setForm('keywords')(del)
        }}
      />
    )
  }

  function renderProductItems(item: any, i: number) {
    return (
      <MarketAds_product_preview key={i} {...item} onDelete={() => {
        const del = LibObject.splice(form.products, i, 1)()
        setForm('products')(del)
      }} />
    )
  }

  let validPrice = Number(form?.price) >= Number(advertConfig?.ads_product?.price_min)
  let valid = form?.price > '0' && validPrice && form?.keywords?.length > 0 && form?.products?.length > 0 && (dailyOption ? (form?.price_daily != '' ? true : false) : true)

  return (
    <View style={styleId_Z2AMgN}>
      <MarketHeader title={esp.lang("market/ads_cost_keyword", "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_iKvd6} >
            <Text allowFontScaling={false} style={styleId_2nkSWt} >{esp.lang("market/ads_cost_keyword", "base_price")}</Text>
            <View style={[styleId_1JEwIS, { borderBottomColor: validPrice ? '#f1f1f1' : LibStyle.colorRed }]} >
              <Text allowFontScaling={false} style={styleId_Z1VxP4W} >{esp.lang("market/ads_cost_keyword", "prefix")}</Text>
              <LibInput
                base
                onChangeText={setForm('price')}
                defaultValue={String(form?.price) || ''}
                maskFrom="end"
                mask={'###.###.###.###.###'}
                keyboardType={'numeric'}
                placeholderTextColor={MarketStyle.colorPrimaryMarket}
                style={styleId_Z237861} />
            </View>
            {
              validPrice &&
              <View style={styleId_1RwedJ} >
                <Text allowFontScaling={false} style={styleId_f1j5v} >{esp.lang("market/ads_cost_keyword", "recomendation")}</Text>
                <Text allowFontScaling={false} style={styleId_Z10M8g8} >{LibUtils.money(advertConfig?.ads_product?.price_suggest)}</Text>
              </View>
            }
            {
              !validPrice &&
              <View style={styleId_1RwedJ} >
                <Text allowFontScaling={false} style={styleId_1a6wep} >{esp.lang("market/ads_cost_keyword", "minimum_price")}</Text>
                <Text allowFontScaling={false} style={styleId_1a6wep} >{LibUtils.money(advertConfig?.ads_product?.price_min)}</Text>
              </View>
            }
          </View>

          <View style={styleId_ZnsRTT}>
            <Text allowFontScaling={false} style={styleId_Z2twfgW} >{esp.lang("market/ads_cost_keyword", "keyword_price")}</Text>
            <View style={styleId_1RPbeD}>
              <Text allowFontScaling={false} style={styleId_ZKUaRU} >{esp.lang("market/ads_cost_keyword", "keyword_length", String(form?.keywords?.length))}</Text>
              <TouchableOpacity onPress={() => {
                LibNavigation.setRedirect(() => { LibNavigation.back() })
                LibNavigation.push<MarketAds_keywordArgs>('market/ads_keyword', { from: 'market/ads_summary', cat_ids: form?.products?.map((x: any) => x.cat_id).join(',') })
              }} >
                <LibIcon name='plus-circle-outline' color='#4a4a4a' />
              </TouchableOpacity>
            </View>
            {LibUtils.checkUndefined(form, 'keywords.0') && form?.keywords?.map(renderKeywordItems)}
          </View>

          <View style={styleId_ZnsRTT}>
            <Text allowFontScaling={false} style={styleId_Z2twfgW} >{esp.lang("market/ads_cost_keyword", "text_product")}</Text>
            <View style={styleId_1RPbeD}>
              <Text allowFontScaling={false} style={styleId_ZKUaRU} >{esp.lang("market/ads_cost_keyword", "product_length", String(form?.products?.length))}</Text>
              <TouchableOpacity onPress={() => {
                LibNavigation.setRedirect(() => LibNavigation.back())
                LibNavigation.push<MarketAds_product_listArgs>('market/ads_product_list', { from: 'market/ads_summary' })
              }} >
                <LibIcon name='plus-circle-outline' color='#4a4a4a' />
              </TouchableOpacity>
            </View>
            {LibUtils.checkUndefined(form, 'products.0') && form.products.map(renderProductItems)}
          </View>

          <View style={styleId_Z1mEUzj} >
            <View style={styleId_Z2boJRP}>
              <Text allowFontScaling={false} style={styleId_2szJz3} >{esp.lang("market/ads_cost_keyword", "view_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_cost_keyword", "periode_start_end", form?.periode?.start_date, form?.periode?.end_date)}</Text>
                  :
                  <Text allowFontScaling={false} style={styleId_Z1y3LM8} >{esp.lang("market/ads_cost_keyword", "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_cost_keyword", "daily_cost")}</Text>
                <Text allowFontScaling={false} style={styleId_Z2jfMeb} >{esp.lang("market/ads_cost_keyword", "daily_cost_info")}</Text>
              </View>
              <MarketToggle onChangeValue={() => { setDailyOption(!getDailyOption); setForm('price_daily')('') }} type='success' value={dailyOption} />
            </View>
            {
              dailyOption &&
              <MarketInput_square
                prefix={esp.lang("market/ads_cost_keyword", "prefix_daily")}
                suffix={esp.lang("market/ads_cost_keyword", "suffix_daily")}
                onChangeText={setForm('price_daily')}
                containerStyle={styleId_2tlMHb}
                style={{ margin: 0, }}
              />
            }
          </View>

          <View style={styleId_Z1mEUzj} >
            <View style={styleId_Z2boJRP}>
              <Text allowFontScaling={false} style={styleId_2szJz3} >{esp.lang("market/ads_cost_keyword", "allocation_total")}</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_cost_keyword", "unlimited_allocation")}</Text>
              }
            </View>
          </View>

          <View pointerEvents={valid ? 'auto' : 'none'} style={styleId_Z2aL6Dd}>
            <MarketButton
              colorBackground={valid ? undefined : '#aaa'}
              text={esp.lang("market/ads_cost_keyword", "btn_save")}
              onPress={() => {
                LibDialog.warningConfirm(esp.lang("market/ads_cost_keyword", "create_ads_title"), esp.lang("market/ads_cost_keyword", "create_ads_msg"), esp.lang("market/ads_cost_keyword", "create_ads_confirm"), () => {
                  createAds()
                }, esp.lang("market/ads_cost_keyword", "create_ads_cancel"), () => { })
              }}
            />
          </View>

        </ScrollView>

      </LibKeyboard_avoid>
    </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_iKvd6: any = { backgroundColor: 'white', paddingBottom: 15 }
const styleId_2nkSWt: any = { fontFamily: 'Arial', marginLeft: 15, marginTop: 15, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#4a4a4a' }
const styleId_1JEwIS: any = { flexDirection: "row", alignItems: "center", borderBottomWidth: 1, paddingHorizontal: 10, marginHorizontal: 15, 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_1RwedJ: any = { flexDirection: 'row', alignItems: 'center', marginHorizontal: 15, 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_ZnsRTT: any = { backgroundColor: 'white', marginTop: 10, paddingBottom: 15 }
const styleId_Z2twfgW: any = { marginLeft: 15, marginTop: 15, fontSize: 14, fontFamily: 'Arial', fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#4a4a4a' }
const styleId_1RPbeD: any = { marginHorizontal: 15, flexDirection: 'row', alignItems: 'center', marginTop: 15 }
const styleId_ZKUaRU: any = { flex: 1, fontSize: 14, fontFamily: 'Arial', fontStyle: "normal", letterSpacing: 0 }
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_Z2aL6Dd: any = { padding: 15, backgroundColor: 'white', marginTop: 10 }