// withHooks

import { EventFirebase_socket } from 'esoftplay/cache/event/firebase_socket/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventIndexProperty } from 'esoftplay/cache/event/index/import';
import { EventMessage } from 'esoftplay/cache/event/message/import';
import { LibCarrousel } from 'esoftplay/cache/lib/carrousel/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibList } from 'esoftplay/cache/lib/list/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/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 { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import esp from 'esoftplay/esp';
import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';
import React, { useEffect } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


moment().locale('id')


export interface EventArtistv2Props {

}

export default function m(props: EventArtistv2Props): any {
  const [result, setResult] = useSafeState<any>()
  const [error, setError] = useSafeState<any>('')
  const { isInPricingQueueConfig } = EventFirebase_socket()

  const { title, has_addition } = LibNavigation.getArgsAll(props)
  const url = LibNavigation.getArgs(props, 'url', 'https://storage.googleapis.com/bbo-test-images/images/modules/api/event_artist/411.json')

  function loadData(): void {
    /* get detail event untuk dapat config antrian */

    // new LibCurl(url, null,
    new LibCurl('v2/event_artist&event_id=523', null,
      (res) => {
        setResult(res)
        esp.log(res);
      }, (err) => {
        setError(err?.message)
      }, 1)
  }

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

  const itemWidth = (LibStyle.width - 2)
  const itemHeight = itemWidth * 9 / 16

  let subs = {
    is_subscribed: result?.config?.is_subscribed,
    is_subscribed_default: result?.config?.is_subscribed_default,
    is_subscribed_label: result?.config?.is_subscribed_label
  }
  const width = LibStyle?.width
  const sliderHeight = 0.50 * width

  function renderIt(item: any, i: number) {
    const styleId_Z2g4Hs7: any = { backgroundColor: '#FFC523', width: itemWidth, height: itemHeight, margin: 0.5, justifyContent: 'center', alignItems: 'center' }
    let isNotAvailable = item?.status_error != ""
    const handlePress = () => {
      if (isNotAvailable) {
        LibToastProperty.show(esp.lang("event/artist", "ticket_not_available"));
      } else {
        EventIndexProperty.isLogin(async () => {
          // if (isInPricingQueueConfig(item.event_id)) {
          //   LibNavigation.navigateForResult('event/queue_pricing', {
          //     event_id: item?.event_id,
          //     autoPass: false,
          //   });
          // }
          // const expTimestamp = Date.now() + (Number(EventFirebase_socketProperty.eventQueueConfig.get(item?.event_id).time) * 1000);
          // EventCountdownProperty.countdownTime.set(expTimestamp)
          LibNavigation.navigate(
            item?.config?.multiprice == 1
              ? 'event/artist_detail_multi'
              :
              'event/artist_detailv2',
            { url: item.url, subscribed: subs }
          );
        });
      }
    };

    if (item?.images?.length > 1) {
      return (
        <LibCarrousel
          key={i}
          delay={4000}
          style={{ height: sliderHeight, width: width }}
          autoplay
        >
          {
            item?.images?.map((item1: any, ii: number) => {
              return (
                <TouchableOpacity key={ii} onPress={handlePress} >
                  <LibPicture key={ii} source={{ uri: item1 }} style={{ opacity: isNotAvailable ? 0.3 : 1, height: sliderHeight, width: width, resizeMode: 'cover', backgroundColor: "#f1f2f3" }} />
                </TouchableOpacity>
              )
            })
          }
        </LibCarrousel>
      )
    } else if (item?.images?.length == 1) {
      return (
        <TouchableOpacity key={i} onPress={handlePress} >
          <LibPicture style={{ opacity: isNotAvailable ? 0.3 : 1, height: sliderHeight, width: width, resizeMode: 'cover', backgroundColor: "#f1f2f3" }} source={{ uri: item.images[0] }} />
        </TouchableOpacity>
      )
    } else {
      return (
        <TouchableOpacity key={i} onPress={handlePress} style={styleId_Z2g4Hs7}>
          <Text allowFontScaling={false} numberOfLines={2} style={styleId_2cYE4h}>{item.title}</Text>
        </TouchableOpacity>
      )
    }
  }

  return (
    <View style={{ flex: 1, backgroundColor: 'white' }} >
      <EventHeader title={title ? title : result?.name} iconShare={result?.url_share_artist && result?.url_share_artist !== ""}
        onPressShare={() => {
          LibUtils.share(result?.url_share_artist)
        }} />
      {
        !result && !error ? <LibLoading /> :
          // <ScrollView>
          //   {
          //     result?.map(renderIt)
          //   }
          // </ScrollView>
          <LibList
            data={result?.list}
            // keyExtractor={(item) => item.id}
            onRefresh={loadData}
            staticHeight={itemHeight + 1}
            renderItem={renderIt}
            ListEmptyComponent={
              <EventMessage message={error} />
            }
          />
      }
    </View>
  )
}
const styleId_2cYE4h: any = { padding: 15, color: 'white', fontSize: 24 }