// withHooks
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { useEffect } from 'react';

import { applyStyle } from 'esoftplay';
import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHtmltext } from 'esoftplay/cache/event/htmltext/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 { LibList } from 'esoftplay/cache/lib/list/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';
import React from 'react';
import { Pressable, Text, View } from 'react-native';


export interface EventOrder_detail_upgradeArgs {

}
export interface EventOrder_detail_upgradeProps {

}
export default function m(props: EventOrder_detail_upgradeProps): any {
  const { dataTicket, url }: any = esp.mod("lib/navigation").getArgsAll(props)
  const [selectedTicket, setSelectedTicket] = useSafeState()
  const [result, setResult] = useSafeState()
  const [error, setError] = useSafeState()
  // const [resultEvent, setResultEvent] = useSafeState()

  function loadDataUpgradeTicket() {
    new LibCurl(url, null, (res: any, msg: string) => {
      // setAvailableUpgrade(res?.list)
      setResult(res)
    }, (err: any) => {
      setError(err)
    })
  }

  // function loadDataEvent() {
  //   new LibCurl("event_detail/" + dataTicket?.event_id, null, (res: any, msg: string) => {
  //     setResultEvent(res)
  //   }, (err: any) => {

  //   })
  // }


  useEffect(() => {
    loadDataUpgradeTicket()
    // loadDataEvent()
  }, [])

  if (!result && !error) {
    const LibLoading = esp.mod("lib/loading")
    return <LibLoading />
  }

  if (error) {
    return (
      <View style={{ flex: 1 }} >
        <EventHeader title={esp.lang("event/order_detail_upgrade", "header_title")} subtitle={dataTicket?.event_name} />
        <View style={{ flex: 1 }}>
          <EventMessage message={error?.message} children={
            <EventButton
              label='Kembali'
              style={{ margin: 15, marginHorizontal: 30 }}
              onPress={() => LibNavigation.back()}
            />
          } />
        </View>
      </View>
    )
  }

  return (
    <View style={{ flex: 1 }} >
      <EventHeader title={esp.lang("event/order_detail_upgrade", "header_title")} subtitle={dataTicket?.event_name} />
      <View style={{ flex: 1 }}>
        <LibTextstyle textStyle='m_overline' text={esp.lang("event/order_detail_upgrade", "current_ticket")} style={{ fontSize: 12, margin: 15, marginBottom: 0 }} />

        <View style={{ ...LibStyle.elevation(2), margin: 15, width: LibStyle.width - 30, borderRadius: 10, backgroundColor: LibStyle.colorBgGrey, padding: 10, height: 100, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
          <EventHtmltext allowFontScaling={false} style={{ marginHorizontal: 5, fontSize: 20, color: "#000", textAlign: 'center', fontWeight: 'bold' }} numberOfLines={2} ellipsizeMode={'tail'}>{dataTicket?.price_name}</EventHtmltext>
          <Text allowFontScaling={false} style={{ color: "#000", marginTop: 10 }}>{LibUtils.money(dataTicket.total, dataTicket?.currency)}</Text>

          <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 })}>
            <View style={applyStyle({ width: 25, height: 25, borderRadius: 12.5, backgroundColor: "#fff", marginLeft: -12.5 })} />
            <View style={applyStyle({ flex: 1 })} />
            <View style={applyStyle({ width: 25, height: 25, borderRadius: 12.5, backgroundColor: "#fff", marginRight: -12.5 })} />
          </View>
        </View>

        <LibTextstyle textStyle='m_overline' text={esp.lang("event/order_detail_upgrade", "upgrade_to")} style={{ fontSize: 12, margin: 15, marginBottom: 10 }} />

        <LibList
          data={result?.list}
          extraData={selectedTicket}
          renderItem={(item: any, i: number) => {
            return (
              <Pressable onPress={() => {
                if (item.status == 1) {
                  let a = {
                    event_id: dataTicket?.event_id,
                    selected_ticket: {
                      ...item,
                      price_id: item.price_id_to,
                      list: {
                        ondate: item.ondate
                      },
                    },
                    qty: dataTicket?.qty_upgrade,
                    tax_event: item.tax
                  }
                  setSelectedTicket(a)
                } else {
                  LibDialog.warning(esp.lang("event/order_detail_upgrade", "oops"), item.message_error)
                }
              }} key={i} style={{ ...LibStyle.elevation(2), marginHorizontal: 15, marginTop: 2.5, marginBottom: 10, borderRadius: 10, backgroundColor: item.status == 0 ? LibStyle.colorBgGrey : selectedTicket?.selected_ticket?.id == item.id ? LibStyle.colorGreen : "#fff", padding: 10, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
                <EventHtmltext allowFontScaling={false} style={{ marginHorizontal: 5, fontSize: 16, color: item.status == 0 ? "#c9c9c9" : selectedTicket?.selected_ticket?.id == item.id ? "#fff" : "#000", textAlign: 'center', fontWeight: 'bold' }} numberOfLines={2} ellipsizeMode={'tail'}>{item?.price_name_to}</EventHtmltext>
                <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: 'bold', marginTop: 5, color: item.status == 0 ? "#c9c9c9" : selectedTicket?.selected_ticket?.id == item.id ? "#fff" : "#000" }}>{"+ " + LibUtils.money(Number(dataTicket?.qty_upgrade) * Number(item?.amount), item?.currency)}</Text>

                {
                  item.info &&
                  <Text allowFontScaling={false} style={{ marginTop: 10, fontSize: 12, color: selectedTicket?.selected_ticket?.id == item.id ? "#fff" : "#c9c9c9" }}>{item.info}</Text>
                }

              </Pressable>
            )
          }}
        />

      </View>
      <View style={{ padding: 10 }}>
        <EventButton label={esp.lang("event/order_detail_upgrade", "btn_next")} onPress={() => {
          if (selectedTicket) {
            if (selectedTicket?.selected_ticket?.use_seat == 1 && selectedTicket?.selected_ticket?.seat_autopick == 0) {
              LibNavigation.navigateForResult('event/seat_map', {
                url: 'event_seat',
                dataTicket: selectedTicket
              }).then((value) => {
                LibNavigation.navigate('event/order_detail_upgrade_payment', {
                  dataTicket: {
                    url_payment: result?.url_payment,
                    price_name: dataTicket?.price_name,
                    booking_id: dataTicket?.id,
                    qty_upgrade: dataTicket?.qty_upgrade,
                    tax_event: selectedTicket?.tax_event,
                    ondate: dataTicket?.ondate,
                    event_title: dataTicket?.event_name,
                    event_id: dataTicket?.event_id,
                    // ...dataTicket
                  },
                  selectedTicket: {
                    ...selectedTicket,
                    row_id: value?.row_id,
                    column_id: value?.column_id,
                    seat_name: value?.seat_name,
                  },
                  fee_platform: {
                    fee_platform_amount: selectedTicket?.selected_ticket?.fee_platform_amount,
                    fee_platform_type: selectedTicket?.selected_ticket?.fee_platform_type,
                  }
                })
              })
            } else {
              LibNavigation.navigate('event/order_detail_upgrade_payment', {
                dataTicket: {
                  url_payment: result?.url_payment,
                  price_name: dataTicket?.price_name,
                  booking_id: dataTicket?.id,
                  qty_upgrade: dataTicket?.qty_upgrade,
                  tax_event: selectedTicket?.tax_event,
                  ondate: dataTicket?.ondate,
                  event_title: dataTicket?.event_name,
                  event_id: dataTicket?.event_id,
                  // ...dataTicket
                },
                selectedTicket: selectedTicket,
                fee_platform: {
                  fee_platform_amount: selectedTicket?.selected_ticket?.fee_platform_amount,
                  fee_platform_type: selectedTicket?.selected_ticket?.fee_platform_type,
                }
              })
            }
          } else {
            LibToastProperty.show(esp.lang("event/order_detail_upgrade", "select_ticket"))
            return
          }
        }}
          backgroundColor={selectedTicket ? LibStyle.colorGreen : LibStyle.colorGrey}
          fontColor='#fff'
        />
      </View>
    </View>
  )
}