// withHooks
import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventMessage } from 'esoftplay/cache/event/message/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import React from 'react';
import { Pressable, Text, TouchableOpacity, View } from 'react-native';


export interface EventCouponArgs {

}
export interface EventCouponProps {

}

export function getCouponDetail(url: string) {
  const curl = esp.mod("lib/curl")
  esp.mod("lib/progress").show("Mohon tunggu..")
  new curl(url, null, (result) => {
    const item = result?.list
    esp.mod("lib/progress").hide()
    if (item?.length > 0) {
      esp.mod("lib/navigation").navigate("event/coupon_detail", { ...item[0] })
    }
  }, (err) => {
    esp.mod("lib/progress").hide()
    esp.modProp("lib/toast").show(err?.message)
  }, 1)
}

export default function m(props: EventCouponProps): any {
  const [tab, setTab] = useSafeState(0)
  const tabs = [
    { id: 1, title: esp.lang("event/coupon", "unused") },
    { id: 2, title: esp.lang("event/coupon", "used") },
    { id: 3, title: esp.lang("event/coupon", "expired") }
  ]

  function buildUrl(url: string) {
    url += url.includes('?') ? '&' : '?'
    url += 'status=' + tab
    return url
  }

  return (
    <View style={{ flex: 1 }}>
      <EventHeader title={esp.lang("event/coupon", "header")} />
      <View style={{ height: 43, marginBottom: 2, flexDirection: 'row', backgroundColor: '#fff', borderBottomWidth: 1, borderBottomColor: '#f2f2f2' }} >
        {
          tabs.map((item: any, i: number) => (
            <Pressable key={i} onPress={() => {
              setTab(i)
            }}>
              <View style={{ height: 43, width: LibStyle.width / tabs.length, alignItems: 'center', overflow: 'visible', justifyContent: 'center', backgroundColor: '#fff' }}>
                <Text style={{
                  width: LibStyle.width / tabs.length, fontSize: tab == i ? 13 : 12,
                  fontWeight: tab == i ? "bold" : "normal",
                  fontStyle: "normal", letterSpacing: 0, textAlign: "center",
                  color: tab == i ? LibStyle.colorPrimary : "#c5c5c5"
                }}>{item.title}</Text>
                <View style={{ marginTop: 2, width: 5, height: 5, borderRadius: 2.5, alignItems: 'center', justifyContent: 'center', backgroundColor: LibStyle.colorRed, opacity: item.total > 0 ? 1 : 0 }} />
                <View style={{ width: (LibStyle.width / tabs.length) - 20, height: 3, backgroundColor: tab == i ? LibStyle.colorPrimary : "#fff", position: 'absolute', bottom: 0 }} />
              </View>
            </Pressable>
          ))
        }
      </View>
      <LibInfinite
        key={buildUrl("event_coupon")}
        url={buildUrl("event_coupon")}
        isDebug={1}
        errorView={(e: string) =>
          <EventMessage message={e} />
        }
        renderItem={(item, index) => (
          <View style={{ flex: 1 }} key={index}>
            <TouchableOpacity onPress={() => {
              if (item?.status == 0 && item?.show_qr != 0) {
                esp.mod("lib/navigation").navigate("event/coupon_detail", { ...item })
              }
            }} style={[{ marginBottom: 4, margin: 15, borderRadius: 10, backgroundColor: '#fff' }, LibStyle.elevation(2)]}>
              <LibPicture source={{ uri: item?.image }} resizeMode="cover" style={{ height: (LibStyle.width - 30) * 0.43, width: LibStyle.width - 30, borderTopLeftRadius: 10, borderTopRightRadius: 10 }} />
              <View style={{ position: 'absolute', top: (((LibStyle.width - 60) * 0.43) / 2) - 10, marginBottom: 15, flexDirection: 'row', justifyContent: 'space-between' }} >
                <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "white", marginLeft: -9.5 }} />
                <View style={{ flex: 1 }} />
                <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "white", marginRight: -9.5 }} />
              </View>

              <View style={{ paddingHorizontal: 15, paddingVertical: 10, borderTopWidth: 1, borderTopColor: "#e6e6e6", borderStyle: "dashed" }}>
                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#000", marginBottom: 3 }}>{item?.event_name}</Text>
                <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{item?.title}</Text>
                  {item?.amount && item?.amount != "" && item?.amount != 0 &&
                    <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{LibUtils.money(item?.amount)}</Text>
                  }
                </View>
              </View>

            </TouchableOpacity>
            {
              (item?.status == 1 || item?.status == 2) &&
              <View style={{ position: "absolute", left: 0, right: 0, top: 15, bottom: 4, backgroundColor: 'rgba(0, 0, 0, 0.15)', borderRadius: 10, alignItems: "center", justifyContent: "center", marginHorizontal: 15 }}>
                <View style={{ paddingHorizontal: 20, paddingVertical: 10, borderWidth: 3, borderColor: LibStyle.colorRed, transform: [{ rotate: '-20deg' }] }}>
                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: item?.status == 1 ? 24 : 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed }}>{item?.status == 1 ? esp.lang("event/coupon", "voucher_used") : esp.lang("event/coupon", "voucher_expired")}</Text>
                </View>
                <View style={{ position: 'absolute', top: (((LibStyle.width - 60) * 0.43) / 2) - 10, marginBottom: 15, flexDirection: 'row', justifyContent: 'space-between' }} >
                  <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "white", marginLeft: -9.5 }} />
                  <View style={{ flex: 1 }} />
                  <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "white", marginRight: -9.5 }} />
                </View>
              </View>
            }
          </View>
        )}
      />
    </View>
  )
}