// withHooks

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibList } from 'esoftplay/cache/lib/list/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';

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




export interface MarketPickerProps {
  data: MarketPickerData[],
  title: string,
  selectedId: number | string,
  onSelected: (x: MarketPickerData) => void,
  req_id?: number
}
export interface MarketPickerData {
  id: string | number,
  title: string
}

export function show(title: string, data: any[], selectedId: string | number, onSelected: (x: any) => void, req_id?: number): void {
  LibNavigation.navigateForResult("market/picker", { title, data, selectedId }, req_id).then(onSelected)
}

export default function m(props: MarketPickerProps): any {
  const { _senderKey, title, data, selectedId } = LibNavigation.getArgsAll<any>(props)

  useEffect(() => {
    return () => LibNavigation.cancelBackResult(_senderKey)
  }, [])

  return (
    <View style={{ flex: 1, backgroundColor: "white" }} >
      <MarketHeader leftIcon={{ name: "close", onPress: () => { LibNavigation.back() } }} title={title}  />
      <LibList
        data={data}
        renderItem={(item) => (
          <TouchableOpacity
            onPress={() => LibNavigation.sendBackResult(item, _senderKey)}
            style={{ padding: 12, borderBottomWidth: 1, borderBottomColor: "#ddd", flexDirection: "row", alignItems: "center" }} >
            <LibTextstyle text={item.title} textStyle="callout" style={{ flex: 1, color: "#444" }} />
            {selectedId == item.id && <LibIcon name="check" size={24} />}
          </TouchableOpacity>
        )}
      />
    </View>
  )
}