// withHooks
// noPage
import { applyStyle } from 'esoftplay';
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 { LibTextstyle } from 'esoftplay/cache/lib/textstyle/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_store_keyword_itemArgs {

}
export interface MarketAds_store_keyword_itemProps {
  id: string,
  keyword: string,
  hits: string,
  used: string,
  used_active: string,
  competition: string,
  price_suggest: string,
  list_id: string,
  keyword_id: string,
  keyword_title: string,
  price: string,
  price_total: string,
  price_view: string,
  selected: boolean,
  onSelect?: () => void
  onDelete?: () => void
  onChangePrice: (price: string) => void,
  style?: any
  price_view_each: string,
  price_view_min: string
  price_view_suggest: string,
}
export default function m(props: MarketAds_store_keyword_itemProps): any {
  let price = useRef<string>(props?.price_total || props?.price_view || '').current

  function checkSubmit() {
    const valid = Number(price) >= Number(props?.price_view_min)

    if (valid && price != '') {
      props.onChangePrice(price)
      MarketSlidingupProperty.hide()
    } else {
      LibToastProperty.show(esp.lang("market/ads_store_keyword_item", "minimum_cost", LibUtils.money(props?.price_view_min)))
    }
  }

  return (
    <View style={applyStyle({ marginTop: 2, marginHorizontal: 15, marginBottom: 10, padding: 15, borderRadius: 10, backgroundColor: 'white', ...LibStyle.elevation(2), ...props.style })}>
      <View style={applyStyle({ flexDirection: 'row' })}>
        {
          props.onSelect &&
          <TouchableOpacity onPress={props.onSelect} style={{}}>
            <LibIcon name={props.selected ? "checkbox-marked" : "checkbox-blank-outline"} color={MarketStyle.colorPrimaryMarket} />
          </TouchableOpacity>
        }
        <View style={applyStyle({ marginLeft: 10, flex: 1 })} >
          <TouchableOpacity disabled={!props.onSelect} onPress={props.onSelect} >
            <Text allowFontScaling={false} style={applyStyle({ textAlign: 'left', fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 })} >{props?.keyword || props?.keyword_title}</Text>
            {
              props.hits &&
              <Text allowFontScaling={false} style={applyStyle({ textAlign: 'left', fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0 })} >{esp.lang("market/ads_store_keyword_item", "hits", LibUtils.number(props?.hits))}</Text>
            }
          </TouchableOpacity>
          <TouchableOpacity onPress={() => {
            MarketSlidingupProperty.add(
              <View style={applyStyle({ backgroundColor: "white", paddingHorizontal: 17, borderTopLeftRadius: 15, borderTopRightRadius: 15 })} >
                <View style={applyStyle({ flexDirection: "row", alignItems: "center", marginVertical: 10 })} >
                  <TouchableOpacity onPress={() => MarketSlidingupProperty.hide()} style={applyStyle({ marginRight: 10 })} >
                    <LibIcon name="close" size={26} />
                  </TouchableOpacity>
                  <Text allowFontScaling={false} style={applyStyle({ fontWeight: 'bold', fontSize: 16 })} >{props?.keyword || props.keyword_title}</Text>
                </View>
                <Text allowFontScaling={false} style={applyStyle({ fontWeight: 'bold', fontSize: 16 })}  >{esp.lang("market/ads_store_keyword_item", "cost_keyword")}</Text>
                <View style={applyStyle({ flexDirection: "row", alignItems: "center", borderBottomWidth: 1, borderBottomColor: '#f1f1f1', marginVertical: 10 })} >
                  <Text allowFontScaling={false} style={applyStyle({ marginRight: 10, fontSize: 14, fontStyle: "normal", letterSpacing: 0 })} >{esp.lang("market/ads_store_keyword_item", "prefix")}</Text>
                  <LibInput
                    base
                    onChangeText={(t) => { price = t }}
                    onSubmitEditing={() => {
                    }}
                    defaultValue={props?.price_total || props?.price_view || ''}
                    maskFrom="end"
                    mask={'###.###.###.###.###'}
                    keyboardType={'numeric'}
                    style={applyStyle({ flex: 1, paddingVertical: Platform.OS == 'ios' ? 10 : 4, fontFamily: 'Arial', fontSize: 18, fontWeight: 'bold' })} />
                </View>
                <View style={applyStyle({ flexDirection: 'row', alignItems: 'center' })} >
                  <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, fontStyle: "normal", letterSpacing: 0 })} >{esp.lang("market/ads_store_keyword_item", "recomendation")}</Text>
                  <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, fontStyle: "normal", letterSpacing: 0, fontWeight: 'bold' })} >{LibUtils.money(props?.price_view_suggest)}</Text>
                </View>
                <MarketButton text={esp.lang("market/ads_store_keyword_item", "btn_save")} buttonStyle={applyStyle({ marginVertical: 10 })} onPress={() => {
                  checkSubmit()
                  // props.onChangePrice(price)
                  // MarketSlidingupProperty.hide()
                }} />
              </View>
            )
            MarketSlidingupProperty.show()
          }} >
            <View style={applyStyle({ paddingLeft: 0, marginTop: 10, paddingHorizontal: 17 })} >
              <View style={applyStyle({ flexDirection: "row", alignItems: "center", borderBottomWidth: 3, borderColor: MarketStyle.colorPrimaryMarket, backgroundColor: "white" })} >
                <LibTextstyle textStyle="callout" text={'Rp '} style={applyStyle({ fontSize: 14, color: "#aaa" })} />
                <Text style={applyStyle({ flex: 1, paddingVertical: Platform.OS == 'ios' ? 10 : 4, fontSize: 18, fontWeight: 'bold', color: '#707070' })}>{LibUtils.number(props?.price_total || props?.price_view)}</Text>
                <LibTextstyle textStyle="callout" text={esp.lang("market/ads_store_keyword_item", "total_view", LibUtils.number(props?.price_view_each))} style={applyStyle({ fontSize: 12, color: "#aaa" })} />
              </View>
            </View>
          </TouchableOpacity>
        </View>
        {
          props.onDelete &&
          <TouchableOpacity onPress={props.onDelete} style={{}}>
            <LibIcon name={'trash-can'} color={MarketStyle.colorPrimaryMarket} />
          </TouchableOpacity>
        }
      </View>
    </View>
  )
}