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

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_keywordArgs } from 'esoftplay/cache/market/ads_keyword/import';
import { MarketAds_product_form } from 'esoftplay/cache/market/ads_product_group/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 { MarketStyle } from 'esoftplay/cache/market/style/import';
import { UseForm } from 'esoftplay/cache/use/form/import';

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



export interface MarketAds_summaryArgs {

}
export interface MarketAds_summaryProps {

}

export default function m(props: MarketAds_summaryProps): any {

  const [form, setForm] = UseForm<MarketAds_product_form>('market/ads_register')
  let valid = form?.products?.length > 0 && form?.keywords?.length > 0

  function rangePrice(): any {
    let price = form?.keywords.map((item: any) => item.price)
    let min = 0
    let max = 0
    price.push(form.price)

    min = Math.min(...price)
    max = Math.max(...price)

    return LibUtils.money(min) + '-' + LibUtils.money(max)
  }



  return (
    <View style={styleId_qpkod}>
      <MarketHeader title={esp.lang("market/ads_summary", "header_title")} onlyBack />

      <ScrollView>
        <View style={styleId_dt7dA}>
          {/* jenis iklan */}
          <Text allowFontScaling={false} style={styleId_g3yJj} >{esp.lang("market/ads_summary", "ads_type")}</Text>
          <Text allowFontScaling={false} style={styleId_1pVwoH} >{esp.lang("market/ads_summary", "ads_product")}</Text>

          {/* produk yang dipilih */}
          <View style={styleId_Z2ghq4}>
            <Text allowFontScaling={false} style={styleId_g3yJj} >{esp.lang("market/ads_summary", "selected_product", String(form?.products?.length))}</Text>
            <TouchableOpacity onPress={() => {
              LibNavigation.setRedirect(() => LibNavigation.back())
              LibNavigation.push<MarketAds_product_listArgs>('market/ads_product_list', { from: 'market/ads_summary' })
            }} >
              <Text allowFontScaling={false} style={styleId_27PMVY} >{esp.lang("market/ads_summary", "text_change")}</Text>
            </TouchableOpacity>
          </View>
          <View style={{ /* marginVertical: 10, flexDirection: 'row', flexWrap: 'wrap' */ }}>
            {
              LibUtils.checkUndefined(form, 'products.0') && form.products.map((item, i) => {
                return (
                  <MarketAds_product_preview key={i} {...item} onDelete={() => {
                    const del = LibObject.splice(form.products, i, 1)()
                    setForm('products')(del)
                  }} />
                )
              })
            }
          </View>

          {/* kata kunci dipilih */}
          <View style={styleId_Z26usNo}>
            <Text allowFontScaling={false} style={styleId_g3yJj} >{esp.lang("market/ads_summary", "selected_keyword", 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(',') })
            }} >
              <Text allowFontScaling={false} style={styleId_27PMVY} >{esp.lang("market/ads_summary", "keyword_change")}</Text>
            </TouchableOpacity>
          </View>
          {
            LibUtils.checkUndefined(form, 'keywords.0') && form.keywords.map((item, i) => {
              return (
                <Text key={i} allowFontScaling={false} style={styleId_ZLQDnG} >{item?.keyword}</Text>
              )
            })
          }

          {/* total biaya */}
          <View style={styleId_Z2ghq4}>
            <Text allowFontScaling={false} style={styleId_g3yJj} >{esp.lang("market/ads_summary", "cost_and_periode")}</Text>
            <TouchableOpacity>
              <Text allowFontScaling={false} style={styleId_27PMVY} >{esp.lang("market/ads_summary", "change_cost")}</Text>
            </TouchableOpacity>
          </View>

          <View style={styleId_25N7sG}>
            <Text allowFontScaling={false} style={styleId_Z12My33} >{esp.lang("market/ads_summary", "cost_click")}</Text>
            <Text allowFontScaling={false} style={styleId_g3yJj} >{rangePrice()}</Text>
          </View>

          <View style={styleId_25N7sG}>
            <Text allowFontScaling={false} style={styleId_Z12My33} >{esp.lang("market/ads_summary", "cost_daily")}</Text>
            <Text allowFontScaling={false} style={styleId_g3yJj} >{form?.price_daily ? LibUtils.money(form?.price_daily) : esp.lang("market/ads_summary", "daily_unlimited")}</Text>
          </View>

          <View style={styleId_25N7sG}>
            <Text allowFontScaling={false} style={styleId_Z12My33} >{esp.lang("market/ads_summary", "cost_ads")}</Text>
            {
              form?.price_limit ?
                <Text allowFontScaling={false} style={styleId_g3yJj} >{LibUtils.money(form?.price_limit)}</Text>
                :
                <Text allowFontScaling={false} style={styleId_g3yJj} >{esp.lang("market/ads_summary", "cost_ads_unlimited")}</Text>
            }
          </View>

          <View style={styleId_ZWPzzl}>
            <Text allowFontScaling={false} style={styleId_Z12My33} >{esp.lang("market/ads_summary", "ads_periode")}</Text>
            {
              form?.periode ?
                <Text allowFontScaling={false} style={styleId_g3yJj} >{form?.periode?.start_date + ' sd ' + form?.periode?.end_date}</Text>
                :
                <Text allowFontScaling={false} style={styleId_g3yJj} >{esp.lang("market/ads_summary", "ads_periode_unlimited")}</Text>
            }
          </View>

        </View>
      </ScrollView>
      <View pointerEvents={valid ? 'auto' : 'none'}>
        <MarketButton
          colorBackground={valid ? undefined : '#aaa'}
          onPress={() => {
            // createAds()
          }}
          text={esp.lang("market/ads_summary", "btn_next")}
          buttonStyle={styleId_Z16g7MB} />
      </View>
    </View>
  )
}
const styleId_qpkod: any = { flex: 1, backgroundColor: '#fff' }
const styleId_dt7dA: any = { margin: 15 }
const styleId_g3yJj: any = { fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }
const styleId_1pVwoH: any = { marginTop: 8, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: '#000' }
const styleId_Z2ghq4: any = { marginTop: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }
const styleId_27PMVY: any = { fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: MarketStyle.colorPrimaryMarket }
const styleId_Z26usNo: any = { marginBottom: 5, marginTop: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }
const styleId_ZLQDnG: any = { marginTop: 5, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: '#000' }
const styleId_25N7sG: any = { marginTop: 10, flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between' }
const styleId_Z12My33: any = { fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: '#000' }
const styleId_ZWPzzl: any = { marginTop: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }
const styleId_Z16g7MB: any = { marginVertical: 10, marginHorizontal: 15 }