// withHooks

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 { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketAds_chart } from 'esoftplay/cache/market/ads_chart/import';
import { MarketAds_grup_detail_keyword } from 'esoftplay/cache/market/ads_grup_detail_keyword/import';
import { MarketAds_grup_detail_product } from 'esoftplay/cache/market/ads_grup_detail_product/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { MarketToggle } from 'esoftplay/cache/market/toggle/import';
import esp from 'esoftplay/esp';

import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';
import React, { useEffect } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

moment().locale('id')


export interface MarketAds_grup_detailArgs {
  url: string
}
export interface MarketAds_grup_detailProps {

}
export default function m(props: MarketAds_grup_detailProps): any {
  const { url } = LibNavigation.getArgsAll<any>(props)
  const [data, setData] = useSafeState<any>()

  const [tab, setTab] = useSafeState<any>(0)
  const TView = [MarketAds_grup_detail_product, MarketAds_grup_detail_keyword][tab]

  let _tabs = [
    {
      id: 1,
      title: esp.lang("market/ads_grup_detail", "text_product")
    },
    {
      id: 2,
      title: esp.lang("market/ads_grup_detail", "text_keyword")
    }
  ]

  useEffect(() => {
    getData()
  }, [])

  function getData() {
    new LibCurl(url, null,
      (res, msg) => {
        setData(res)
      }, (msg) => {
        LibDialog.warning(esp.lang("market/ads_grup_detail", "get_data_failed"), msg?.message)
      }, 1
    )
  }


  function changeActiveGroup(ads_id: string) {
    let post = {
      active: data?.active == 1 ? 0 : 1
    }
    new LibCurl('advert/ads_list_edit/' + ads_id, post,
      (res, msg) => {
        setData((x: any) => LibObject.set(x, data?.active == 1 ? 0 : 1)('active'))
      }, (msg) => {
        LibToastProperty.show(msg?.message)
      }, 1
    )
  }

  if (!data) {
    return <LibLoading />
  }

  return (
    <View style={styleId_ZcMJmd}>
      <MarketHeader onlyBack title={data?.type == 2 ? esp.lang("market/ads_grup_detail", "detail_ads") : esp.lang("market/ads_grup_detail", "detail_group")} rightView={() => (
        <TouchableOpacity onPress={() => {
          data.type == 1 ?
            LibNavigation.navigate('market/ads_grup_edit', { url: url })
            :
            LibNavigation.navigate('market/ads_store_edit', { url: url })
        }} style={styleId_ZnTxdz} >
          <LibIcon name='pencil' />
        </TouchableOpacity>
      )} />

      {
        !data ? <LibLoading /> :

          <LibScroll onRefresh={getData} stickyHeaderIndices={[2]} >
            <View style={styleId_Z1rSBPc} >
              <View style={styleId_1xGNz2} >
                <Text allowFontScaling={false} style={styleId_Z1sdbVL} >{data?.title}</Text>
                <MarketToggle onChangeValue={() => { changeActiveGroup(data?.id) }} type='success' value={data?.active == 1} />
              </View>
              <View style={styleId_tpeK8}>
                <View style={styleId_ZcMtls} >
                  <View>
                    <Text allowFontScaling={false} style={styleId_2wXmgE} >Biaya Pencarian</Text>
                    <View style={styleId_1wlhQH} >
                      <Text allowFontScaling={false} style={styleId_NOtmt} >{data?.type == 1 ? LibUtils.money(data?.price) : LibUtils.money(data?.price_view)}</Text>
                      {
                        data?.type == 1 ?
                          <Text allowFontScaling={false} style={styleId_2wXmgE} >{esp.lang("market/ads_grup_detail", "per_click")}</Text>
                          :
                          <Text allowFontScaling={false} style={styleId_2uIGQe} >{esp.lang("market/ads_grup_detail", "perview", LibUtils.number(data?.price_view_each))}</Text>
                      }
                    </View>
                  </View>

                  <View style={styleId_2tmrJ4} >
                    <Text allowFontScaling={false} style={styleId_2wXmgE} >{esp.lang("market/ads_grup_detail", "view_periode")}</Text>
                    <View style={styleId_Zp7Rhg} >
                      {
                        data?.start_date != '0000-00-00' ?
                          <Text allowFontScaling={false} style={styleId_Z1A3Kza} >{moment(data?.start_date).localeFormat('DD MMM YYYY') + ' sd ' + moment(data?.end_date).localeFormat('DD MMM YYYY')}</Text>
                          :
                          <Text allowFontScaling={false} style={styleId_NOtmt} >{esp.lang("market/ads_grup_detail", "unlimited")}</Text>
                      }
                    </View>
                  </View>

                </View>
                <View style={styleId_ZcMBlP} >
                  <View>
                    <Text allowFontScaling={false} style={styleId_2wXmgE} >{esp.lang("market/ads_grup_detail", "daily_cost")}</Text>
                    <Text allowFontScaling={false} style={styleId_Z1B5Me0} >{data?.price_daily != 0 ? LibUtils.money(data?.price_daily) : esp.lang("market/ads_grup_detail", "daily_unlimited")}</Text>
                  </View>
                  <View style={styleId_2tmrJ4} >
                    <Text allowFontScaling={false} style={styleId_2wXmgE} >{esp.lang("market/ads_grup_detail", "total_cost")}</Text>
                    <Text allowFontScaling={false} style={styleId_Z1B5Me0} >{data?.price_limit != 0 ? LibUtils.money(data?.price_limit) : esp.lang("market/ads_grup_detail", "total_unlimited")}</Text>
                  </View>
                </View>
              </View>

            </View>

            <View style={styleId_Z1NNut9} >
              <MarketAds_chart advert_type={data?.type} advert_id={data?.id} />
            </View>

            <View style={styleId_Z1yoBLj} >
              {
                data && data?.type == 1 ? _tabs.map((item: any, i: number) => {
                  return (
                    <TouchableOpacity key={i} onPress={() => {
                      setTab(i)
                    }}>
                      <View style={[styleId_Z2bngyw, { width: LibStyle.width / _tabs.length }]}>
                        <Text allowFontScaling={false} style={[styleId_10yTWr, { width: LibStyle.width / _tabs.length, fontSize: tab == i ? 14 : 13, fontWeight: tab == i ? "bold" : "normal", color: tab == i ? MarketStyle.colorPrimaryMarket : "#c5c5c5" }]}>{item?.title}</Text>
                        <View style={[styleId_1d3PQt, { width: (LibStyle.width / _tabs.length) - 20, backgroundColor: tab == i ? MarketStyle.colorPrimaryMarket : "#fff" }]} />
                      </View>
                    </TouchableOpacity>
                  )
                })
                  :
                  <TouchableOpacity onPress={() => { }}>
                    <View style={[styleId_Z2bngyw, { width: LibStyle.width / _tabs.length }]}>
                      <Text allowFontScaling={false} style={[styleId_ZOPTIc, { width: LibStyle.width / _tabs.length, }]}>{esp.lang("market/ads_grup_detail", "keyword")}</Text>
                      <View style={[styleId_2tNRHT, { width: (LibStyle.width / _tabs.length) - 20 }]} />
                    </View>
                  </TouchableOpacity>

              }
            </View>

            {
              data && data.type == 1 ?
                <TView data={tab == 0 ? data.item : data.keyword} ads_id={data.id} url={url} ads_type={data.type} />
                :
                <MarketAds_grup_detail_keyword ads_id={data.id} data={data.keyword} url={url} ads_type={data.type} />
            }

          </LibScroll>

      }
    </View>
  )
}
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_ZnTxdz: any = { height: 50, justifyContent: 'center', paddingRight: 17 }
const styleId_Z1rSBPc: any = { margin: 15, marginBottom: 5, padding: 10, paddingHorizontal: 15, justifyContent: 'space-between', borderRadius: 5, backgroundColor: "#fff", ...LibStyle.elevation(2) }
const styleId_1xGNz2: any = { flexDirection: 'row', alignItems: 'center', borderBottomWidth: 2, borderBottomColor: '#f5f5f5', paddingBottom: 5 }
const styleId_Z1sdbVL: any = { flex: 1, fontFamily: 'Arial', fontSize: 14, fontWeight: 'normal' }
const styleId_tpeK8: any = { flexDirection: 'row', marginTop: 10 }
const styleId_ZcMtls: any = { flex: 3 }
const styleId_2wXmgE: any = { fontFamily: 'Arial', fontSize: 12, fontWeight: 'normal' }
const styleId_1wlhQH: any = { marginTop: 5, flexDirection: 'row', alignItems: 'center' }
const styleId_NOtmt: any = { fontFamily: 'Arial', fontSize: 14, fontWeight: 'bold' }
const styleId_2uIGQe: any = { fontFamily: 'Arial', fontSize: 11, fontWeight: 'normal' }
const styleId_2tmrJ4: any = { marginTop: 15 }
const styleId_Zp7Rhg: any = { marginTop: 5 }
const styleId_Z1A3Kza: any = { fontFamily: 'Arial', fontSize: 12, fontWeight: 'bold', lineHeight: 18 }
const styleId_ZcMBlP: any = { flex: 2 }
const styleId_Z1B5Me0: any = { fontFamily: 'Arial', fontSize: 14, fontWeight: 'bold', marginTop: 5 }
const styleId_Z1NNut9: any = { margin: 15, marginTop: 10, padding: 10, justifyContent: 'space-between', borderRadius: 5, backgroundColor: "#fff", ...LibStyle.elevation(2) }
const styleId_Z1yoBLj: any = { height: 40, marginBottom: 2, flexDirection: 'row', backgroundColor: '#fff', ...LibStyle.elevation(2) }
const styleId_Z2bngyw: any = { height: 38, alignItems: 'center', overflow: 'visible', justifyContent: 'center', backgroundColor: '#fff' }
const styleId_10yTWr: any = { fontFamily: "Arial", fontStyle: "normal", letterSpacing: 0, textAlign: "center" }
const styleId_1d3PQt: any = { height: 3, position: 'absolute', bottom: 0 }
const styleId_ZOPTIc: any = { fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: MarketStyle.colorPrimaryMarket }
const styleId_2tNRHT: any = { height: 3, backgroundColor: MarketStyle.colorPrimaryMarket, position: 'absolute', bottom: 0 }