// withHooks

import { applyStyle } from 'esoftplay';
import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventConfigProperty } from 'esoftplay/cache/event/config/import';
import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventHtmltext } from 'esoftplay/cache/event/htmltext/import';
import { EventIndexProperty } from 'esoftplay/cache/event/index/import';
import { EventOrder_itemProperty } from 'esoftplay/cache/event/order_item/import';
import { EventQueue } from 'esoftplay/cache/event/queue/import';
import { EventShare } from 'esoftplay/cache/event/share/import';
import { LibCarrousel } from 'esoftplay/cache/lib/carrousel/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { LibVideoProperty } from 'esoftplay/cache/lib/video/import';
import { LibWebview } from 'esoftplay/cache/lib/webview/import';
import esp from 'esoftplay/esp';
import useLazyState from 'esoftplay/lazy';
import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';
import React, { useEffect } from 'react';
import { ActivityIndicator, Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface EventArtist_detailProps {

}

export default function m(props: EventArtist_detailProps): any {
  moment().locale('id')
  let showSchedule = React.useRef<LibSlidingup>(null)
  const [qty, setQty] = useSafeState<any>(1)
  const { data, subscribed, url } = LibNavigation.getArgsAll(props)
  const date = moment().localeFormat('YYYY-MM-DD HH:mm:ss')
  const [eventConfig] = EventConfigProperty.state().useState()

  const [selectedTicket, setSelectedTicket, getSelectedTicket] = useSafeState<any>()
  const [priceList, setPriceList] = useSafeState<any>()
  const [showAll, setShowAll] = useSafeState<any>({});
  const [loading, setLoading] = useSafeState<boolean>(false)

  const [result, setResult, getResult] = useLazyState<any>(data)
  const [startBooking, setStartBooking] = useLazyState<any>(moment(getResult()?.start_booking).serverFormat('YYYY-MM-DD HH:mm:ss'))

  useEffect(() => {
    loadResult()
    EventConfigProperty.curlConfig('v2/config_order_type')
    return () => { EventCountdownProperty.releaseQueue.trigger() }
  }, [])

  function loadResult() {
    if (!url) {
      loadDataPrice(getResult()?.price_list_url)
    } else {
      new LibCurl(url, null, (res, msg) => {
        loadDataPrice(res?.price_list_url)
        setStartBooking(moment(res?.start_booking).serverFormat('YYYY-MM-DD HH:mm:ss'))
        setResult(res)()
      }, (err) => {
        console.log(err)
        LibToastProperty.show(err?.message)
        LibNavigation.back()
      })
    }
  }

  function sortByStatus(data: any) {
    // Fungsi sorting untuk memastikan status 1 di atas, lainnya di bawah
    const statusSorter = (a: any, b: any) => {
      if (a.status == 1 && b.status != 1) return -1; // a = 1, b bukan 1 -> a di atas
      if (a.status != 1 && b.status == 1) return 1;  // a bukan 1, b = 1 -> b di atas
      return a.status - b.status; // Urutkan status selain 1 secara alami
    };

    return data
      .map((item: any) => {
        // Sorting array 'list' di dalam setiap item
        const sortedList = item?.list?.sort(statusSorter);
        return { ...item, list: sortedList };
      })
      .sort(statusSorter); // Sorting array utama
  }


  function loadDataPrice(price_list_url: string) {
    new LibCurl(price_list_url, null, (res, msg) => {

      let stop = false
      let arr = sortByStatus(res)

      for (let i = 0; i < arr.length; i++) {
        const item = arr[i];
        if (item?.status == 1) {
          for (let it = 0; it < item?.list.length; it++) {
            const element = item?.list[it];
            if (element?.status == 1) {
              let replaceList = LibObject.set(item, element)('list')
              setQty(item?.qty_min)
              setSelectedTicket(replaceList)
              stop = true
              break;
            }
          }
          if (stop) {
            break;
          }
        }
      }

      setPriceList(res)
    }, (err) => {
      LibToastProperty.show(err?.message)
      LibNavigation.back()
    })
  }

  async function proceedToPayment() {
    if (!selectedTicket) {
      if (priceList?.every((v: any) => v?.status == 0)) {
        LibToastProperty.show(esp.lang("event/artist_detail", "ticket_not_available"))
        return
      }
      LibToastProperty.show(esp.lang("event/artist_detail", "select_tiket_first"))
      return
    }

    showSchedule.current?.hide()

    let dataPost: any = {
      event_id: getResult()?.event_id,
      event_title: getResult()?.event_title,
      charge_payment: getResult()?.charge_payment,
      charge_payment_type: getResult()?.charge_payment_type,
      selected_ticket: selectedTicket,
      qty: qty,
    }

    if (selectedTicket?.config?.seat_autopick == 1 && qty > 1) {
      dataPost.adjacent_seats = 1
    }

    let finalDataPost = { ...dataPost }

    if (getSelectedTicket()?.use_seat == 1) {
      if (getSelectedTicket()?.config?.seat_autopick != 1) {
        const seat = await LibNavigation.navigateForResult('event/seat_map_new', {
          url: 'event_seat',
          dataTicket: finalDataPost,
        })

        finalDataPost = {
          ...finalDataPost,
          seat_label: seat?.seat_label
        }
      }
    }

    finalDataPost = await handleAdditionIfNeeded(finalDataPost, qty)
    const args = await buildPaymentArgs(finalDataPost, qty)
    LibNavigation.navigate('payment/ticket', args)
  }

  async function buildPaymentArgs(dataPost: any, qty: number) {
    setLoading(true)
    const conf = await curlPriceConfig(getSelectedTicket()?.price_id)
    setLoading(false)

    return {
      order_type: eventConfig?.order_type?.ticket,
      tax: conf?.tax ?? getSelectedTicket()?.tax ?? getResult()?.tax ?? 0,
      dataBookingEvent: { ...dataPost, qty },
      subscribed,
      fee_platform: conf?.fee_platform_amount != null
        ? {
          fee_platform_amount: conf.fee_platform_amount || 0,
          fee_platform_type: conf.fee_platform_type || "NONE",
        }
        : {
          fee_platform_amount: getResult()?.fee_platform_amount || 0,
          fee_platform_type: getResult()?.fee_platform_type || "NONE",
        },
      fee_custom: {
        fee_custom_label: conf?.fee_custom_label || "Custom Fee",
        fee_custom_amount: conf?.fee_custom_amount,
        fee_custom_type: conf?.fee_custom_type,
      }
    }
  }

  async function handleAdditionIfNeeded(dataPost: any, qty: number) {
    if (getSelectedTicket()?.has_addition != 1) return dataPost

    const additions = await LibNavigation.navigateForResult(
      'event/additional',
      {
        type_ticket: selectedTicket?.type,
        ondate: selectedTicket?.list?.ondate,
        event_id: getResult()?.event_id,
        qty,
        data: dataPost,
        price_id: selectedTicket?.price_id
      },
      221
    )

    return additions ? { ...dataPost, addition: additions } : dataPost
  }


  function curlPriceConfig(price_id: string): Promise<any> {
    return new Promise((resolve) => {
      if (!getResult()?.url_price_config) {
        resolve({})
        return
      }

      new LibCurl(
        getResult().url_price_config,
        null,
        (res) => {
          resolve(res?.[price_id] || {})
        },
        (err) => {
          LibToastProperty.show(err?.message)
          resolve({})
        }
      )
    })
  }

  function add(): void {
    let hasQuota = getSelectedTicket().quota > 0
    const min = hasQuota ? Number(getSelectedTicket()?.quota) - Number(getSelectedTicket()?.quota_used) : Number(getSelectedTicket()?.qty_max)
    if (qty < Math.min(min, Number(getSelectedTicket()?.qty_max))) {
      setQty(Number(qty) + 1)
    }
  }

  function min(): void {
    const currentQty = qty
    const selectedTicket = getSelectedTicket()

    // kalau qty - 1 <= 0 → set qty 0 dan unselect tiket
    if (currentQty - 1 <= 0) {
      setQty(0)
      setSelectedTicket(null) // atau undefined sesuai project
      return
    }

    // ambil qty_min dengan cara manual
    let qtyMin = 1 // default
    if (selectedTicket && selectedTicket.qty_min) {
      qtyMin = Number(selectedTicket.qty_min)
    }

    // kurangi qty tapi tetap patuhi qty_min
    if (currentQty <= qtyMin) {
      setQty(qtyMin)
    } else {
      setQty(currentQty - 1)
    }
  }


  let share = [
    {
      icon: 'icons/ic_facebook.png',
      title: 'Facebook',
      onPress: () => { EventShare.facebook(getResult()?.url) }
    },
    {
      icon: 'icons/ic_whatsapp.png',
      title: 'Whatsapp',
      onPress: () => { EventShare.whatsapp(getResult()?.url) }
    },
    {
      icon: 'icons/ic_twitter.png',
      title: 'Twitter',
      onPress: () => { EventShare.twitter(getResult()?.url) }
    },
    {
      icon: 'icons/ic_copy.png',
      title: esp.lang("event/artist_detail", "copy"),
      onPress: () => {
        LibUtils.copyToClipboard(getResult()?.url).then((v) => {
          LibToastProperty.show(esp.lang("event/artist_detail", "alert"))
        })
      }
    },
  ]

  function renderShare(item: any, i: number) {
    return (
      <View key={i} style={applyStyle({ marginRight: 10 })}>
        <TouchableOpacity onPress={item.onPress} >
          <LibPicture style={applyStyle({ resizeMode: 'contain', height: 25, width: 25, borderRadius: 12.5, backgroundColor: 'white' })} source={esp.assets(item.icon)} />
        </TouchableOpacity>
      </View>
    )
  }

  function renderItem(item: any, itemT: any, iT: number) {
    let ticketWithDate = item.price_date == 1 && item.use_code == 0
    let ticketSpecial = item.price_date == 0 && item.use_code == 0

    let _selectedTicket = item.price_id == selectedTicket?.price_id && itemT.date_id == selectedTicket?.list?.date_id

    let colorDefault = _selectedTicket ? "#FFE9AD" : '#fff'
    let colorBackground = item?.status != 1 ? LibStyle.colorLightGrey : itemT?.status != 1 ? LibStyle.colorLightGrey : colorDefault
    let textOpacity = /* item?.status == 1 ? 1 : */ itemT?.status == 1 ? 1 : 0.3

    return (
      <TouchableOpacity
        onPress={() => {
          let itemTicket = {
            ...item
          }
          let replaceList = LibObject.set(itemTicket, itemT)('list')
          let msg = itemT?.status == 0 ? esp.lang("event/artist_detail", "sold_out") : esp.lang("event/artist_detail", "coming_soon")

          // kondisi untuk tipe tiket yang ada tanggalnya
          if (item?.status == 1 && itemT?.status == 1) {
            setSelectedTicket(replaceList)
            setQty(item.qty_min)
          } else if (item?.status == 0) {
            LibToastProperty.show(msg)
          } else if (item?.status == 2) {
            LibToastProperty.show(msg)
          }
        }} activeOpacity={itemT?.status == 1 ? 0 : 1} key={iT} style={{ flex: 1, flexDirection: 'row', backgroundColor: colorBackground, justifyContent: 'space-between', padding: 10, alignItems: 'center' }}>
        {
          ticketWithDate ?
            // view untuk yang ada tanggalnya
            <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center', }}>
              <View style={applyStyle({ marginLeft: 10, marginHorizontal: 20, width: 42, height: 42, borderRadius: 5, backgroundColor: colorBackground, borderStyle: "solid", borderWidth: textOpacity, borderColor: _selectedTicket ? "#3ea4dc" : '#999', alignContent: 'center', alignItems: 'center', justifyContent: 'center' })}>
                <Text allowFontScaling={false} style={applyStyle({ opacity: textOpacity, fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0.23, textAlign: "center", color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('DD')}</Text>
              </View>
              <View style={applyStyle({ flexDirection: 'column', flex: 1 })}>
                {
                  item?.status == 1 && itemT.status != 1 &&
                  <View style={applyStyle({ flexDirection: 'row', marginBottom: 5 })}>
                    <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', marginTop: 5, borderWidth: 1, backgroundColor: itemT.status == 0 ? LibStyle.colorRed : "#4cd964", borderColor: itemT.status == 0 ? LibStyle.colorRed : "#4cd964", borderRadius: 5, padding: 3, opacity: 0.8 })}>
                      <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: /* itemT.status == 2 ? "#000" : */ "#fff", fontWeight: 'bold' })}>{itemT.status == 0 ? esp.lang("event/ticket_list", "sold_out") : esp.lang("event/ticket_list", "coming_soon")}</Text>
                    </View>
                  </View>
                }
                <>
                  <Text allowFontScaling={false} style={applyStyle({ opacity: textOpacity, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('dddd')}</Text>
                  <View style={applyStyle({ flexDirection: 'row', alignItems: "center" })}>
                    <Text allowFontScaling={false} style={applyStyle({ opacity: textOpacity, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('MMMM')}</Text>
                    <Text allowFontScaling={false} style={applyStyle({ opacity: textOpacity, marginLeft: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('YYYY')}</Text>
                  </View>
                </>
              </View>
            </View>
            :
            // view untuk yang undangan dan khusus
            <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
              <LibPicture source={esp.assets('icons/ic_special2.png')} style={{ height: 42, width: 42 }} />
              <View style={{ marginLeft: 14, flex: 1 }} >
                {
                  item?.status == 1 && itemT.status != 1 &&
                  <View style={applyStyle({ flexDirection: 'row', marginBottom: 5 })}>
                    <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', marginTop: 5, borderWidth: 1, backgroundColor: itemT.status == 0 ? LibStyle.colorRed : LibStyle.colorPrimary, borderColor: itemT.status == 0 ? LibStyle.colorRed : LibStyle.colorPrimary, borderRadius: 5, padding: 3, opacity: 0.8 })}>
                      <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: "#fff", fontWeight: 'bold' })}>{itemT.status == 0 ? esp.lang("event/ticket_list", "sold_out") : esp.lang("event/ticket_list", "coming_soon")}</Text>
                    </View>
                  </View>
                }
                {/* <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{item.type}</Text> */}
                {
                  item.info != "" &&
                  <EventHtmltext allowFontScaling={false} style={{ flexWrap: 'wrap', fontFamily: "Arial", fontSize: 11, fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{item.info}</EventHtmltext>
                }
              </View>
            </View>
        }

        <View style={applyStyle({ marginRight: 5, marginLeft: 5, flexDirection: 'column' })} >
          {
            (itemT?.status == 1 || itemT?.status == 0) &&
            <Text allowFontScaling={false} style={applyStyle({ opacity: ticketWithDate ? textOpacity : 1, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: _selectedTicket ? "#3ea4dc" : (itemT.price == 0 ? LibStyle.colorGreen : '#999') })} >{itemT.price == 0 ? esp.lang("event/ticket_list", "free") : LibUtils.money(itemT.price, item.currency)}</Text>
          }
          {
            item?.status == 1 && (ticketWithDate || ticketSpecial) && _selectedTicket &&
            <View style={applyStyle({ marginTop: 4, flexDirection: 'row', marginLeft: 8, alignContent: 'center', alignItems: 'center' })}>
              <TouchableOpacity onPress={() => { min() }}>
                <View style={applyStyle({ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", justifyContent: 'center', alignContent: 'center', alignItems: 'center' })}>
                  <LibIcon name="minus" color="#e74c3c" />
                </View>
              </TouchableOpacity>
              <Text style={applyStyle({ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginLeft: 13, marginRight: 13 })}>{qty}</Text>
              <TouchableOpacity onPress={() => { add() }}>
                <View style={applyStyle({ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", justifyContent: 'center', alignContent: 'center', alignItems: 'center' })}>
                  <LibIcon name="plus" color="#16a085" />
                </View>
              </TouchableOpacity>
            </View>
          }
        </View>
      </TouchableOpacity>
    )
  }

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

  const bgHeight = LibStyle.width * 9 / 16

  function renderImages(item: any, i: number) {
    const styleId_Z1ecB7O: any = { height: bgHeight, width: LibStyle.width, resizeMode: 'cover' }
    return (
      <TouchableOpacity key={i} onPress={() => LibNavigation.navigate('lib/gallery', { images: getResult()?.images_artist, index: i })}>
        <LibPicture source={{ uri: item.image }} style={styleId_Z1ecB7O} />
      </TouchableOpacity>
    )
  }

  const maxDisplay = 3;
  const handleShowAll = (price_id: any) => {
    setShowAll((prevShowAll: any) => ({
      ...prevShowAll,
      [price_id]: !prevShowAll[price_id],
    }));
  };

  return (
    <EventQueue event_id={result?.event_id}>
      <View style={{ flex: 1 }} >
        <EventHeader title={esp.lang("event/artist_detail", "title")} subtitle={result?.title} />
        <LibScroll onRefresh={loadResult}>
          {
            result && result?.images_artist && result?.images_artist?.length > 0 ?
              <LibCarrousel
                delay={3000}
                style={{ height: bgHeight, width: LibStyle.width }}
                autoplay
                bullets
                bulletStyle={{ width: 7, height: 7, backgroundColor: "#fff", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
                chosenBulletStyle={{ width: 7, height: 7, backgroundColor: "#f4e31b", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
                bulletsContainerStyle={{ marginBottom: -10 }}>
                {
                  result?.images_artist && result?.images_artist?.map(renderImages)
                }
              </LibCarrousel>
              :
              <Pressable onPress={() => LibNavigation.navigate('lib/gallery', { image: result?.image_artist })} >
                <LibPicture
                  style={applyStyle({ height: LibStyle.width * 9 / 16, width: LibStyle.width, backgroundColor: '#f2f3f4' })}
                  source={{ uri: result?.image_artist }} />
              </Pressable>
          }
          <View style={applyStyle({ marginTop: 10, marginLeft: 17, flexDirection: 'row' })}>
            {
              share.map(renderShare)
            }
          </View>
          <Text allowFontScaling={false} style={applyStyle({ marginBottom: 12, marginLeft: 17, fontFamily: "Arial", marginTop: 20, fontSize: 26, fontWeight: "bold", fontStyle: "normal", lineHeight: 30, letterSpacing: 0, color: "#000" })}>{result?.title}</Text>
          {/* {
          data && priceList?.map?.(renderPrieList)
        } */}
          {
            result?.description != "" &&
            <ScrollView>
              <LibWebview onFinishLoad={() => { }} source={{ html: getResult()?.description }} />
            </ScrollView>
          }
          {
            result && result?.youtube != "" &&
            <>
              <Text allowFontScaling={false} style={applyStyle({ marginHorizontal: 20, marginTop: 10, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" })} >{esp.lang("event/artist_detail", "video")}</Text>
              <TouchableOpacity onPress={() => LibNavigation.navigate('lib/video', { code: getResult()?.youtube })} >
                <LibPicture source={{ uri: LibVideoProperty.getUrlThumbnail(getResult()?.youtube) }} style={applyStyle({ height: LibStyle.width * 9 / 16, width: LibStyle.width - 40, marginHorizontal: 20, resizeMode: 'cover' })} />
              </TouchableOpacity>
            </>
          }
        </LibScroll>
        <View style={applyStyle({ flexDirection: 'row', padding: 10, backgroundColor: 'white' })} >

          {
            result?.book_available == 1 ?
              <EventButton label={esp.lang("event/artist_detail", "buy_ticket")} onPress={() => {
                EventIndexProperty.isLogin(() => {
                  showSchedule.current?.show()
                })
              }} style={applyStyle({ backgroundColor: LibStyle.colorGreen })} />
              :
              <View style={applyStyle({ flex: 1, height: 35, borderRadius: 17, backgroundColor: LibStyle.colorLightGrey, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 })} >
                <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: 'black', marginRight: 10, marginLeft: 10 })} >{esp.lang("event/artist_detail", "book_available", moment(startBooking).serverFormat("DD MMMM YYYY HH:mm:ss"))}</Text>
              </View>
          }
        </View>

        <LibSlidingup ref={showSchedule}>
          <View style={applyStyle({ backgroundColor: 'white', borderTopRightRadius: 30, borderTopLeftRadius: 30, paddingTop: 15, maxHeight: LibStyle.height - (LibStyle.height / 3) })}>
            <Text allowFontScaling={false} style={applyStyle({ marginBottom: 15, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" })}>{esp.lang("event/artist_detail", "select_date")}</Text>
            <ScrollView showsVerticalScrollIndicator={false} >
              {
                priceList?.length > 0 && sortByStatus(priceList)?.map((item: any, i: number) => {
                  let filterFullData = priceList?.filter((it: any) => it.status != 0)
                  const displayedData = showAll[item.price_id] ? item?.list : item?.list.slice(0, maxDisplay);

                  let textOpacity = item?.status == 1 ? 1 : 0.3
                  let selTic = item.price_id == selectedTicket?.price_id
                  let ticketWithDate = item.price_date == 1 && item.use_code == 0
                  return (
                    <Pressable onPress={() => {

                    }} key={i} style={{ overflow: 'hidden', margin: 15, marginBottom: 5, backgroundColor: '#fff', borderRadius: 10, ...LibStyle.elevation(2), borderWidth: 1, borderColor: selTic ? LibStyle.colorBlue : LibStyle.colorBgGrey }}>
                      <View style={{ padding: 10, backgroundColor: '#f1f2f3', borderTopLeftRadius: 10, borderTopRightRadius: 10 }}>
                        {
                          item?.hasOwnProperty('label') && (item?.label != "" && item?.label != null) &&
                          <View style={applyStyle({ flexDirection: 'row' })}>
                            <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: item?.label_color, borderColor: item?.label_color, borderRadius: 3, padding: 2, paddingHorizontal: 5, opacity: 1 })}>
                              <Text allowFontScaling={false} style={{ fontSize: 10, fontStyle: "normal", letterSpacing: 0.5, color: EventOrder_itemProperty.textColor(item?.label_color), fontWeight: 'bold' }}>{item?.label}</Text>
                            </View>
                          </View>
                        }
                        <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', }}>
                          <View style={{ flex: 5 }}>
                            <EventHtmltext allowFontScaling={false} style={{ flexWrap: 'wrap', opacity: textOpacity, fontWeight: 'bold' }}>{item.type}</EventHtmltext>
                          </View>
                          {
                            item.qty_min > 1 &&
                            <Text style={{ flex: 1, color: LibStyle.colorRed, textAlign: 'right', fontSize: 10, fontWeight: 'normal' }}> {"(" + esp.lang("event/ticket_list", "min_order") + LibUtils.number(item.qty_min) + ")"}</Text>
                          }
                          {
                            item?.status != 1 &&
                            <View style={applyStyle({ marginLeft: 10, flexDirection: 'row' })}>
                              <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: item?.status == 0 ? LibStyle.colorRed : "#4cd964", borderColor: item?.status == 0 ? LibStyle.colorRed : "#4cd964", borderRadius: 5, padding: 3, opacity: 0.8 })}>
                                <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: /* item?.status == 2 ? "#000" : */ "#fff", fontWeight: 'bold' })}>{item?.status == 0 ? esp.lang("event/artist_detail", "sold_out") : esp.lang("event/artist_detail", "coming_soon")}</Text>
                              </View>
                            </View>
                          }
                        </View>
                        {
                          item.info != "" && ticketWithDate &&
                          <View style={{ marginTop: 3, alignContent: 'center', alignItems: 'center', flexDirection: 'row', marginRight: 5 }}>
                            <Text allowFontScaling={false} style={{ fontSize: 12, color: LibStyle.colorBlue }}>{item.info}</Text>
                          </View>
                        }
                      </View>
                      {
                        displayedData?.map((itemT: any, iT: number) => renderItem(item, itemT, iT))
                      }

                      {
                        filterFullData?.[i]?.list?.length > 3 &&
                        <TouchableOpacity onPress={() => {
                          handleShowAll(item.price_id)
                        }} style={{ borderTopColor: LibStyle.colorGrey, borderTopWidth: 0.8, flex: 1, padding: 8, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
                          <Text allowFontScaling={false} style={{ marginRight: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue }}>{showAll[item.price_id] ? esp.lang("event/ticket_list", "see_less") : esp.lang("event/ticket_list", "see_more")}</Text>
                          <LibIcon name={showAll[item.price_id] ? 'chevron-up-circle-outline' : 'chevron-down-circle-outline'} color={LibStyle.colorBlue} size={18} />
                        </TouchableOpacity>
                      }

                    </Pressable>
                  )
                })
              }
            </ScrollView>
            <View style={applyStyle({ paddingVertical: 10 })} >
              {
                result?.price_type_info != "" &&
                <Text allowFontScaling={false} style={applyStyle({ marginLeft: 15, marginBottom: 10, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue })} >{result?.hasOwnProperty("price_type_info") && result?.price_type_info}</Text>
              }
              {
                result?.book_available == 1 ?
                  <>
                    {
                      result?.book_available == 0 && result.end_booking <= date && result.end_booking != '0000-00-00 00:00:00' ?
                        <View style={applyStyle({ flex: 1, height: 35, borderRadius: 17, backgroundColor: LibStyle.colorLightGrey, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 })} >
                          <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: 'black', marginHorizontal: 10 })} >{esp.lang("event/artist_detail", "booking_end")}</Text>
                        </View>
                        :
                        <>
                          {
                            loading ?
                              <View style={{ minWidth: '100%', alignSelf: 'center' }}  >
                                <View style={{ borderWidth: 1, borderColor: 'rgba(0, 0, 0, 0)', height: 40, borderRadius: 16, backgroundColor: "#e6e6e6", alignItems: 'center', justifyContent: 'center', paddingHorizontal: 9 }} >
                                  <ActivityIndicator size={"small"} color={LibStyle.colorPrimary} />
                                </View>
                              </View>
                              :
                              <EventButton label={esp.lang("event/artist_detail", "buy_ticket")} onPress={() => {
                                EventIndexProperty.isLogin(() => {
                                  proceedToPayment()
                                })
                              }} style={{ backgroundColor: LibStyle.colorGreen, marginTop: 2, marginHorizontal: 15 }} />
                          }
                        </>
                    }
                  </>
                  :
                  <View style={applyStyle({ flex: 1, height: 35, borderRadius: 17, backgroundColor: LibStyle.colorLightGrey, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 })} >
                    <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: 'black', marginHorizontal: 10 })} >{esp.lang("event/artist_detail", "booking_on", moment(result?.start_booking).serverFormat('DD MMMM YYYY HH:mm '))}</Text>
                  </View>
              }
            </View>
          </View>
        </LibSlidingup>

      </View>
    </EventQueue>
  )
}