// withHooks
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventOrder_detailProperty } from 'esoftplay/cache/event/order_detail/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

import { EventIndexProperty } from 'esoftplay/cache/event/index/import';
import { EventInput_rectangle } from 'esoftplay/cache/event/input_rectangle/import';
import { EventPopup } from 'esoftplay/cache/event/popup/import';
import { EventTransaction } from 'esoftplay/cache/event/transaction/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import React, { useEffect, useRef } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface EventOrder_share_toArgs {
  url: string
}
export interface EventOrder_share_toProps {

}
export default function m(props: EventOrder_share_toProps): any {
  const { url } = LibNavigation.getArgsAll(props)
  const user = UserClass.state().get()
  let inputEmail = React.useRef<EventInput_rectangle>(null)
  const dialogUser = useRef<LibSlidingup>(null)
  const [email, setEmail] = useSafeState<string>('')
  const [qty, setQty] = useSafeState<number>(1)
  const [trxId] = useSafeState(EventTransaction().getTrxId())

  const [result, setResult] = useSafeState<any>()
  const [addOnsBooked, setAddOnsBooked] = useSafeState<any>()

  function loadData(): void {
    new LibCurl(url, null, (res) => {
      setResult(res)
      if (res?.hasOwnProperty('url_addons_booked')) {
        loadDataAddonsBooked(res?.url_addons_booked)
      }
    }, (error) => {
      LibDialog.warning(esp.lang("event/order_share_to", "load_error"), error?.message);
      LibNavigation.back()
    })
  }

  function loadDataAddonsBooked(url: any) {
    new LibCurl(url, null, (res) => {
      setAddOnsBooked(res)
    }, (error) => {
      LibDialog.warning(esp.lang("event/order_share_to", "load_error"), error?.message);
    })
  }

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

  function add(): void {
    if (qty < Number(result.qty_shareable)) {
      setQty(qty + 1)
    }
  }

  function min(): void {
    setQty(qty == 1 ? 1 : qty - 1)
  }

  function shareTicket(p: any) {
    LibDialog.warningConfirm(esp.lang("event/order_share_to", "title_alert_share_ticket"), esp.lang("event/order_share_to", "msg_alert_share_ticket"), esp.lang("event/order_share_to", "btn_yes_alert_share_ticket"), () => {
      let post = {
        receiver_email: email,
        booking_id: result?.booking_id,
        qty_shared: qty,
        trx_id: trxId,
        pin: p
      }
      LibProgress.show(esp.lang("event/order_share_to", "msg_wait"))
      new LibCurl('event_booking_shared?id=' + result?.event_id, post, (res, msg) => {
        // LibNotify(result)
        EventOrder_detailProperty.subscribe().trigger()
        EventIndexProperty.reload.trigger() //reload data order
        LibProgress.hide()
        LibDialog.info(esp.lang("event/order_share_to", "title_curl_success"), msg)
        LibNavigation.back()
      }, (error) => {
        LibProgress.hide()
        LibDialog.warning(esp.lang("event/order_share_to", "share_error"), error?.message);
        LibNavigation.back()
      }, 1)
    }, esp.lang("event/order_share_to", "btn_cancel_alert_share_ticket"), () => {

    })
  }

  if (!result) {
    return (
      <LibLoading />
    )
  }

  esp.log(addOnsBooked);

  return (
    <LibKeyboard_avoid style={{ flex: 1, backgroundColor: '#fff' }}>
      <EventHeader title={esp.lang("event/order_share_to", "title_share_ticket_to", esp.appjson().expo.name)} />
      <ScrollView showsVerticalScrollIndicator={false} >
        <TouchableOpacity onPress={() => {
          LibNavigation.navigate('component/scanner', {
            fromPage: 'event/order_share_to',
            qty: result?.qty,
            qty_shared: result?.qty_shared,
            url_order_detail: url,
          })
        }}>
          <View style={{ width: LibStyle.width, height: LibStyle.height * 0.5, backgroundColor: '#b8b7bf', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
            <LibPicture source={esp.assets('icons/ic_barcode_white.png')} style={{ height: 250, width: 250 }} />
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", marginTop: 10, color: '#fff' }}>{esp.lang("event/order_share_to", "click_here")}</Text>
            <Text allowFontScaling={false} style={{ color: '#fff', fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", marginTop: 6 }}>{esp.lang("event/order_share_to", "scan_qrcode")}</Text>
            <Text allowFontScaling={false} style={{ color: '#fff', fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", marginTop: 5 }}>{esp.lang("event/order_share_to", "in_member_bbo_page", esp.appjson().expo.name)}</Text>
          </View>
        </TouchableOpacity>
        <Text allowFontScaling={false} style={{ opacity: 0.6, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", marginTop: 17 }}>{esp.lang("event/order_share_to", "or")}</Text>
        <EventInput_rectangle
          ref={inputEmail}
          keyboardType="email-address"
          placeholder={esp.lang("event/order_share_to", "placeholder_input_email")}
          autoCapitalize="none"
          onChangeText={(t) => {
            setEmail(t)
          }}
          style={{ marginLeft: 25, marginRight: 25, marginTop: 18, borderRadius: 5 }} />
        <TouchableOpacity onPress={() => {
          if (inputEmail.current?.getText() == '') {
            LibToastProperty.show(esp.lang("event/order_share_to", "msg_error_input_email"))
            inputEmail.current?.blur()
            return
          } else if (email === user.email) {
            LibDialog.warningConfirm(esp.lang("event/order_share_to", "title_alert_fault"), esp.lang("event/order_share_to", "msg_alert_cant_share_ticket_to_myself"), esp.lang("event/order_share_to", "btn_yes_alert_cant_share_ticket_to_myself"), () => {
              setEmail("")
              inputEmail.current?.setText("")
              inputEmail.current?.focus()
            }, "", () => {

            })
          } else {
            dialogUser.current?.show()
          }
        }} >
          <View style={{ marginBottom: 10, marginTop: 18, marginLeft: 25, marginRight: 25, height: 35, borderRadius: 17.5, backgroundColor: "#34a2ec", borderStyle: "solid", borderWidth: 0.5, borderColor: "#2980b9", alignItems: 'center', justifyContent: 'center' }} >
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#fff" }} >{esp.lang("event/order_share_to", "next")}</Text>
          </View>
        </TouchableOpacity>

      </ScrollView>
      <LibSlidingup ref={dialogUser} >
        <View style={{ backgroundColor: 'white', borderTopLeftRadius: 20, borderTopRightRadius: 20, padding: 20 }} >
          <EventPopup
            email={email.trim()}
            redirect={() => {
              if (result?.use_seat == 1) {
                let data = {
                  event_id: result?.event_id,
                  qty: qty,
                  selected_ticket: {
                    list: {
                      price_id: result?.price_id,
                      ondate: result?.ondate,
                    }
                  }
                }
                LibNavigation.navigate('event/seat', {
                  url: 'event_seat_shared',
                  dataTicket: data,
                  shared: true,
                  booking_id: result?.id,
                  receiver_email: email,
                })
              } else {
                LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
                  if (p) {
                    shareTicket(p)
                  }
                })
              }
              dialogUser.current?.hide()
            }} cancel={() => {
              dialogUser.current?.hide()
            }}
            view={
              <View style={{ flexDirection: 'row', marginTop: 20, marginBottom: 8, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
                <TouchableOpacity onPress={() => { min() }}>
                  <View style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' }}>
                    <LibIcon name="minus" color="#e74c3c" />
                  </View>
                </TouchableOpacity>
                <Text style={{ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginLeft: 13, marginRight: 13 }}>{qty}</Text>
                <TouchableOpacity onPress={() => { add() }}>
                  <View style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' }}>
                    <LibIcon name="plus" color="#16a085" />
                  </View>
                </TouchableOpacity>
              </View>
            }
          />
        </View>
      </LibSlidingup>
    </LibKeyboard_avoid>
  )
}