// withHooks
import { applyStyle } from 'esoftplay';
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 { 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 useSafeState from 'esoftplay/state';

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


export interface EventOrder_reschedule_listArgs {

}
export interface EventOrder_reschedule_listProps {

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


  const [selectedTicket, setSelectedTicket] = useSafeState<any>()

  useEffect(() => {
    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
  }, [])

  function renderItem(item: any, i: number) {
    let _selectTicket = item.date_id == selectedTicket?.date_id
    let bgDatePassed = item.is_passed == 1 ? LibStyle.colorLightGrey : _selectTicket ? "#f6f6f6" : '#fff'
    let opacityPassed = item.is_passed == 1 ? 0.5 : 1



    return (
      <Pressable onPress={() => {
        let a = {
          ...item,
          check: 1,
          index: i
        }
        setSelectedTicket(a)
      }} key={i} style={applyStyle({ borderRadius: 10, margin: 10, marginBottom: 0, borderWidth: 1.5, borderColor: LibStyle.colorGrey, overflow: 'hidden', backgroundColor: bgDatePassed, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', alignContent: 'center', padding: 10 })}>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <View style={applyStyle({ marginLeft: 10, marginHorizontal: 20, width: 42, height: 42, borderRadius: 5, backgroundColor: bgDatePassed, borderStyle: "solid", borderWidth: opacityPassed, borderColor: _selectTicket ? "#3ea4dc" : '#999', alignContent: 'center', alignItems: 'center', justifyContent: 'center' })}>
            <Text allowFontScaling={false} style={applyStyle({ opacity: opacityPassed, fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0.23, textAlign: "center", color: _selectTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(item.ondate).format('DD')}</Text>
          </View>
          <View style={{ flexDirection: 'column' }}>
            <Text allowFontScaling={false} style={applyStyle({ opacity: opacityPassed, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(item.ondate).format('dddd')}</Text>
            <View style={applyStyle({ flexDirection: 'row' })}>
              <Text allowFontScaling={false} style={applyStyle({ opacity: opacityPassed, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(item.ondate).format('MMMM')}</Text>
              <Text allowFontScaling={false} style={applyStyle({ opacity: opacityPassed, marginLeft: 7, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(item.ondate).format('YYYY')}</Text>
            </View>
          </View>
        </View>
        <LibIcon name={_selectTicket ? "checkbox-marked-circle" : "radiobox-blank"} size={22} style={{ opacity: opacityPassed }} color={_selectTicket ? "#3ea4dc" : "#434343"} />
      </Pressable>
    )
  }

  return (
    <View style={{ flex: 1, backgroundColor: "#fff" }}>
      <EventHeader title={esp.lang("event/order_reschedule_list", "header")} />
      <ScrollView>
        {
          data?.price_type?.length > 0 && data?.price_type?.map(renderItem)
        }
      </ScrollView>

      <EventButton label={esp.lang("event/order_reschedule_list", "btn")} onPress={() => {
        if (!selectedTicket) {
          LibToastProperty.show(esp.lang("event/order_reschedule_list", "select_date"))
        } else {
          LibNavigation.sendBackResult(selectedTicket)
        }
      }} style={{ margin: 15 }} backgroundColor={selectedTicket ? LibStyle.colorPrimary : LibStyle.colorBgGrey} fontColor="#fff" />

    </View>
  )
}