// withHooks

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';

import useGlobalState from 'esoftplay/global';
import React from 'react';
import { Linking, TouchableOpacity, View } from 'react-native';


export interface MarketAds_popupArgs {

}
export interface MarketAds_popupProps {

}

const initState = {
  show: false,
  image: undefined,
  url: undefined,
  module: undefined,
  title: undefined
}

const state = useGlobalState(initState)

export function get(id?: string): void {
  const url = id ? "ads?id=" + id : "ads"
  new LibCurl(url, null,
    (res, msg) => {
      Linking.canOpenURL(res.image).then((v) => v && show(res))
    },
    (msg) => {

    }, 1
  )
}

export function show(res: any): void {
  state.set({
    show: true,
    ...res
  })
}

export function hide(): void {
  state.set(initState)
}

export default function m(props: MarketAds_popupProps): any {
  const data = state.useSelector(s => s)
  const { show, image, url, module, title } = data

  if (!show) return null
  return (
    <TouchableOpacity onPress={() => { }} activeOpacity={1} style={styleId_9AKEp} >
      <TouchableOpacity onPress={() => {
        // if (url && Linking.canOpenURL(url)) {
        //   Linking.openURL(url)
        // }
        // hide()
      }} activeOpacity={1} style={styleId_Z1FT4wu} >
        <>
          <LibPicture style={styleId_CQv7y} source={{ uri: image }} />
          <View style={styleId_2hFYtG} >
            <TouchableOpacity onPress={() => hide()} >
              <LibIcon name="close-circle-outline" color={LibStyle.colorRed} />
            </TouchableOpacity>
          </View>
        </>
      </TouchableOpacity>
    </TouchableOpacity>
  )
}
const styleId_9AKEp: any = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center' }
const styleId_Z1FT4wu: any = { width: 280, height: 374, alignSelf: 'center' }
const styleId_CQv7y: any = { height: 374, width: 280, resizeMode: 'contain' }
const styleId_2hFYtG: any = { position: 'absolute', top: 4, right: 4 }