// withHooks
import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventMessage } from 'esoftplay/cache/event/message/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 { 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 { EventTransaction } from 'esoftplay/cache/event/transaction/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import React, { useEffect } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface EventOrder_share_to_detailArgs {

}
export interface EventOrder_share_to_detailProps {

}
export default function m(props: EventOrder_share_to_detailProps): any {
  const user = UserClass.state().get()
  const { user_id, qty, qty_shared, url_order_detail } = LibNavigation.getArgsAll(props)
  const [userTo, setUserTo] = useSafeState<any>()
  const [_qty, set_qty] = useSafeState<number>(1)
  const [result, setResult] = useSafeState<any>()
  const [trxId] = useSafeState(EventTransaction().getTrxId())


  useEffect(() => {
    loadDataUser()
    loadDataEvent()
  }, [])

  function loadDataUser() {
    let postTest = {
      qr: user_id
    }
    new LibCurl('user', postTest, (result, msg) => {
      setUserTo(result)
    }, (error) => {
      LibNavigation.back()
      LibToastProperty.show(error?.message)
    }, 1)
  }

  function loadDataEvent() {
    new LibCurl(url_order_detail, null, (res) => {
      setResult(res)
    }, (error) => {
      LibDialog.warning(esp.lang("event/order_share_to_detail", "load_error"), error?.message);
      LibNavigation.back()
    })

  }

  function add(): void {
    let a = Number(qty - qty_shared)
    let b = a - result?.qty_used

    if (_qty < Number(b)) {
      set_qty(_qty + 1)
    }
  }

  function min(): void {
    set_qty(_qty == 1 ? 1 : _qty - 1)
  }

  function shareTicket() {
    LibDialog.warningConfirm(esp.lang("event/order_share_to_detail", "title_confirm_share_ticket"), esp.lang("event/order_share_to_detail", "msg_confirm_share_ticket"), esp.lang("event/order_share_to_detail", "btn_yes_confirm_share_ticket"), () => {
      let post = {
        receiver_email: userTo?.email,
        booking_id: result?.booking_id,
        qty_shared: _qty,
        trx_id: trxId
      }

      LibProgress.show(esp.lang("event/order_share_to_detail", "msg_wait"))
      new LibCurl('event_booking_shared?id=' + result?.event_id, post, (res, msg) => {
        // LibNotify(res)
        LibProgress.hide()
        LibDialog.info(esp.lang("event/order_share_to_detail", "title_success_ share_ticket"), msg)
        LibNavigation.back()
        LibNavigation.back()

        // LibNavigation.backToRoot()
        // LibNavigation.navigate('event/order_detail', { url: res?.url })
      }, (error) => {
        LibProgress.hide()
        LibDialog.warning(esp.lang("event/order_share_to_detail", "err"), error?.message);
        LibNavigation.back()
      })
    }, esp.lang("event/order_share_to_detail", "btn_cancel_share_ticket"), () => {

    })
  }

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

  if (userTo?.id == user?.id) {
    return (
      <View style={{ flex: 1, backgroundColor: '#fff' }}>
        <EventHeader title={esp.lang("event/order_share_to_detail", "share_ticket_to")} />
        <EventMessage message={esp.lang("event/order_share_to_detail", "cannot_share_ticket_to_myself")} children={
          <EventButton onPress={() => {
            LibNavigation.back()
          }} label={esp.lang("event/order_share_to_detail", "back")} style={{ margin: 15, marginTop: 50 }} />
        } />
      </View>
    )
  }

  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <LibKeyboard_avoid style={{ flex: 1 }}>
        <EventHeader title={esp.lang("event/order_share_to_detail", "share_ticket_to")} />
        <View style={[{ margin: 15, marginTop: 20, padding: 15, borderRadius: 5, backgroundColor: '#fff' }, LibStyle.elevation(2)]}>
          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#4a4a4a" }}>{esp.lang("event/order_share_to_detail", "share_ticket_to")}</Text>
          <View style={{ height: 100, borderRadius: 50, width: 100, overflow: 'hidden', marginTop: 18, alignSelf: 'center' }} >
            <LibPicture source={{ uri: userTo?.image }} style={{ height: 100, borderRadius: 50, width: 100, borderColor: 'white', borderWidth: 3 }} resizeMode="cover" />
          </View>
          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#4a4a4a", marginTop: 11 }}>{userTo?.name}</Text>
          <Text allowFontScaling={false} style={{ marginTop: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#4a4a4a" }}>{userTo?.phone}</Text>
          <Text allowFontScaling={false} style={{ marginTop: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#4a4a4a" }}>{userTo?.email}</Text>

          <View style={{ flexDirection: 'row', marginTop: 25, 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>
          <EventButton label={esp.lang("event/order_share_to_detail", "send_ticket")} style={{ marginTop: 20, marginLeft: 10, marginRight: 10 }} onPress={() => {
            if (result?.use_seat == 1) {
              let data = {
                event_id: result?.event_id,
                qty: _qty,
                selected_ticket: {
                  list: {
                    price_id: result?.price_id,
                    on_date: result?.ondate,
                  }
                }
              }
              LibNavigation.navigate('event/seat', {
                url: 'event_seat_shared',
                dataTicket: data,
                shared: true,
                booking_id: result?.id,
                receiver_email: userTo.email,
              })
            } else {
              shareTicket()
            }
          }} />

        </View>
      </LibKeyboard_avoid>
    </View>
  )
}