//@flow
import React from 'react';
import {
  View,
} from 'react-native';
import FastImage from 'react-native-fast-image';
import { ListItem } from 'react-native-elements';
import Text from '../../components/Text';
import {
  BANNER, TITLE, LIST_ITEM, CHOOSE, PRODUCT, SERVICE,
} from './config';
import BasicIcon from '../../components/BasicIcon';

function renderBanner(props) {
  console.log('renderBanner:', props);
  return (
    <FastImage
      style={{ width: props.width, height: props.height }}
      source={{
        uri: props.uri,
        priority: FastImage.priority.normal,
      }}
      resizeMode={FastImage.resizeMode.stretch}
    />
  );
}

function renderTitle(props) {
  console.log('renderTitle:', props);
  return (
    <View
      style={{
        height: props.height || 100,
        paddingLeft: 15,
      }}
    >
      <Text style={{
        color: '#333',
        fontSize: 18,
        marginTop: 15,
      }}
      >
        {props.h1}
      </Text>
      <Text style={{
        marginTop: 10,
        color: '#999',
        fontSize: 13,
      }}
      >
        {props.h2}
      </Text>
      <View style={{
        flexDirection: 'row',
        alignItems: 'center',
        paddingTop: 9,
      }}
      >
        {
          props.label.map((item, index) => (
            <View
              style={{
                borderColor: props.labelColor,
                borderWidth: 1,
                marginRight: 10,
              }}
            >
              <Text style={{
                color: props.labelColor,
              }}
              >
                {item}
              </Text>
            </View>
          ))
        }
      </View>
    </View>
  );
}

function f() {

}

function renderItemText(props) {
  console.log('props:', props);
  return (
    <View>
      {props.text.map((text, index) => (
        <ListItem
          key={`ListItem${index}`}
          containerStyle={{
            borderBottomWidth: index < props.text.length - 1 ? 0.3 : 0,
            borderBottomColor: '#ccc',
          }}
          title={text.name}
          titleStyle={{ color: '#666', fontSize: 14 }}
          leftElement={(
            <View />
          )}
          rightElement={(
            <Text>{text.value}</Text>
          )}
        />
      ))
      }
    </View>
  );
}

function renderListItem(props) {
  const array = props.data;
  console.log('array:', array);
  return (
    <View>
      {array.map((item, index) => (
        renderItemText(item)
      ))
      }
    </View>
  );
}

function renderImage(props) {
  console.log('props:',props)
  return(
    <FastImage
      style={{ width: props.width, height: props.width * 1200 / 375 }}
      source={{
        uri: props.uri,
        priority: FastImage.priority.normal,
      }}
      resizeMode={FastImage.resizeMode.contain}
    />
  )
}


export function renderPageByConfig(config, renderCustomView?) {
  switch (config.type) {
  case BANNER:
    return renderBanner;
  case TITLE:
    return renderTitle;
  case LIST_ITEM:
    return renderListItem;
  case CHOOSE:
    return ()=>{

    }
    case PRODUCT:
      return renderImage;
    case SERVICE:
      return renderImage;
  default:
    return () => {
      // 有自定义方法执行传入的渲染方法
      if (renderCustomView) {
        renderCustomView(config);
      }
    };
  }
}

export default {
  renderPageByConfig,
};
