// withHooks
import { useEffect } from 'react';

import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibCurl_view } from 'esoftplay/cache/lib/curl_view/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/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 { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { UseCondition } from 'esoftplay/cache/use/condition/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';
import React from 'react';
import { Pressable, RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface EventTms_check_ticket_resultArgs {

}
export interface EventTms_check_ticket_resultProps {

}
export default function m(props: EventTms_check_ticket_resultProps): any {
  const { qr, event_id, selectGate } = LibNavigation.getArgsAll(props)
  const [data, setData] = useSafeState<any>()
  const [refreshing, setRefreshing] = useSafeState<boolean>(false);

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

  function loadData() {
    var post = {
      user_qr: encodeURIComponent(qr),
      event_id: event_id,
      gate_id: selectGate?.id
    }
    LibProgress.show(esp.lang("event/visitor_index", "waiting_msg"))
    new LibCurl('event_tms_check', post, (res, msg) => {
      // esp.log(res);
      let a = res?.bookings?.map((item: any) => ({
        ...item,
        show_history_ticket: false,
        show_history_hall: false,
        show_history_share: false,
        show_additional_info: false
      }))
      let b = {
        ...res,
        bookings: a
      }
      esp.log(b);
      setData(b)
      setRefreshing(false)
      LibProgress.hide();
    }, (error) => {
      LibProgress.hide();
      setRefreshing(false)
      LibDialog.warningConfirm(esp.lang("event/tms_check_ticket_result", "error"), error?.message, esp.lang("event/tms_check_ticket_result", "back"), () => LibNavigation.back(), "", () => { })
    }, 1)
  }

  function onRefresh() {
    setRefreshing(true)
    loadData()
  }

  function renderTmsIn(item: any, i: number) {
    let timeScannedIn = LibUtils.moment(item.scanned_in).serverFormat("DD MMM HH:mm:ss ", item.timezone)
    let timezone = item.hasOwnProperty("timezone_locale") ? item?.timezone_locale : ""
    return (
      <View key={i} style={{ borderRadius: 5, margin: 2, padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
        {
          item.tms_name != "" &&
          <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item.tms_name}</Text>
        }
        <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item?.scanned_in != "0000-00-00 00:00:00" ?
          timeScannedIn + timezone
          :
          esp.lang("event/tms_check_ticket_result", "not_scan_in")}</Text>

      </View>
    )
  }

  function renderTmsOut(item: any, i: number) {
    let timeScannedOut = LibUtils.moment(item.scanned_out).serverFormat("DD MMM HH:mm:ss ", item.timezone)
    let timezone = item.hasOwnProperty("timezone_locale") ? item?.timezone_locale : ""

    return (
      <View key={i} style={{ borderRadius: 5, margin: 2, padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
        {
          item.tms_name_out != null && item.tms_name_out != "" &&
          <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item.tms_name_out}</Text>
        }
        <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item?.scanned_out != "0000-00-00 00:00:00" ?
          timeScannedOut + timezone
          :
          esp.lang("event/tms_check_ticket_result", "not_scan_out")}</Text>
      </View>
    )
  }

  function renderTempOut(item: any, i: number) {
    let timeScannedTempOut = LibUtils.moment(item.scanned_out_temporary).serverFormat("DD MMM HH:mm:ss ", item.timezone)
    let timezone = item.hasOwnProperty("timezone_locale") ? item?.timezone_locale : ""

    return (
      <View key={i} style={{ borderRadius: 5, margin: 2, padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
        <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item.hasOwnProperty("scanned_out_temporary") && item?.scanned_out_temporary != "0000-00-00 00:00:00" ?
          timeScannedTempOut + timezone
          :
          esp.lang("event/tms_check_ticket_result", "notyet_scan_temp_out")}</Text>
      </View>
    )
  }

  function renderGate(item: any, i: number) {
    return (
      <View key={i} style={{ borderRadius: 5, margin: 2, padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
        <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item?.gate_name == "" ? "-" : item.gate_name}</Text>
      </View>
    )
  }

  function renderHallIn(item: any, i: number) {
    let timeScannedIn = LibUtils.moment(item.scanned_in).serverFormat("DD MMM HH:mm:ss ", item.timezone)
    let timezone = item.hasOwnProperty("timezone_locale") ? item?.timezone_locale : ""

    return (
      <View key={i} style={{ borderRadius: 5, margin: 2, padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
        {
          item.tms_name != "" &&
          <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item.tms_name}</Text>
        }
        <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item?.scanned_in != "0000-00-00 00:00:00" ?
          timeScannedIn + timezone
          :
          esp.lang("event/tms_check_ticket_result", "not_scan_in")}</Text>

      </View>
    )
  }

  function renderHallOut(item: any, i: number) {
    let timeScannedOut = LibUtils.moment(item.scanned_out).serverFormat("DD MMM HH:mm:ss ", item.timezone)
    let timezone = item.hasOwnProperty("timezone_locale") ? item?.timezone_locale : ""

    return (
      <View key={i} style={{ borderRadius: 5, margin: 2, padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
        {
          item.tms_name_out != "" &&
          <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item.tms_name_out}</Text>
        }
        <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item?.scanned_out != "0000-00-00 00:00:00" ?
          timeScannedOut + timezone
          :
          esp.lang("event/tms_check_ticket_result", "not_scan_out")}</Text>

      </View>
    )
  }

  function renderHall(item: any, i: number) {
    return (
      <View key={i} style={{ borderRadius: 5, margin: 2, padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
        <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item?.hall_name == "" ? "-" : item.hall_name}</Text>
      </View>
    )
  }

  function renderShared(item: any, i: number) {
    return (
      <View key={i} style={{ borderRadius: 5, margin: 2, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
        <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ flex: 1, paddingHorizontal: 5, fontSize: 14 }}>{item.email}</Text>
        <View style={{ width: 1, height: 15, backgroundColor: LibStyle.colorBrownLight }} />
        <Text allowFontScaling={false} style={{ textAlign: 'center', flex: 1, paddingHorizontal: 5, fontSize: 14 }}>{LibUtils.number(item?.qty)}</Text>
      </View>
    )
  }

  function resetTicket(url: string) {
    LibDialog.confirm(esp.lang("event/tms_check_ticket_result", "title"), esp.lang("event/tms_check_ticket_result", "message"), esp.lang("event/tms_check_ticket_result", "confirm"), () => {
      LibProgress.show(esp.lang("event/visitor_index", "waiting_msg"))
      new LibCurl().custom(url + "&t=" + new Date().getTime(), null, (res, msg) => {
        LibProgress.hide()
        if (res?.ok == 1) {
          LibDialog.confirm(esp.lang("event/tms_check_ticket_result", "info"), res?.message, "Ok", () => {
            LibNavigation.back()
          }, "", () => { })
        } else if (res?.ok == 0) {
          LibDialog.warning(esp.lang("event/tms_check_ticket_result", "error_reset"), res?.message)
        }

      }, 1)
    }, esp.lang("event/tms_check_ticket_result", "cancel"), () => { })
  }

  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <EventHeader title={qr} subtitle={data ? data?.event_name : ''} />
      <ScrollView refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>
        {
          data?.bookings?.length > 0 && data?.bookings?.map((item: any, i: number) => {
            return (
              <View key={i} style={{ margin: 10, marginBottom: 0, backgroundColor: LibStyle.colorBgGrey, borderRadius: 10, padding: 10 }}>
                {/* header */}
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
                  <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ fontSize: 16, fontWeight: 'bold', flex: 1 }}>{item?.tickets?.[0]?.price_name || item?.price_name}</Text>
                  {
                    data?.allowed_reset == 1 && item?.qty_used > 0 &&
                    <Pressable onPress={() => { resetTicket(item?.reset) }} style={{ ...LibStyle.elevation(3), justifyContent: 'center', marginLeft: 10, paddingVertical: 5, paddingHorizontal: 10, backgroundColor: LibStyle.colorRed, borderRadius: 5 }}>
                      <Text allowFontScaling={false} style={{ fontWeight: 'bold', color: '#fff' }}>{esp.lang("event/tms_check_ticket_result", "reset")}</Text>
                    </Pressable>
                  }
                </View>

                <View style={{ marginTop: 10, backgroundColor: '#fff', borderRadius: 10, paddingHorizontal: 10 }}>
                  <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
                    <Text allowFontScaling={false} style={{ fontSize: 14 }}>{item?.code}</Text>

                    <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
                      <Text allowFontScaling={false} style={{ marginLeft: 20, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{"("}</Text>
                      <Text allowFontScaling={false} style={{ marginLeft: 4, fontSize: 30, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{item?.qty}</Text>
                      <Text allowFontScaling={false} style={{ marginLeft: 4, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{esp.lang("event/tms_check_ticket_result", "ticket")}{")"}</Text>
                    </View>
                  </View>

                  <UseCondition if={Boolean(item?.exhibitor?.title)} >
                    <Text allowFontScaling={false} style={{ fontSize: 12 }}>Exhibitor : {item?.exhibitor?.title}</Text>
                  </UseCondition>
                  <UseCondition if={Boolean(item?.exhibitor?.code)} >
                    <Text allowFontScaling={false} style={{ fontSize: 10 }}>CODE : {item?.exhibitor?.code}</Text>
                  </UseCondition>

                  <View style={{ flexDirection: 'row', alignItems: 'center', alignContent: 'center', marginTop: 5, marginBottom: 10 }}>
                    <LibIcon name='calendar-blank' size={18} style={{ marginRight: 5 }} />
                    {
                      item?.ondate == "0000-00-00" ?
                        <Text allowFontScaling={false} style={{ fontSize: 14 }}>{esp.lang("event/tms_check_ticket_result", "all_date")}</Text>
                        :
                        <Text allowFontScaling={false} style={{ fontSize: 14 }}>{LibUtils.moment(item?.ondate).localeFormat('DD MMMM YYYY')}</Text>
                    }
                  </View>
                  <View style={{ marginBottom: 10, flexDirection: 'row', flexWrap: 'wrap' }}>
                    {
                      item?.tickets?.map((x: any, i: number) => {
                        const [front, end] = x?.seat_label?.split("#") || ["", ""];
                        if (x.seat_label != "") {
                          if (x?.seat_label?.includes("#")) {
                            return (
                              <View key={i} style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 5, marginBottom: 7, paddingHorizontal: 5, backgroundColor: '#fff', borderRadius: 5, marginRight: 7, ...LibStyle.elevation(5), }}>
                                <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 16, color: "#000" }}> {front} </Text>
                                <Text allowFontScaling={false} style={{ marginLeft: 3, fontWeight: 'bold', fontSize: 16, color: '#000', }}> {end} </Text>
                              </View>
                            )
                          } else {
                            return (
                              <View key={i} style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 5, marginBottom: 7, paddingHorizontal: 5, backgroundColor: '#fff', borderRadius: 5, marginRight: 7, ...LibStyle.elevation(5), }}>
                                <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 16, color: "#000" }}>{x?.seat_label}</Text>
                              </View>
                            )
                          }
                        } else {
                          return null
                        }
                      })
                    }
                  </View>
                  <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: 'bold', color: item.is_available == 0 ? LibStyle.colorRed : LibStyle.colorGreen }}>{item.is_available == 0 ? "Not Available" : "Available"}</Text>
                  <View style={{ marginBottom: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
                      <TouchableOpacity onPress={() => {
                        setData(LibObject.set(data, item.show_history_ticket ? false : true)("bookings", i, "show_history_ticket"))
                      }} style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
                        <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: item?.qty_used == 0 ? "#484848" : LibStyle.colorBlue, textDecorationStyle: 'solid', textDecorationLine: item?.qty_used == 0 ? "none" : 'underline' }}>{item?.qty_used == 0 ? esp.lang("event/order", "have_not_been_used") : item?.qty_used + " " + esp.lang("event/order_detail", "used")}</Text>
                      </TouchableOpacity>
                      {
                        item?.tickets_share?.length > 0 &&
                        <TouchableOpacity onPress={() => {
                          setData(LibObject.set(data, item.show_history_share ? false : true)("bookings", i, "show_history_share"))
                        }}>
                          <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue, textDecorationStyle: 'solid', textDecorationLine: 'underline' }}>{item?.tickets_share.reduce((acc: any, { qty = 0 }: any) => acc + qty, 0) + " Tiket dishare"}</Text>
                        </TouchableOpacity>
                      }
                    </View>
                  </View>

                </View>

                <View style={{ marginTop: 10, backgroundColor: '#fff', borderRadius: 10, paddingHorizontal: 10, padding: 10, }}>
                  <TouchableOpacity onPress={() => setData(LibObject.set(data, item.show_additional_info ? false : true)("bookings", i, "show_additional_info"))} style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
                    <Text allowFontScaling={false} style={{ fontSize: 14 }}>{"Additional Info"}</Text>
                    <LibIcon name={item?.show_additional_info ? 'chevron-up' : 'chevron-down'} />
                  </TouchableOpacity >
                  {
                    item.show_additional_info &&
                    <LibCurl_view
                      url='event_tms_check_additional'
                      post={{
                        event_id: event_id,
                        code: item.code
                      }}
                      onSuccess={(res, msg) => {
                        return (
                          <View>
                            {
                              res?.map((item: any, i: number) => {
                                return (
                                  <View key={i} style={{ marginTop: 7, paddingHorizontal: 10, paddingVertical: 5, borderRadius: 5, backgroundColor: LibStyle.colorBgGrey }}>
                                    <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ fontSize: 14, color: "#009688", fontWeight: 'bold', letterSpacing: 0.5, marginBottom: 5 }}>{item.question}</Text>
                                    <Text allowFontScaling={false} style={{ fontSize: 12, color: '#000', marginRight: 6 }}>{item.answer}</Text>
                                  </View>
                                )
                              })
                            }
                          </View>
                        )
                      }}
                      onLoading={<LibLoading />}
                      onError={(err: any) => {
                        return (
                          <View style={{ justifyContent: 'center', alignItems: 'center', padding: 10 }}>
                            <LibPicture source={esp.assets('img_failed_msg.png')} style={{ width: LibStyle.width / 3, height: 100, resizeMode: 'contain' }} />
                            <Text allowFontScaling={false} style={{ flexWrap: 'wrap', fontSize: 14, fontWeight: "bold", marginBottom: 5, color: "#4a4a4a", textAlign: "center" }}>{err?.message}</Text>
                          </View>
                          // <EventMessage message={err?.message}  />
                        )
                      }}
                    />
                  }
                </View>

                <View style={{ marginTop: 10, backgroundColor: '#fff', borderRadius: 10, paddingHorizontal: 10, padding: 10, }}>
                  <TouchableOpacity onPress={() => setData(LibObject.set(data, item.show_history_ticket ? false : true)("bookings", i, "show_history_ticket"))} style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
                    <Text allowFontScaling={false} style={{ fontSize: 14 }}>{esp.lang("event/tms_check_ticket_result", "history_ticket")}</Text>
                    <LibIcon name={item?.show_history_ticket ? 'chevron-up' : 'chevron-down'} />
                  </TouchableOpacity >
                  {
                    item.show_history_ticket &&
                    <View style={{ marginTop: 10, }}>
                      <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#37c2d0", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
                        <Text allowFontScaling={false} style={{ marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "tms_in")}</Text>
                        {item?.tickets?.map(renderTmsIn)}
                      </View>
                      <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#37c2d0", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
                        <Text allowFontScaling={false} style={{ marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "tms_out")}</Text>
                        {item?.tickets?.map(renderTmsOut)}
                      </View>

                      <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#37c2d0", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
                        <Text allowFontScaling={false} style={{ marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "scan_temp_out")}</Text>
                        {item?.tickets?.map(renderTempOut)}
                      </View>
                      <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#37c2d0", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
                        <Text allowFontScaling={false} style={{ marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "gate_title")}</Text>
                        {item?.tickets?.map(renderGate)}
                      </View>
                    </View>
                  }
                </View>

                {
                  item.hall_history?.length > 0 &&
                  <View style={{ marginTop: 10, backgroundColor: '#fff', borderRadius: 10, paddingHorizontal: 10, padding: 10, }}>
                    <TouchableOpacity onPress={() => setData(LibObject.set(data, item.show_history_hall ? false : true)("bookings", i, "show_history_hall"))} style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
                      <Text allowFontScaling={false} style={{ fontSize: 14 }}>{esp.lang("event/tms_check_ticket_result", "history_hall")}</Text>
                      <LibIcon name={item.show_history_hall ? 'chevron-up' : 'chevron-down'} />
                    </TouchableOpacity >
                    {
                      item.show_history_hall &&
                      <View style={{ marginTop: 10, }}>
                        <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#FFC523", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
                          <Text allowFontScaling={false} style={{ marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "hall_in")}</Text>
                          {item?.hall_history?.map(renderHallIn)}
                        </View>
                        <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#FFC523", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
                          <Text allowFontScaling={false} style={{ marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "hall_out")}</Text>
                          {item?.hall_history?.map(renderHallOut)}
                        </View>
                        <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#FFC523", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
                          <Text allowFontScaling={false} style={{ marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "hall")}</Text>
                          {item?.hall_history?.map(renderHall)}
                        </View>
                      </View>
                    }
                  </View>
                }
                {
                  item?.tickets_share?.length > 0 &&
                  <View style={{ marginTop: 10, backgroundColor: '#fff', borderRadius: 10, paddingHorizontal: 10, padding: 10, }}>
                    <TouchableOpacity onPress={() => setData(LibObject.set(data, item.show_history_share ? false : true)("bookings", i, "show_history_share"))} style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
                      <Text allowFontScaling={false} style={{ fontSize: 14 }}>{esp.lang("event/tms_check_ticket_result", "history_share_ticket")}</Text>
                      <LibIcon name={item.show_history_share ? 'chevron-up' : 'chevron-down'} />
                    </TouchableOpacity >
                    {
                      item.show_history_share &&
                      <View style={{ marginTop: 10, }}>
                        <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#007BFF", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
                          <Text allowFontScaling={false} style={{ color: '#fff', marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "shared_to")}</Text>
                          {item?.tickets_share?.map(renderShared)}
                        </View>
                      </View>
                    }
                  </View>
                }

              </View>
            )
          })
        }

      </ScrollView>
    </View>
  )
}