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


import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTabs } from 'esoftplay/cache/lib/tabs/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { MarketAds_home, MarketAds_homeProperty } from 'esoftplay/cache/market/ads_home/import';
import { MarketAds_product } from 'esoftplay/cache/market/ads_product/import';
import { MarketAds_store } from 'esoftplay/cache/market/ads_store/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, { useEffect, useRef } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { MarketAds_product_form } from './ads_product_group';


export interface MarketAdsArgs {

}
export interface MarketAdsProps {

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

  const [tab, setTab] = useSafeState<any>(0)
  const tabs = useRef<LibTabs>(null)
  const TView = [MarketAds_home, MarketAds_product, MarketAds_store]
  let _tabs = [
    {
      id: 1,
      title: esp.lang("market/ads", "home")
    },
    {
      id: 2,
      title: esp.lang("market/ads", "ads_prouct")
    },
    {
      id: 3,
      title: esp.lang("market/ads", "ads_merchant")
    },
  ]

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

  return (
    <View style={styleId_qpkod}>
      <MarketHeader title={esp.lang("market/ads", "header_title")} onlyBack rightView={() => (
        <TouchableOpacity onPress={() => {
          MarketAds_homeProperty.createNewAds()
        }} style={styleId_ZnTxdz} >
          <LibTextstyle textStyle="callout" text={esp.lang("market/ads", "create_ads")} style={styleId_ZwGcPJ} />
        </TouchableOpacity>
      )} />
      <View style={styleId_8tdt6} >
        {
          _tabs && _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_ZXn4fQ, { width: LibStyle.width / _tabs.length, fontFamily: "Arial", fontSize: tab == i ? 13 : 12, color: tab == i ? MarketStyle.colorPrimaryMarket : "#c5c5c5", fontWeight: tab == i ? "bold" : "normal", }]}>{item.title}</Text>
                  <View style={[styleId_1d3PQt, { width: (LibStyle.width / _tabs.length) - 20, backgroundColor: tab == i ? MarketStyle.colorPrimaryMarket : "#fff" }]} />
                </View>
              </TouchableOpacity>
            )
          })
        }
      </View>
      <LibTabs
        ref={tabs}
        tabIndex={tab}
        swipeEnabled={false}
        tabViews={TView} />
    </View>
  )
}
const styleId_qpkod: any = { flex: 1, backgroundColor: '#fff' }
const styleId_ZnTxdz: any = { height: 50, justifyContent: 'center', paddingRight: 17 }
const styleId_ZwGcPJ: any = { color: MarketStyle.colorPrimaryMarket }
const styleId_8tdt6: any = { height: 38, 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_ZXn4fQ: any = { fontStyle: "normal", letterSpacing: 0, textAlign: "center" }
const styleId_1d3PQt: any = { height: 3, position: 'absolute', bottom: 0 }