// withHooks

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
import { LibStatusbar } from 'esoftplay/cache/lib/statusbar/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { MarketDevice_type } from 'esoftplay/cache/market/device_type/import';
import { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketHeader_home } from 'esoftplay/cache/market/header_home/import';
import { MarketSection } from 'esoftplay/cache/market/section/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import useSafeState from 'esoftplay/state';

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

export interface MarketHomeProps {

}

const sliderHeight = 0.50 * LibStyle.width

function Blocktitle(props: any) {
  if (props.block.show_title == 1)
    // return null
    return (
      <MarketSection
        text={props?.block?.title}
        textColor={props.color}
        icon={(props?.block?.params?.more_module == '' || props?.block?.show_more != 1) ? undefined : 'market/ic_btn_more_rounded.png'}
        moreAction={() => props?.block?.params?.more_module == '' || props?.block?.show_more != 1 ? {} : LibNavigation.navigate(props?.block?.params?.more_module, { url: props?.block?.params?.more_url, title: props?.block?.title })}
      />
    )
  else
    return null
}

const itemWidth = LibStyle.width / 5 - 10

export default function m(props: MarketHomeProps): any {

  const [data, setData] = useSafeState<any>()
  const [error, setError] = useSafeState('')
  const user = UserClass.state().useSelector(s => s)
  const dimension = useMemo(() => MarketDevice_type(2, 4, 5), [])
  const imgDimension = useMemo(() => (LibStyle.width - ((dimension + 1) * 10)) / dimension, [])
  const [showPpobIcons, setShowPpobIcons] = useSafeState<any>(undefined)
  const [height, setHeight] = useSafeState(1)


  useEffect(() => {
    loadData()
  }, [])

  function loadData() {
    new LibCurl('home_marketplace', null,
      (res, msg) => {
        // esp.log(res);
        setData(res)
      }, (msg) => {
        setError(msg?.message)
      }, 1
    )
  }

  if (!data) {
    return (
      <View style={{ flex: 1 }}>
        <LibStatusbar style="dark" />
        <LibSkeleton>
          <View style={{ marginTop: LibStyle.STATUSBAR_HEIGHT }} />
          <View style={{ flexDirection: 'row' }}>
            <LibSkeleton.Circle size={33} />
            <LibSkeleton.BoxFlex size={33} />
            <LibSkeleton.Box size={33} />
            <LibSkeleton.Box size={33} />
            <LibSkeleton.Box size={33} />
          </View>
          <LibSkeleton.BoxFull size={sliderHeight} />
          <View style={{ flexDirection: 'row' }} >
            <LibSkeleton.BoxHalf size={50} />
            <LibSkeleton.Box size={50} />
            <LibSkeleton.Box size={50} />
          </View>
          <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 5, marginBottom: 10 }}>
            <View style={{ width: itemWidth - 10, height: itemWidth - 10, backgroundColor: 'white', borderRadius: 10, marginLeft: 10, marginRight: 10 }} />
            <View style={{ width: itemWidth - 10, height: itemWidth - 10, backgroundColor: 'white', borderRadius: 10, marginLeft: 10, marginRight: 10 }} />
            <View style={{ width: itemWidth - 10, height: itemWidth - 10, backgroundColor: 'white', borderRadius: 10, marginLeft: 10, marginRight: 10 }} />
            <View style={{ width: itemWidth - 10, height: itemWidth - 10, backgroundColor: 'white', borderRadius: 10, marginLeft: 10, marginRight: 10 }} />
            <View style={{ width: itemWidth - 10, height: itemWidth - 10, backgroundColor: 'white', borderRadius: 10, marginLeft: 10, marginRight: 10 }} />
          </View>
          <View style={{ flexDirection: 'row', alignItems: 'center' }} >
            <LibSkeleton.BoxHalf size={20} />
            <View style={{ flex: 1 }} />
            <LibSkeleton.Circle size={26} />
          </View>
          <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', marginLeft: 10 }} >
            <View style={{ width: imgDimension, borderWidth: 1, marginRight: 10, marginBottom: 10, borderRadius: 10, overflow: 'hidden' }}>
              <View style={{ width: imgDimension, height: imgDimension, backgroundColor: 'white' }} />
              <View style={{ width: '60%', height: 15, borderRadius: 7.5, backgroundColor: 'white', margin: 10 }} />
              <View style={{ width: '50%', height: 20, borderRadius: 10, backgroundColor: 'white', margin: 10, marginTop: 5, marginBottom: 0 }} />
              <LibIcon name="heart" style={{ marginHorizontal: 10, marginBottom: 10, alignSelf: 'flex-end' }} />
            </View>
            <View style={{ width: imgDimension, borderWidth: 1, marginRight: 10, marginBottom: 10, borderRadius: 10, overflow: 'hidden' }}>
              <View style={{ width: imgDimension, height: imgDimension, backgroundColor: 'white' }} />
              <View style={{ width: '60%', height: 15, borderRadius: 7.5, backgroundColor: 'white', margin: 10 }} />
              <View style={{ width: '50%', height: 20, borderRadius: 10, backgroundColor: 'white', margin: 10, marginTop: 5, marginBottom: 0 }} />
              <LibIcon name="heart" style={{ marginHorizontal: 10, marginBottom: 10, alignSelf: 'flex-end' }} />
            </View>
          </View>
        </LibSkeleton>
      </View>
    )
  }

  return (
    <View style={{ flex: 1 }} >
      <View style={{ position: 'relative', top: 0, left: 0, right: 0, backgroundColor: '#FFC523' }} >
        <MarketHeader_home />
      </View>
      {
        error ?
          <MarketEmpty msg={error} />
          :
          <View>
            <Text>{'You can change this file if you want (market/home)'}</Text>
          </View>
      }
    </View>
  )
}