// withHooks
import { applyStyle } from 'esoftplay';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/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 { LibUtils } from 'esoftplay/cache/lib/utils/import';
import esp from 'esoftplay/esp';
import { useEffect } from 'react';

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


export interface EventTms_event_listProps {

}
export default function m(props: EventTms_event_listProps): any {
  const { data } = LibNavigation.getArgsAll(props)

  useEffect(() => {
    if (data?.length == 1) {
      LibNavigation.sendBackResult(data[0])
    }
    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
  }, [])

  function renderItem(item: any, i: number) {
    const widthImg = LibStyle?.width - 20
    const sliderHeight = widthImg / 1920 * 1080

    return (
      <TouchableOpacity onPress={() => {
        LibNavigation.sendBackResult(item)
      }} key={i} style={{ margin: 10, marginBottom: 0, backgroundColor: '#fff', borderRadius: 10 }}>
        <View style={{ ...LibStyle.elevation(2), backgroundColor: '#fff', borderRadius: 10 }}>
          <LibPicture source={{ uri: item.image }} style={{ width: widthImg, height: sliderHeight, borderRadius: 10 }} />
        </View>
        <View style={{ padding: 10 }}>
          <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={applyStyle({ fontSize: 18 })}>{item.name || ""}</Text>
          <Text allowFontScaling={false} style={applyStyle({ fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#f39c12" })} >{LibUtils.getDateRange(item.start_date, item.end_date, esp.lang("event/tms_event_list", "until"))}</Text>
        </View>
      </TouchableOpacity>
    )
  }

  if (data?.length == 0) {
    LibDialog.warning("Oops", "Daftar event kosong.")
    LibNavigation.back()
  } else if (data?.length == 1) {
    return (
      <LibLoading />
    )
  } else {
    return (
      <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
        <EventHeader title={esp.lang("event/tms_event_list", "title_list_event")} />
        <ScrollView showsVerticalScrollIndicator={false} >
          {/* untuk scanner */}
          {
            data?.map(renderItem)
          }
        </ScrollView>
      </View>
    )
  }
}