// withHooks
// noPage

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibList } from 'esoftplay/cache/lib/list/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import useSafeState from 'esoftplay/state';

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


export interface MarketMerchant_detail_labelArgs {

}
export interface MarketMerchant_detail_labelProps {
  url: string
}
export default function m(props: MarketMerchant_detail_labelProps): any {
  const [data, setData] = useSafeState([])

  useEffect(() => {
    new LibCurl(props.url, null, (res) => setData(res), () => { }, 1)
  }, [])

  return (
    <View style={{ flex: 1 }} >
      <LibList
        data={data}
        numColumns={4}
        renderItem={(item, idx) => (
          <View style={{ paddingHorizontal: 0, alignItems: 'center', paddingVertical: 10, flex: 1 }} >
            <View style={{ height: 70, width: 70 }} >
              <LibPicture source={{ uri: item.image }} style={{ height: 70, width: 70, borderRadius: 6 }} />
              <View style={{ position: 'absolute', left: 0, right: 0, bottom: 0, borderBottomLeftRadius: 6, borderBottomRightRadius: 6, backgroundColor: 'rgba(255,255,255,0.8)' }} >
                <LibTextstyle textStyle='caption2' text={item.title} style={{ textAlign: 'center', paddingVertical: 3 }} />
              </View>
            </View>
          </View>
        )}
      />
    </View>
  )
}