// withHooks
import { applyStyle } from 'esoftplay';
import { EventList_filter } from 'esoftplay/cache/event/list_filter/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
import { LibStatusbar } from 'esoftplay/cache/lib/statusbar/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

import { EventList_item } from 'esoftplay/cache/event/list_item/import';
import { EventList_item2 } from 'esoftplay/cache/event/list_item2/import';
import { EventMessage } from 'esoftplay/cache/event/message/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import moment from 'esoftplay/moment';
import React, { useRef } from 'react';
import { Pressable, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';


export interface EventListProps {

}
export interface EventListArgs {
  url?: string,
  cat_id?: string,
  keywords?: string
}
export default function m(props: EventListProps): any {
  const { url, cat_id, keywords } = LibNavigation.getArgsAll(props)
  const [viewType, setViewType] = useSafeState<number>(1)
  const [location, setLocation] = useSafeState<any>(undefined)
  const [ondate, setOndate] = useSafeState<any>(undefined)
  const [category, setCategory] = useSafeState<any>(cat_id || undefined)
  const [query, setQuery] = useSafeState<string>(keywords || '')
  const inputSearch = useRef<TextInput>(null)
  let keyword = useRef<string>('').current
  let filterDialog = React.useRef<LibSlidingup>(null)

  function buildUrl(url: string) {
    if (query) {
      url += url.includes('?') ? '&' : '?'
      url += 'keyword=' + query
    }
    if (category) {
      url += url.includes('?') ? '&' : '?'
      url += 'cat_id=' + category
    }
    if (location) {
      url += url.includes('?') ? '&' : '?'
      url += 'location_id=' + location.id
    }
    if (ondate) {
      url += url.includes('?') ? '&' : '?'
      url += 'ondate=' + ondate
    }
    return url
  }

  function renderItem(item: any) {
    return (
      <View>
        {
          viewType == 1 ?
            <View style={{ width: LibStyle.width }} >
              <EventList_item2 {...item} onPress={() => LibNavigation.navigate('event/detail', { url: item.url })} />
            </View>
            :
            <EventList_item {...item} style={{ width: (LibStyle.width * 0.5) - 32, marginRight: 0, marginHorizontal: 20, marginVertical: 10 }} onPress={() => LibNavigation.navigate('event/detail', { url: item.url })} />
        }
      </View>
    )
  }

  return (
    <View style={{ flex: 1 }} >
      <LibStatusbar style="dark" />
      <View style={[{ flexDirection: 'row', backgroundColor: 'white', padding: 15, paddingVertical: 10, alignItems: 'center', paddingTop: LibStyle.STATUSBAR_HEIGHT + 17 }, LibStyle.elevation(2)]} >
        <Pressable hitSlop={{ top: 4, bottom: 4, left: 4, right: 4 }} onPress={() => LibNavigation.back()} >
          <LibPicture style={{ height: 27, width: 27 }} source={esp.assets('icons/ic_header_back.png')} />
        </Pressable>
        <View style={{ marginLeft: 15, borderRadius: 20, flexDirection: 'row', padding: 5, alignItems: 'center', backgroundColor: "#ffffff", borderStyle: "solid", borderWidth: 0.5, borderColor: "#c5c5c5", flex: 1, marginHorizontal: 12 }} >
          <LibPicture style={{ height: 15, width: 15, marginLeft: 6, marginRight: 6 }} source={esp.assets('icons/ic_search.png')} />
          <TextInput
            ref={inputSearch}
            style={{ fontFamily: "ArialBold", fontSize: 12, color: "#9e9e9e", flex: 1 }}
            placeholder={esp.lang("event/list", "find_event")}
            defaultValue={query}
            onChangeText={(t) => { keyword = t }}
            returnKeyType={'search'}
            returnKeyLabel={'Search'}
            placeholderTextColor={'#e5e5e5'}
            onSubmitEditing={() => setQuery(keyword)}
          />
          {
            query != '' &&
            <Pressable onPress={() => {
              inputSearch.current?.setNativeProps({ text: '' })
              setQuery('')
            }} style={{ marginRight: 6 }} >
              <LibIcon name='close' />
            </Pressable>
          }
        </View>
      </View>
      <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 3 }} >
        <ScrollView horizontal showsHorizontalScrollIndicator={false} >
          <TouchableOpacity onPress={() => filterDialog.current?.show()} >
            <View style={{ marginLeft: 17, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12, paddingVertical: 5, borderWidth: 1, borderColor: '#c5c5c5', borderRadius: 8 }} >
              <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", marginRight: 5, fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#f39c12" }} >{esp.lang("event/list", "text_filter")}</Text>
              <LibIcon name={'chevron-down'} size={18} color={'#9b9b9b'} />
            </View>
          </TouchableOpacity>
          {
            ondate &&
            <TouchableOpacity onPress={() => { setOndate(undefined) }} >
              <View style={{ marginLeft: 10, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12, paddingVertical: 5, borderWidth: 1, borderColor: '#c5c5c5', borderRadius: 8 }} >
                <Text allowFontScaling={false} style={{ fontFamily: "Arial", marginRight: 5, fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#f39c12" }} >{moment(ondate).localeFormat('DD MMMM YYYY')}</Text>
                <LibIcon name={'close'} size={18} color={'#9b9b9b'} />
              </View>
            </TouchableOpacity>
          }
          {
            location &&
            <TouchableOpacity onPress={() => { setLocation(undefined) }} >
              <View style={{ marginLeft: 10, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12, paddingVertical: 5, borderWidth: 1, borderColor: '#c5c5c5', borderRadius: 8 }} >
                <Text allowFontScaling={false} style={{ fontFamily: "Arial", marginRight: 5, fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#f39c12" }} >{location?.detail}</Text>
                <LibIcon name={'close'} size={18} color={'#9b9b9b'} />
              </View>
            </TouchableOpacity>
          }
        </ScrollView>
        <View style={{ flex: 1 }} />
        <TouchableOpacity onPress={() => setViewType(viewType == 1 ? 2 : 1)} >
          <LibPicture source={esp.assets(viewType == 2 ? 'icons/ic_product_list.png' : 'icons/ic_event_grid.png')} style={{ marginRight: 20, marginLeft: 10, width: 19, height: 19, resizeMode: 'contain', marginVertical: 16 }} />
        </TouchableOpacity>
      </View>
      <LibInfinite
        url={buildUrl(url)}
        key={buildUrl(url) + viewType.toString()}
        errorView={(err: any) => (
          <EventMessage message={err} />
        )}
        numColumns={viewType == 1 ? 1 : 2}
        renderItem={renderItem}
        LoadingView={
          <LibSkeleton backgroundStyle={{ height: LibStyle.height }}>
            {
              viewType == 1 ?
                <>
                  {
                    new Array(7).fill('').map((x: any, i: number) => (
                      <View key={i} style={applyStyle({ flexDirection: 'row', borderWidth: 1, borderRadius: 10, marginVertical: 10, marginHorizontal: 20, ...LibStyle.elevation(2) })} >
                        <View style={applyStyle({ width: 154, height: 140, borderBottomLeftRadius: 10, borderTopLeftRadius: 10, overflow: 'hidden' })} >
                          <View style={applyStyle({ height: 140, width: 154, backgroundColor: 'white' })} />
                        </View>
                        <View style={applyStyle({ flex: 1, padding: 12 })} >
                          <View style={{ width: '70%', height: 10, borderRadius: 10, backgroundColor: 'white' }} />
                          <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', marginTop: 6, marginBottom: 5 })} >
                            <LibIcon name="calendar" color={LibStyle.colorGreen} size={10} />
                            <View style={{ width: '60%', height: 10, borderRadius: 10, backgroundColor: 'white' }} />
                          </View>
                          <View style={{ width: '50%', height: 10, borderRadius: 10, backgroundColor: 'white', marginTop: 6 }} />
                          <View style={{ width: '100%', height: 10, borderRadius: 10, backgroundColor: 'white', marginTop: 10 }} />
                          <View style={{ width: '100%', height: 10, borderRadius: 10, backgroundColor: 'white', marginTop: 5 }} />
                          <View style={{ width: '100%', height: 10, borderRadius: 10, backgroundColor: 'white', marginTop: 5 }} />
                        </View>
                      </View>
                    ))
                  }
                </>
                :
                <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap' }}>
                  {
                    new Array(8).fill('').map((x: any, i: number) => (
                      <View style={{ width: (LibStyle.width * 0.5) - 32, borderRadius: 10, marginRight: 0, marginHorizontal: 20, marginVertical: 10, borderWidth: 1 }} >
                        <View style={applyStyle({ borderTopLeftRadius: 10, borderTopRightRadius: 10, overflow: 'hidden' })} >
                          <View style={applyStyle({ height: 100, width: '100%', backgroundColor: 'white' })} />
                        </View>
                        <View style={{ width: '60%', height: 10, borderRadius: 10, backgroundColor: 'white', marginTop: 6, marginHorizontal: 8 }} />
                        <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', marginTop: 6, paddingHorizontal: 8 })} >
                          <LibIcon name="calendar" color={LibStyle.colorGreen} size={10} />
                          <View style={{ width: '50%', height: 10, borderRadius: 10, backgroundColor: 'white', marginLeft: 5 }} />
                        </View>
                        <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', marginTop: 6, paddingHorizontal: 8, paddingBottom: 10 })} >
                          <View style={{ width: '50%', height: 10, borderRadius: 10, backgroundColor: 'white' }} />
                        </View>
                        <View style={applyStyle({ position: 'absolute', top: 12, right: 0, height: 17, borderTopLeftRadius: 10, paddingHorizontal: 5, alignItems: 'center', justifyContent: 'center', borderBottomLeftRadius: 10, backgroundColor: "rgba(0, 0, 0, 0.9)" })} >
                          <View style={{ width: '50%', height: 10, borderRadius: 10, backgroundColor: 'white' }} />
                        </View>
                      </View>
                    ))
                  }
                </View>

            }
          </LibSkeleton>
        }
      />
      <LibSlidingup ref={filterDialog} >
        <EventList_filter
          onFilterChange={(loc: any, ondt: string, cat: any) => {
            setLocation(loc)
            setOndate(ondt)
            setCategory(cat)
          }}
          onDismiss={() => { filterDialog?.current?.hide() }}
          ondate={ondate}
          category={category}
          location={location}
        />
      </LibSlidingup>
    </View>
  )
}