// withHooks
import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibVideoProperty } from 'esoftplay/cache/lib/video/import';
import { LibWebview } from 'esoftplay/cache/lib/webview/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface EventScheduleArgs {

}
export interface EventScheduleProps {

}
export default function m(props: EventScheduleProps): any {
  const { schedule, dataBookingEvent, order_type, tax } = LibNavigation.getArgsAll(props)
  const [qty, setQty] = useSafeState<number>(dataBookingEvent?.qty)

  function add(quota?: any, quota_used?: any): void {
    if (qty != parseInt(dataBookingEvent?.selected_ticket?.qty_max)) {
      if (qty != (parseInt(quota) - parseInt(quota_used))) {
        setQty(qty + 1)
      }
    }
  }

  function min(): void {
    if (qty <= dataBookingEvent?.selected_ticket?.qty_min) {
      setQty(Number(dataBookingEvent?.selected_ticket?.qty_min))
    } else {
      setQty(Math.max(1, qty - 1))
    }
  }

  function doBooking() {
    dataBookingEvent.qty = qty
    if (dataBookingEvent?.selected_ticket?.use_seat == 1) {
      LibNavigation.navigateForResult('event/seat', {
        url: 'event_seat',
        dataTicket: dataBookingEvent,
      }).then((value) => {
        dataBookingEvent.row_id = value.row_id
        dataBookingEvent.column_id = value.column_id
        dataBookingEvent.seat_name = value.seat_name

        LibNavigation.navigate('payment/ticket', {
          order_type: order_type,
          tax: tax,
          dataBookingEvent: { ...dataBookingEvent, qty: qty },
        })
      })
    } else {
      LibNavigation.navigate('payment/ticket', {
        order_type: order_type,
        tax: tax,
        dataBookingEvent: { ...dataBookingEvent, qty: qty },
      })
    }
  }

  function renderArtist(_item: any, i: number) {
    const styleId_15Un4S: any = { height: LibStyle.width * 9 / 16, width: LibStyle.width, marginTop: -15, marginLeft: -15, resizeMode: 'cover' }
    return (
      <View key={i} style={styleId_26m88j}>
        {
          _item.image != "" &&
          <LibPicture source={{ uri: _item.image }} style={styleId_15Un4S} />
        }
        <Text allowFontScaling={false} style={styleId_XKKqU}>{_item.name}</Text>
        <ScrollView>
          {
            _item.description != "" &&
            <LibWebview source={{ html: _item.description }} onFinishLoad={() => { }} style={styleId_ZoKh7U} />
          }
        </ScrollView>
        {
          _item?.video != "" &&
          <>
            <Text allowFontScaling={false} style={styleId_Z1RMsb6} >{esp.lang("event/schedule", "text_vide")}</Text>
            <TouchableOpacity onPress={() => LibNavigation.navigate('lib/video', { code: _item.video })} >
              <LibPicture source={{ uri: LibVideoProperty.getUrlThumbnail(_item.video) }} style={styleId_1g6pcd} />
            </TouchableOpacity>
          </>
        }
      </View>
    )
  }

  let item = dataBookingEvent?.selected_ticket?.list

  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <EventHeader title={esp.lang("event/schedule", "header_title")} />
      <ScrollView>
        {
          schedule?.artist.length > 0 && schedule.artist.map(renderArtist)
        }


      </ScrollView>
      <View style={{ padding: 10 }} >
        <View style={{ flexDirection: 'row', marginVertical: 10, alignContent: 'center', alignItems: 'center', alignSelf: '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: 15, marginRight: 15 }}>{qty}</Text>
          <TouchableOpacity onPress={() => { add(item?.quota, item?.quota_used) }}>
            <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/schedule", "next")} onPress={() => {
          doBooking()
        }} style={{ backgroundColor: LibStyle.colorGreen }} />
      </View>
    </View>
  )
}
const styleId_26m88j: any = { margin: 15 }
const styleId_XKKqU: any = { marginTop: 10, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, marginBottom: 7 }
const styleId_ZoKh7U: any = { marginLeft: -20 }
const styleId_Z1RMsb6: any = { marginLeft: 0, marginHorizontal: 20, marginTop: 10, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" }
const styleId_1g6pcd: any = { height: LibStyle.width * 9 / 16, width: LibStyle.width - 30, marginLeft: 0, marginHorizontal: 20, resizeMode: 'cover' }