// withHooks

import { EventCountdown_timestamp } from 'esoftplay/cache/event/countdown_timestamp/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';
import React from 'react';
import { Pressable, Text, View } from 'react-native';


export interface EventDialog_customArgs {

}
export interface EventDialog_customProps {
  icon: any,
  msg: string,
  color: any
  showCountdown?: boolean
  onPressCancel: () => void,
  onPressOK: () => void
}

export default function m(props: EventDialog_customProps): any {
  const expTimestamp = Date.now() + 1000 * 60
  const [timer] = useSafeState<number>(expTimestamp)
  const [show, setShow] = useSafeState<boolean>(props?.showCountdown || false)

  return (
    <View style={{}}>
      <View style={{ marginTop: 16, marginHorizontal: 10 }} >
        <View style={{ alignItems: 'center', justifyContent: 'center' }} >
          {props.icon && <View style={{ marginBottom: 30 }} ><LibIcon name={props.icon} size={70} color={props.color} /></View>}
          {props.msg && <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", lineHeight: 19, letterSpacing: 0, textAlign: "center", color: "#4a4a4a" }}>{props.msg || ''}</Text>}
        </View>
      </View>
      <View style={{ flexDirection: 'row', marginTop: 30, paddingHorizontal: 10 }} >
        <Pressable onPress={props.onPressCancel} style={{ flex: 1, height: 40, alignItems: 'center', justifyContent: 'center' }} >
          <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 15 }}>{esp.lang("event/randomseat", "back")}</Text>
          {/* <LibTextstyle textStyle="body" text={esp.lang("event/randomseat", "back")} /> */}
        </Pressable>
        <Pressable onPress={() => {
          if (!show) {
            props?.onPressOK?.()
            setShow(x => !x)
          }
        }} style={{ flex: 1, height: 40, backgroundColor: LibStyle.colorRed, opacity: show ? 0.8 : 1, borderRadius: 25, alignItems: 'center', justifyContent: 'center', flexDirection: "row" }} >
          <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 15, color: '#fff' }}>{esp.lang("component/dialog_custom", "try_again")}</Text>

          {
            show &&
            <>
              <Text style={{ fontWeight: 'bold', fontSize: 15, color: '#fff' }}>{" ("}</Text>
              <EventCountdown_timestamp
                onExpired={() => {
                  setShow(x => !x)
                }}
                expiredTimestamp={timer}
                style={{ color: "#fff", fontWeight: 'bold' }} />
              <Text style={{ fontWeight: 'bold', fontSize: 15, color: '#fff' }}>{")"}</Text>
            </>
          }
        </Pressable>
      </View>
    </View>
  )
}