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


import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibImage } from 'esoftplay/cache/lib/image/import';
import { LibInput } from 'esoftplay/cache/lib/input/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketInput_label } from 'esoftplay/cache/market/input_label/import';
import { MarketInput_select } from 'esoftplay/cache/market/input_select/import';
import { MarketInput_square } from 'esoftplay/cache/market/input_square/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { UseForm } from 'esoftplay/cache/use/form/import';
import { UserData } from 'esoftplay/cache/user/data/import';

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


export interface MarketMerchant_inputProps {
  defaultData?: MarketMerchant_inputForm
}

export interface MarketMerchant_inputPost {
  title: string,
  email: string,
  address: string,
  phone: string,
  image: string,
  description: string,
  zipcode: string,
  location_id: string | number,
  location_latlong: string
  is_online: 0 | 1
}

export interface MarketMerchant_inputFormLocation {
  id: string | number,
  detail: string,
  latitude: string,
  longitude: string
}
export interface MarketMerchant_inputFormLatlong {
  latlong: string,
  name: string
}
export interface MarketMerchant_inputForm {
  active?: string,
  title: string,
  email: string,
  address: string,
  phone: string,
  image: string,
  description: string,
  zipcode: string,
  location: MarketMerchant_inputFormLocation,
  latlong: MarketMerchant_inputFormLatlong,
  location_name: string,
  is_online: number
}

export function buildPost(form: any): MarketMerchant_inputPost {
  return {
    title: form?.title,
    email: form?.email.trim(),
    address: form?.address,
    phone: form?.phone,
    image: form?.image,
    description: form?.description || '',
    zipcode: form?.zipcode,
    location_id: form?.location?.id || form.location_id,
    location_latlong: form?.latlong?.latlong,
    is_online: form?.is_online
  }
}

export function validateInputMerchant(form: any): boolean {
  let msg = ''
  if (!form?.title) {
    msg = esp.lang("market/merchant_input", "empty_merchant_name")
  }
  if (!msg && !form?.image) {
    msg = esp.lang("market/merchant_input", "empty_logo")
  }
  if (!msg && !form?.email) {
    msg = esp.lang("market/merchant_input", "empty_email")
  }
  if (!msg && !form?.phone) {
    msg = esp.lang("market/merchant_input", "empty_phone")
  }
  if (!msg && !form?.address) {
    msg = esp.lang("market/merchant_input", "empty_address")
  }
  if (!msg && !form?.zipcode) {
    msg = esp.lang("market/merchant_input", "empty_zipcode")
  }
  if (!msg && !form?.location) {
    msg = esp.lang("market/merchant_input", "empty_location")
  }
  if (!msg && form?.latlong?.latlong == '') {
    msg = esp.lang("market/merchant_input", "empty_map")
  }
  if (!msg && (form?.is_online != 0 && form?.is_online != 1)) {
    msg = esp.lang("market/merchant_input", "empty_option")
  }
  if (msg) {
    LibToastProperty.show(msg)
    return false
  }
  return true
}

export default function m(props: MarketMerchant_inputProps): any {

  const [form, setForm] = UseForm<MarketMerchant_inputForm>("market_merchant_input")
  UserData.register('market_merchant_input')
  const inputPhone = useRef<LibInput>(null)
  const [opt, setOpt] = useSafeState(form?.is_online || -1)

  const option = [
    {
      id: 0,
      title: esp.lang("market/merchant_input", "offile"),
      info: esp.lang("market/merchant_input", "offline_info")
    },
    {
      id: 1,
      title: esp.lang("market/merchant_input", "online"),
      info: ''
    }
  ]

  return (
    <>
      <MarketInput_square
        mandatory
        containerStyle={{ marginTop: 20 }}
        label={esp.lang("market/merchant_input", "label_merchant")}
        defaultValue={form?.title}
        onChangeText={setForm("title")} />
      <View style={{ paddingHorizontal: 17, marginTop: 4, marginBottom: 8 }} >
        <MarketInput_label label={esp.lang("market/merchant_input", "label_logo")} mandatory />
        <View style={{ flexDirection: "row" }} >
          <LibPicture
            source={{ uri: form?.image }}
            style={{ height: 100, width: 100, borderRadius: 10, backgroundColor: "#f1f2f3", borderColor: "#ddd", borderWidth: 1 }}
          />
          <View style={{ marginLeft: 20, paddingTop: 12 }} >
            <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#888" }}>{esp.lang("market/merchant_input", "max_file")}</Text>
            <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#000", marginTop: 4 }}>{esp.lang("market/merchant_input", "max_size")}</Text>
            <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#888", marginTop: 6 }}>{esp.lang("market/merchant_input", "files_allow")}</Text>
            <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#000", marginTop: 4 }}>{esp.lang("market/merchant_input", "file_type")}</Text>
            <MarketButton
              text={esp.lang("market/merchant_input", "btn_browse")}
              buttonStyle={{ marginTop: 10 }}
              colorBackground={"white"}
              colorBorder={MarketStyle.colorPrimaryMarket}
              color={MarketStyle.colorPrimaryMarket}
              textStyle={{ fontSize: 13 }}
              onPress={() => { LibImage.fromGallery().then(setForm("image")) }} />
          </View>
        </View>
      </View>
      <MarketInput_square
        mandatory
        autoCapitalize="none"
        defaultValue={form?.email}
        label={esp.lang("market/merchant_input", "label_email")}
        onChangeText={setForm("email")} />
      <MarketInput_square
        _ref={inputPhone}
        mandatory
        keyboardType="numeric"
        mask="#### #### #### #### ####"
        defaultValue={form?.phone}
        label={esp.lang("market/merchant_input", "label_phone")}
        onChangeText={setForm("phone")} />
      <MarketInput_square
        multiline
        defaultValue={form?.description}
        style={{ height: 100, textAlignVertical: "top" }}
        label={esp.lang("market/merchant_input", "label_desc")}
        onChangeText={setForm("description")} />
      <MarketInput_square
        mandatory
        label={esp.lang("market/merchant_input", "label_address")}
        defaultValue={form?.address}
        onChangeText={setForm("address")} />
      <MarketInput_square
        mandatory
        label={esp.lang("market/merchant_input", "label_zipcode")}
        defaultValue={form?.zipcode}
        onChangeText={setForm("zipcode")} />
      <MarketInput_select
        mandatory
        label={esp.lang("market/merchant_input", "label_location")}
        onPress={() => {
          LibNavigation.navigateForResult("market/location").then((ll) => {
            setForm('latlong')({ latlong: '', name: '' })
            setForm("location")(ll)
          })
        }}
        placeholder={esp.lang("market/merchant_input", "placeholder_location")}
        value={form?.location?.detail || form?.location_name}
      />
      <MarketInput_select
        mandatory
        label={esp.lang("market/merchant_input", "label_map")}
        onPress={() => {
          if (!!form?.latlong?.latlong || (!!form?.location?.latitude && !!form?.location?.longitude)) {
            LibNavigation.navigateForResult("market/map", { latlong: form?.latlong?.latlong || (form?.location?.latitude + ',' + form?.location?.longitude) }).then(setForm("latlong"))
          } else
            LibToastProperty.show(esp.lang("market/merchant_input", "select_location"))
        }}
        placeholder={esp.lang("market/merchant_input", "placeholder_map")}
        value={form?.latlong?.latlong}
      />
      <View style={{ paddingHorizontal: 17 }}>
        <MarketInput_label label={esp.lang("market/merchant_input", "label_option")} />
        {
          props.defaultData?.is_online == 1 && props.defaultData?.active != "3" &&
          <View style={{ flexDirection: "row", marginBottom: 10 }} >
            <TouchableOpacity testID='opt_online' onPress={() => { setOpt(option[1].id); setForm("is_online")(option[1].id) }} style={{ flex: 1, flexDirection: "row", alignItems: "center" }} >
              <LibIcon name={option[1].id == opt ? "checkbox-marked-circle-outline" : "circle-outline"} color={MarketStyle.colorPrimaryMarket} style={{ marginRight: 10 }} />
              <MarketInput_label label={option[1].title} />
            </TouchableOpacity>
          </View>
          ||
          option.map((item: any, i: number) => (
            <View key={i} style={{ flexDirection: "row", marginBottom: 10 }} >
              <TouchableOpacity testID='opt' onPress={() => { setOpt(item.id); setForm("is_online")(item.id) }} style={{ flex: 1, flexDirection: "row", alignItems: "center" }} >
                <LibIcon name={item.id == opt ? "checkbox-marked-circle-outline" : "circle-outline"} color={MarketStyle.colorPrimaryMarket} style={{ marginRight: 10 }} />
                <MarketInput_label label={item.title} />
              </TouchableOpacity>
              {
                item.info != '' &&
                <TouchableOpacity onPress={() => { LibDialog.info(item.title, item.info) }} >
                  <LibIcon name="information-outline" color="#aaa" />
                </TouchableOpacity>
              }
            </View>
          ))
        }
      </View>
      {/* <View style={{ paddingHorizontal: 17, marginTop: 4, marginBottom: 8 }}>
        <MarketInput_label label="Lokasi Toko" />
        <TouchableOpacity
          onPress={() => LibNavigation.navigateForResult("market/location").then(setForm("location"))}
          style={{ flexDirection: "row", alignItems: "flex-end", marginBottom: 17, borderBottomWidth: 1, borderRadius: 6, borderColor: "#ddd", paddingVertical: 5, paddingBottom: 10 }} >
          <LibTextstyle textStyle="body" text={form?.location?.detail} style={{ marginHorizontal: 4, flex: 1, marginTop: 2 }} />
          <LibTextstyle textStyle="caption2" text="Edit" style={{ color: MarketStyle.colorPrimaryMarket }} />
        </TouchableOpacity>
        <MarketInput_label label="Poin Lokasi Toko" />
        <TouchableOpacity
          onPress={() => LibNavigation.navigateForResult("market/map", { latlong: form?.latlong?.latlong }).then(setForm("latlong"))}
          style={{ flexDirection: "row", alignItems: "flex-end", marginBottom: 17, borderBottomWidth: 1, borderColor: "#ddd", paddingVertical: 5, paddingBottom: 10 }} >
          <LibTextstyle numberOfLines={1} ellipsizeMode="tail" textStyle="body" text={form?.latlong?.latlong} style={{ marginHorizontal: 4, flex: 1, marginTop: 2 }} />
          <LibTextstyle textStyle="caption2" text="Edit" style={{ color: MarketStyle.colorPrimaryMarket }} />
        </TouchableOpacity>
      </View> */}
    </>
  )
}