// withHooks
// noPage
import esp from 'esoftplay/esp';

import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';

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


export interface MarketProduct_detail_optionsArgs {

}
export interface MarketProduct_detail_optionsProps {
  options: any,
  onPress: () => void
}
export default function m(props: MarketProduct_detail_optionsProps): any {
  const primary = props.options.filter((x: any) => x.is_primary == 1)
  const secondary = props.options.filter((x: any) => x.is_primary == 0)

  return (
    <View style={{ backgroundColor: 'white' }}>

      {
        primary.length > 0 && <MarketSection_menu title={esp.lang("market/product_detail_options", "variasi")} smooth />
      }

      {
        primary.length > 0 &&
        <>
          <MarketSection_menu title={primary[0].name} smooth />
          <TouchableOpacity activeOpacity={1} onPress={props.onPress} style={{ flexDirection: 'row', flexWrap: 'wrap', marginHorizontal: 17 }} >
            {primary.map((x: any, i: string) => (
              <View key={i} style={{ backgroundColor: '#f9f9f9', marginHorizontal: 10, marginLeft: 0, paddingVertical: 6, paddingHorizontal: 10, borderRadius: 4, marginBottom: 10 }} >
                <LibTextstyle textStyle="footnote" text={x.data} />
              </View>
            ))}
          </TouchableOpacity>
        </>
      }
      {
        secondary.length > 0 &&
        <>
          <MarketSection_menu title={secondary[0].name} smooth />
          <TouchableOpacity activeOpacity={1} onPress={props.onPress} style={{ flexDirection: 'row', flexWrap: 'wrap', marginHorizontal: 17 }} >
            {secondary.map((x: any, i: number) => (
              <View key={i} style={{ backgroundColor: '#f9f9f9', margin: 10, marginLeft: 0, paddingVertical: 6, paddingHorizontal: 10, borderRadius: 4 }} >
                <LibTextstyle textStyle="footnote" text={x.data} />
              </View>
            ))}
          </TouchableOpacity>
        </>
      }
    </View>
  )
}