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

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/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 { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketInput_container } from 'esoftplay/cache/market/input_container/import';
import { MarketInput_select } from 'esoftplay/cache/market/input_select/import';
import { MarketInput_square } from 'esoftplay/cache/market/input_square/import';
import { MarketLocationProperty } from 'esoftplay/cache/market/location/import';
import { MarketToggle } from 'esoftplay/cache/market/toggle/import';
import { MarketUser_profileProperty } from 'esoftplay/cache/market/user_profile/import';
import { UseForm } from 'esoftplay/cache/use/form/import';
import { UserClass } from 'esoftplay/cache/user/class/import';


import React, { useEffect, useRef } from 'react';
import { View } from 'react-native';

export interface MarketAddress_inputProps {
  defaultAddress?: MarketAddress_inputForm
  from?: string
}

export interface MarketAddress_inputFormLocation {
  id: number,
  detail: string,
  title: string,
}
export interface MarketAddress_inputForm {
  name: string,
  recipient: string,
  location_id: string,
  location_name: string,
  location_latlong: string,
  location_name_latlong: string,
  address: string,
  id: string,
  address_primary: string,
  address_mitra: string,
  address_merchant: string,
  address_dc: string,
  address_return: string,
  zipcode: string,
  phone: string,
}


export function buildForm(data: MarketAddress_inputForm): MarketAddress_inputForm {
  return data
}

export default function m(props: MarketAddress_inputProps): any {
  const phoneRef = useRef<MarketInput_square>(null)
  const user = UserClass.state().useSelector(s => s)
  const [form, setForm, reForm, delForm, batchForm] = UseForm<MarketAddress_inputForm>('market/address', props.defaultAddress)

  const location = MarketLocationProperty.state().useSelector(s => s)

  function doDelete() {
    LibDialog.warningConfirm(esp.lang("market/address_input", "delete_title"), esp.lang("market/address_input", "delete_msg"), esp.lang("market/address_input", "delete_confirm"), () => {
      if (form.id) {
        new LibCurl('shop/member_location_del', { id: form.id }, (res, msg) => {
          LibNavigation.back()
          LibToastProperty.show(res)
          MarketUser_profileProperty.update()
        }, (m) => LibToastProperty.show(m?.message, 5000))
      }
    }, esp.lang("market/address_input", "delete_cancel"), () => { })
  }

  useEffect(() => {
    if (props.defaultAddress) {
      batchForm({
        ...props.defaultAddress,
      })
    }
    return () => delForm()
  }, [])


  useEffect(() => {
    if (location) {
      const lnl = location.filter((x: any) => x.id == props?.defaultAddress?.location_id)[0]
      if (lnl)
        setForm('location_name_latlong')(lnl?.latitude + ',' + lnl?.longitude)
    }
  }, [location])

  return (
    <MarketInput_container>
      <MarketInput_square
        mandatory
        containerStyle={styleId_2tlMHb}
        label={esp.lang("market/address_input", "label_location_name")}
        defaultValue={form?.name}
        onChangeText={setForm("name")}
      />
      <MarketInput_square
        mandatory
        containerStyle={styleId_2tlMHb}
        label={esp.lang("market/address_input", "label_recipient")}
        defaultValue={form?.recipient}
        onChangeText={setForm("recipient")}
      />
      <MarketInput_square
        ref={phoneRef}
        mandatory
        label={esp.lang("market/address_input", "label_phone")}
        defaultValue={form?.phone}
        mask="#### #### #### #### #### #### ####"
        maskFrom="start"
        keyboardType="phone-pad"
        onChangeText={setForm("phone")}
      />
      <MarketInput_select
        label={esp.lang("market/address_input", "label_district")}
        mandatory
        value={form?.location_name}
        onPress={() => {
          LibNavigation.navigateForResult("market/location", undefined, 222).then((res) => {
            batchForm({
              ...form,
              location_latlong: '',
              location_name_latlong: res.latitude + ',' + res.longitude,
              location_name: res.detail,
              location_id: res.id
            })
          })
        }}
      />
      <MarketInput_square
        label={esp.lang("market/address_input", "label_pos_code")}
        mandatory
        defaultValue={form?.zipcode}
        keyboardType="phone-pad"
        onChangeText={setForm("zipcode")}
      />
      <MarketInput_select
        mandatory
        label={esp.lang("market/address_input", "label_location_address")}
        value={form?.location_latlong ? esp.lang("market/address_input", "pinned") : undefined}
        onPress={() => {
          const openMaps = (latlong: string, cb: (latlong: string) => void) => {
            LibNavigation.navigateForResult("market/map", { latlong }, 121).then((dt) => {
              cb(dt.latlong)
            })
          }

          if (form?.location_name_latlong || form?.location_latlong) {
            openMaps(form?.location_name_latlong || form?.location_latlong, (latlong) => {
              setForm("location_latlong")(latlong)
            })
          } else
            LibNavigation.navigateForResult("market/address_autocomplete", undefined, 111).then((ll) => {
              openMaps(ll?.latlong || form?.location_name_latlong || form?.location_latlong, (latlong) => {
                setForm("location_latlong")(latlong)
                if (!form?.address)
                  setForm("address")(ll?.address)
              })
            })
        }}
      />
      <MarketInput_square
        mandatory
        label={esp.lang("market/address_input", "label_address")}
        multiline
        defaultValue={form?.address}
        style={styleId_261bvm}
        onChangeText={setForm("address")}
      />
      <View
        style={styleId_Z1Nnmlj} >
        <View style={styleId_ZcMJmd} >
          <LibTextstyle text={esp.lang("market/address_input", "text_main_address")} textStyle="body" />
          <LibTextstyle
            textStyle="caption1"
            style={styleId_HdegY}
            text={esp.lang("market/address_input", "text_main_address_info")} />
        </View>
        <MarketToggle disabled={props?.defaultAddress?.address_primary == '1'} type="success" value={form?.address_primary == '1'} onChangeValue={() => { setForm('address_primary')(form?.address_primary == '1' ? 0 : 1) }} />
      </View>
      {
        user?.merchant_id > 0 &&
        <>
          <View
            style={styleId_Z1Nnmlj} >
            <View style={styleId_ZcMJmd} >
              <LibTextstyle text={esp.lang("market/address_input", "text_merchant_address")} textStyle="body" />
              <LibTextstyle
                textStyle="caption1"
                style={styleId_HdegY}
                text={esp.lang("market/address_input", "text_merchant_address_info")} />
            </View>
            <MarketToggle disabled={props?.defaultAddress?.address_merchant == '1'} type="success" value={form?.address_merchant == '1'} onChangeValue={() => { setForm('address_merchant')(form?.address_merchant == '1' ? 0 : 1) }} />
          </View>
          <View
            style={styleId_Z1Nnmlj} >
            <View style={styleId_ZcMJmd} >
              <LibTextstyle text={esp.lang("market/address_input", "text_return_address")} textStyle="body" />
              <LibTextstyle
                textStyle="caption1"
                style={styleId_HdegY}
                text={esp.lang("market/address_input", "text_return_address_info")} />
            </View>
            <MarketToggle disabled={props?.defaultAddress?.address_return == '1'} type="success" value={form?.address_return == '1'} onChangeValue={() => { setForm('address_return')(form?.address_return == '1' ? 0 : 1) }} />
          </View>
        </>
      }
      {
        user?.mitra_id > 0 &&
        <View
          style={styleId_Z1Nnmlj} >
          <View style={styleId_ZcMJmd} >
            <LibTextstyle text={esp.lang("market/address_input", "text_mitra_address")} textStyle="body" />
            <LibTextstyle
              textStyle="caption1"
              style={styleId_HdegY}
              text={esp.lang("market/address_input", "text_mitra_address_info")} />
          </View>
          <MarketToggle disabled={props?.defaultAddress?.address_mitra == '1'} type="success" value={form?.address_mitra == '1'} onChangeValue={() => { setForm('address_mitra')(form?.address_mitra == '1' ? 0 : 1) }} />
        </View>
      }
      {
        user?.dc_id > 0 &&
        <View
          style={styleId_Z1Nnmlj} >
          <View style={styleId_ZcMJmd} >
            <LibTextstyle text={esp.lang("market/address_input", "text_dc_address")} textStyle="body" />
            <LibTextstyle
              textStyle="caption1"
              style={styleId_HdegY}
              text={esp.lang("market/address_input", "text_dc_address_info")} />
          </View>
          <MarketToggle disabled={props?.defaultAddress?.address_dc == '1'} type="success" value={form?.address_dc == '1'} onChangeValue={() => { setForm('address_dc')(form?.address_dc == '1' ? 0 : 1) }} />
        </View>
      }
      {
        props.defaultAddress && !parseInt(form?.address_primary) && !parseInt(form?.address_merchant) && !parseInt(form?.address_mitra) && !parseInt(form?.address_dc) && !parseInt(form?.address_return) &&
        <MarketButton
          text={esp.lang("market/address_input", "btn_delete_address")}
          onPress={doDelete}
          buttonStyle={styleId_ZrumtP}
          color={LibStyle.colorRed}
          colorBackground={"#f1f1f1"}
        />
      }
    </MarketInput_container>
  )
}
const styleId_2tlMHb: any = { marginTop: 10 }
const styleId_261bvm: any = { textAlignVertical: "top", height: 100 }
const styleId_Z1Nnmlj: any = { paddingHorizontal: 17, paddingVertical: 10, flexDirection: "row", alignItems: "center", marginTop: 10, borderTopWidth: 1, borderTopColor: "#eee" }
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_HdegY: any = { color: "#888", marginTop: 5 }
const styleId_ZrumtP: any = { marginHorizontal: 17, marginVertical: 10, marginTop: 50 }