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

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInput } from 'esoftplay/cache/lib/input/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 { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketSlidingupProperty } from 'esoftplay/cache/market/slidingup/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketAds_cost_keyword_itemArgs {

}
export interface MarketAds_cost_keyword_itemProps {
  id: string
  keyword: string
  hits: string
  used: string
  used_active: string
  competition: string
  price: string,
  onChangePrice: (price: string) => void,
  onDelete: () => void,
  price_min: string,
  price_suggest: string,
}
export default function m(props: MarketAds_cost_keyword_itemProps): any {
  let price = useRef<string>(props?.price || '').current

  function checkSubmit() {
    const valid = Number(price) >= Number(props?.price_min)
    if (valid && price != '') {
      props.onChangePrice(price)
      MarketSlidingupProperty.hide()
    } else {
      LibToastProperty.show(esp.lang("market/ads_cost_keyword_item", "cost_minimum", LibUtils.money(props?.price_min)))
    }
  }

  return (
    <View style={styleId_Z2umjFc} >
      <Text allowFontScaling={false} style={styleId_Za9CgC} >{props?.keyword}</Text>
      {
        props.competition && props.hits &&
        <View style={styleId_Zrz44M}>
          <Text allowFontScaling={false} style={styleId_ZF0nsj} >{esp.lang("market/ads_cost_keyword_item", "text_competition")}</Text>
          <Text allowFontScaling={false} style={styleId_ZF0nsj} >{props?.competition}</Text>
          <Text allowFontScaling={false} style={styleId_Za9CgC} >{' • '}</Text>
          <Text allowFontScaling={false} style={styleId_ZF0nsj} >{esp.lang("market/ads_cost_keyword_item", "text_search")}</Text>
          <Text allowFontScaling={false} style={styleId_Za9CgC} >{props?.hits} kali</Text>
        </View>
      }
      <View style={styleId_1exs4N} >
        <TouchableOpacity onPress={() => {
          MarketSlidingupProperty.add(
            <View style={styleId_Z19p0XW} >
              <View style={styleId_Z1a59jN} >
                <TouchableOpacity onPress={() => MarketSlidingupProperty.hide()} style={styleId_1hcIwd} >
                  <LibIcon name="close" size={26} />
                </TouchableOpacity>
                <Text allowFontScaling={false} style={styleId_Z26yQmp}>{props?.keyword}</Text>
              </View>
              <Text allowFontScaling={false} style={styleId_Z26yQmp}>{esp.lang("market/ads_cost_keyword_item", "cost_keyword")}</Text>
              <View style={styleId_KErCQ} >
                <Text allowFontScaling={false} style={styleId_Z1CY4st} >{esp.lang("market/ads_cost_keyword_item", "text_rp")}</Text>
                <LibInput
                  base
                  onChangeText={(t) => { price = t }}
                  onSubmitEditing={() => {
                  }}
                  defaultValue={String(props?.price) || ''}
                  maskFrom="end"
                  mask={'###.###.###.###.###'}
                  keyboardType={'numeric'}
                  style={styleId_2rKsIp} />
              </View>
              <View style={styleId_1fmvBo} >
                <Text allowFontScaling={false} style={styleId_f1j5v} >{esp.lang("market/ads_cost_keyword_item", "text_suggest")}</Text>
                <Text allowFontScaling={false} style={styleId_Z10M8g8} >{LibUtils.money(props?.price_suggest)}</Text>
              </View>
              <MarketButton text={esp.lang("market/ads_cost_keyword_item", "btn_save")} buttonStyle={styleId_ZBEBtQ} onPress={() => {
                checkSubmit()
              }} />
            </View>
          )
          MarketSlidingupProperty.show()
        }} style={styleId_1fmvBo} >
          <Text allowFontScaling={false} style={styleId_2q3Hon} >{LibUtils.money(props?.price)}</Text>
          <LibIcon name="pencil" color='#4a4a4a' style={styleId_Zkxxg6} />
        </TouchableOpacity>
        <View style={{ flex: 1 }} />
        <TouchableOpacity onPress={() => { props.onDelete() }} style={styleId_1fmvBo} >
          <LibIcon name="trash-can-outline" color='#4a4a4a' />
        </TouchableOpacity>
      </View>
    </View>
  )
}
const styleId_Z2umjFc: any = { marginHorizontal: 15, marginTop: 10, marginBottom: 5, backgroundColor: 'white', padding: 15, borderRadius: 5, ...LibStyle.elevation(2) }
const styleId_Za9CgC: any = { fontSize: 14, fontWeight: 'bold', fontFamily: 'Arial', fontStyle: "normal", letterSpacing: 0 }
const styleId_Zrz44M: any = { flexDirection: 'row', alignItems: 'center', marginTop: 5 }
const styleId_ZF0nsj: any = { fontSize: 14, fontFamily: 'Arial', fontStyle: "normal", letterSpacing: 0 }
const styleId_1exs4N: any = { flexDirection: 'row', alignItems: 'center', marginTop: 15 }
const styleId_Z19p0XW: any = { backgroundColor: "white", paddingHorizontal: 17, borderTopLeftRadius: 15, borderTopRightRadius: 15 }
const styleId_Z1a59jN: any = { flexDirection: "row", alignItems: "center", marginVertical: 10 }
const styleId_1hcIwd: any = { marginRight: 10 }
const styleId_Z26yQmp: any = { fontWeight: 'bold', fontSize: 16 }
const styleId_KErCQ: any = { flexDirection: "row", alignItems: "center", borderBottomWidth: 1, borderBottomColor: '#f1f1f1', marginVertical: 10 }
const styleId_Z1CY4st: any = { marginRight: 10, fontSize: 14, fontStyle: "normal", letterSpacing: 0 }
const styleId_2rKsIp: any = { flex: 1, paddingVertical: Platform.OS == 'ios' ? 10 : 4, fontFamily: 'Arial', fontSize: 18, fontWeight: 'bold' }
const styleId_1fmvBo: any = { flexDirection: 'row', alignItems: 'center' }
const styleId_f1j5v: any = { fontSize: 12, fontStyle: "normal", letterSpacing: 0 }
const styleId_Z10M8g8: any = { fontSize: 12, fontStyle: "normal", letterSpacing: 0, fontWeight: 'bold' }
const styleId_ZBEBtQ: any = { marginVertical: 10 }
const styleId_2q3Hon: any = { fontSize: 14, fontFamily: 'Arial', fontStyle: "normal", fontWeight: 'bold', letterSpacing: 0, color: MarketStyle.colorPrimaryMarket }
const styleId_Zkxxg6: any = { marginLeft: 10 }