// withHooks
// noPage
import { applyStyle } from 'esoftplay';

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

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


export interface MarketProduct_detail_specificationProps {
  specification: any[]
}

function Item(props: any) {
  return (
    <View style={applyStyle({ flexDirection: 'row', padding: 12, paddingHorizontal: 22, backgroundColor: props.color })} >
      <LibTextstyle text={props.label} textStyle="footnote" style={applyStyle({ flex: 1 })} />
      <LibTextstyle text={": "} textStyle="footnote" />
      <LibTextstyle text={props.value} textStyle="footnote" style={applyStyle({ flex: 2 })} />
    </View>
  )
}

export default function m(props: MarketProduct_detail_specificationProps): any {
  const colorOdd = "#fafafa"

  return (
    <View style={applyStyle({ padding: 0, marginHorizontal: 10 })} >
      <MarketSection_menu title={esp.lang("market/product_detail_specification", "specification")} smooth />
      {props.specification.filter((t: any) => t.data.spec_data_id && (t.name != "" || t.data.spec_name != "") && (t.data.spec_data_name != "" || t.data.spec_data_member_name) ).map((x, i) => {
        if (LibUtils.checkUndefined(x, 'data.spec_name')) {
          return (
            <Item key={i} label={x.data.spec_name || x.data.spec_member_name} value={x.data.spec_data_name || x.data.spec_data_member_name} color={i % 2 == 0 ? "white" : colorOdd} />
          )
        } else {
          return null
        }
      })}
    </View>
  )
}