// withHooks
import { applyStyle } from 'esoftplay';
import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibCollaps } from 'esoftplay/cache/lib/collaps/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/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 { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';
import { useEffect } from 'react';

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface EventSeat_autopickArgs {

}
export interface EventSeat_autopickProps {

}
export default function m(props: EventSeat_autopickProps): any {

  const { event_id, ondate, price_id, qty } = LibNavigation.getArgsAll(props)
  const [availableSeat, setAvailableSeat] = useSafeState()

  let data = [
    {
      id: 1,
      title: esp.lang("event/seat_autopick", "seat_lined")
    },
    {
      id: 2,
      title: esp.lang("event/seat_autopick", "seat_free")
    }
  ]
  const [selectedType, setSelectedType] = useSafeState()

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

  function loadData() {
    let post = {
      id: event_id,
      ondate: ondate,
      price_id: price_id
    }
    new LibCurl('event_seat_adjacent' + LibUtils.objectToUrlParam(post), null, (res, msg) => {
      setAvailableSeat(res)
    }, (err) => {
      LibToastProperty.show(err?.message)
    })
  }

  if (!availableSeat) {
    return <LibLoading />
  }


  return (
    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
      <EventHeader title={esp.lang("event/seat_autopick", "confirm")} />
      <ScrollView>
        <LibTextstyle textStyle='m_overline' text={esp.lang("event/seat_autopick", "seat_option")} style={{ textAlign: 'center', marginBottom: 20, lineHeight: 20, color: '#000', fontSize: 16, margin: 15, marginTop: 25, fontWeight: 'bold' }} />
        {
          data?.map((item: any, i: number) => {
            let show = true
            let available = item.id == 1 ? Number(qty) <= Number(availableSeat) : true
            return (
              <LibCollaps key={i} style={{ backgroundColor: '#fff', margin: 15, borderRadius: 5, marginTop: 0 }} show={show} header={(show) =>
                <View style={{ borderBottomWidth: 1, borderBottomColor: '#c9c9c9', overflow: 'hidden', padding: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
                  <TouchableOpacity activeOpacity={available ? 0 : 1} onPress={() => {
                    if (available) {
                      setSelectedType(item)
                    } else {
                      LibToastProperty.show(esp.lang("event/seat_autopick", "seat_not_available"))
                    }
                  }} style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
                    <LibIcon name={selectedType?.id == item?.id ? 'checkbox-marked-circle-outline' : 'checkbox-blank-circle-outline'} color={selectedType?.id == item?.id ? LibStyle.colorPrimary : '#e6e6e6'} />
                    <View style={{ marginLeft: 10 }}>
                      <LibTextstyle textStyle='m_overline' text={item.title} style={{ color: available ? "#000" : '#e6e6e6', fontSize: 14, fontWeight: selectedType?.id == item?.id ? 'bold' : 'normal', letterSpacing: 1 }} />
                      <Text allowFontScaling={false} style={{ color: available ? LibStyle.colorGreen : LibStyle.colorRed, fontSize: 10, letterSpacing: 1 }}>{available ? esp.lang("event/seat_autopick", "available") : esp.lang("event/seat_autopick", "not_available")}</Text>
                    </View>
                  </TouchableOpacity>
                  <LibIcon name={show ? 'chevron-down' : 'chevron-up'} color={available ? "#000" : '#e6e6e6'} />
                </View>
              }>
                <View style={{ marginHorizontal: 15, backgroundColor: '#fff', marginTop: -20 }}>
                  <LibPicture source={esp.assets(item.id == 1 ? 'lined.png' : 'spread.png')} resizeMode='contain' style={{ alignItems: 'center', justifyContent: 'center', alignContent: 'center', alignSelf: 'center', width: LibStyle.width - 100, height: (LibStyle.width - 100) / 2 }} />
                  <Text allowFontScaling={false} style={{ fontSize: 10, letterSpacing: 1, margin: 10, marginTop: 0 }}>{esp.lang("event/seat_autopick", "ilustrasi") + item.title}</Text>
                </View>
              </LibCollaps>
            )
          })
        }
      </ScrollView>

      <View style={applyStyle({ margin: 10, marginVertical: 5 })}>
        <EventButton testID={"next_btn"} label={esp.lang("event/ticket_list", "next")} onPress={() => {
          if (!selectedType) {
            LibToastProperty.show(esp.lang("event/seat_autopick", "seat_empty"))
            return
          } else {
            LibNavigation.sendBackResult(selectedType?.id == 1 ? 1 : 0)
          }
        }} style={applyStyle({ backgroundColor: LibStyle.colorPrimary })} />
      </View>

    </View>
  )
}