// withHooks
// noPage
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

import { EventExpander } from 'esoftplay/cache/event/expander/import';
import moment from 'esoftplay/moment';
import React, { useEffect } from 'react';
import { Pressable, Text, TouchableOpacity, View } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';

export interface EventList_filterProps {
  onDismiss: () => void,
  onFilterChange: (location: any, ondate: any, category: any) => void,
  location: any,
  ondate: string,
  category: string
}
moment().locale('id')

export default function m(props: EventList_filterProps): any {
  const [loc, setLoc] = useSafeState<any>(props.location)
  const [ondate, setOndate] = useSafeState<any>(props.ondate)
  const [allCat, setAllCat] = useSafeState<any>()
  const [catId, setCatId] = useSafeState(props.category || '')

  useEffect(() => {
    new LibCurl('event_category', null,
      (res, msg) => {
        setAllCat(res)
      }, (msg) => {

      }, 1)
  }, [])

  function reset(): void {
    setLoc(undefined)
    setOndate(undefined)
    setCatId('')
    props.onFilterChange(undefined, undefined, undefined)
    props.onDismiss()
  }

  function sendBack(): void {
    props.onFilterChange(loc, ondate, catId)
    props.onDismiss()
  }

  function renderAllCategory(item: any, i: number) {
    const styleId_Z1WaMUx: any = { backgroundColor: item.id == catId ? '#f39c12' : '#f1f2f3', paddingHorizontal: 20, paddingVertical: 6, margin: 2.5, borderRadius: 4 }
    const styleId_Z15cyGt: any = { color: item.id == catId ? 'white' : "#000" }
    return (
      <Pressable key={i}
        onPress={() => { setCatId(item.id) }}
        style={styleId_Z1WaMUx} >
        <LibTextstyle text={(item?.title)} textStyle="footnote" style={styleId_Z15cyGt} />
      </Pressable>
    )
  }

  return (
    <View style={{ backgroundColor: 'white', borderTopRightRadius: 20, borderTopLeftRadius: 20, paddingTop: 23, paddingBottom: 17, paddingHorizontal: 19, maxHeight: LibStyle.height * 0.5 }} >
      <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#34495e", marginBottom: 20 }} >{esp.lang("event/list_filter", "text_filter")}</Text>
      <ScrollView>
        <TouchableOpacity onPress={() => LibNavigation.navigateForResult('user/location').then((location) => { setLoc(location) })} >
          <View style={{ flexDirection: 'row', marginBottom: 20, alignItems: 'center' }} >
            <View style={{ flex: 1 }} >
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#00b894" }} >{esp.lang("event/list_filter", "event_location")}</Text>
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 11, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginTop: 3 }} >{loc && loc.detail || esp.lang("event/list_filter", "text_all_location")}</Text>
            </View>
            <LibIcon name={'chevron-right'} size={20} color={'#9b9b9b'} />
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => {
          LibNavigation.navigateForResult('event/date_picker', { ranged: 'notranged', minDate: new Date(), maxDate: moment().add(5, 'years').localeFormat('YYYY-MM-DD') }).then((item) => {
            setOndate(item?.date_start)
          })
        }}>
          <View style={{ flexDirection: 'row', marginBottom: 20, alignItems: 'center' }} >
            <View style={{ flex: 1 }} >
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#00b894" }} >{esp.lang("event/list_filter", "date")}</Text>
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 11, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginTop: 3 }} >{ondate && moment(ondate).localeFormat('DD MMMM YYYY') || esp.lang("event/list_filter", "all_date")}</Text>
            </View>
            <LibIcon name={'chevron-right'} size={20} color={'#9b9b9b'} />
          </View>
        </TouchableOpacity>
        {
          allCat &&
          <View style={{ marginBottom: 20 }} >
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#00b894" }} >{esp.lang("event/list_filter", "event_category")}</Text>
            <EventExpander >
              <View style={styleId_26qIWp} >
                <Pressable
                  onPress={() => { setCatId('') }}
                  style={{ backgroundColor: catId == '' ? '#f39c12' : '#f1f2f3', paddingHorizontal: 20, paddingVertical: 6, margin: 2.5, borderRadius: 4 }} >
                  <LibTextstyle text={esp.lang("event/list_filter", "text_all")} textStyle="footnote" style={{ color: catId == '' ? 'white' : "#000" }} />
                </Pressable>
                {
                  allCat?.map?.(renderAllCategory)
                }
              </View>
            </EventExpander>
          </View>
        }
      </ScrollView>
      <View style={{ flexDirection: 'row', marginTop: 30 }} >
        <TouchableOpacity style={{ height: 35, flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }} onPress={reset} >
          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: LibStyle.colorRed }} >{esp.lang("event/list_filter", "clear_filter")}</Text>
        </TouchableOpacity>
        <View style={{ width: 20 }} />
        <TouchableOpacity style={{ height: 35, flex: 1, borderRadius: 17.5, backgroundColor: '#f39c12', alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }} onPress={sendBack} >
          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#ffffff" }} >{esp.lang("event/list_filter", "apply")}</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}
const styleId_26qIWp: any = { flexDirection: 'row', flexWrap: "wrap", marginTop: 10 }