//@flow
import React from 'react';
import {
  View,
  TouchableOpacity,
} from 'react-native';
import FastImage from 'react-native-fast-image';
import Text from './components/Text';
import ListItem from './components/ListItem';
import Mult from './components/Mult';
import CheckBoxGroup from './components/CheckBoxGroup';
import ButtonGroup from './components/ButtonGroup';
import Progress from '../../components/Agera-App-Base-Progress';
import {
  BANNER,
  PROCESS,
  PAGE_TITLE,
  BUTTON_GROUP,
  LIST_ITEM,
  CELL,
  CHECKBOX,
  PICKER,
  DATE_PICKER,
  IMAGE,
  TAB,
  MULTINPUT,
  TEXTAREA,
  PRODUCT_TITLE,
  PRODUCT_BANNER,
  PLAN_INFO,
  PREM_GROUP,
  PRODUCT_IMAGE,
  SERVICE_IMAGE,
  NOTICE_IMAGE,
  INSURE_YEAR,
  MULT,
  JIACHENG,
  AIFEIXIANG,
  XUESHENGYIWAI, GRAY_LABEL, DATE_RANGE, TEXT_INPUT, PROGRESS,NOTICE
} from './config/keys';

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) {
  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 renderButtonGroup(props) {
  const { onSelect, buttons, selectIndex } = props;
  if (buttons.length > 0) {
    return (
      <ButtonGroup
        onSelect={onSelect}
        buttons={buttons}
        selectIndex={selectIndex}
        containerStyle={{
          marginHorizontal: 15, marginBottom: 20, borderWidth: 1, borderColor: '#0E6DCF',
        }}
        selectedButtonStyle={{ backgroundColor: '#0E6DCF' }}
        textStyle={{ color: '#0E6DCF' }}
        selectedTextStyle={{ color: '#fff' }}
      />
    );
  }
  return null;
}

function renderItemText(props) {
  return (
    <View>
      {props.text.map((text, index) => (
        <ListItem
          key={`ListItem${index}`}
          style={{
            borderBottomColor: '#ccc',
          }}
          text={text.name}
        >
          <Text>{text.value}</Text>
        </ListItem>
      ))
      }
    </View>
  );
}

function renderLabel(props) {
  const { label } = props;
  return (
    <View style={{ height: 42, flexDirection: 'row', alignItems: 'center' }}>
      {label.icon || (
        <View style={{
          width: 4,
          height: 16,
          backgroundColor: '#0E6DCF',
          borderBottomRightRadius: 2,
          borderTopRightRadius: 2,
        }}
        />
      )}
      <Text style={{ color: '#20253C', fontSize: 16, marginLeft: 10 }}>{label.h1}</Text>
      <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
        <TouchableOpacity
          onPress={() => {
            label.onPress();
          }}
        >
          <Text style={{ color: '#0E6DCF', paddingRight: 15 }}>{label.rightText}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

function renderListItem(props) {
  const array = props.data;
  console.log('renderListItem:', array);
  return (
    <View style={{ backgroundColor: '#fff', marginTop: 10 }}>
      {renderLabel(props)}
      {array.map((item, index) => (
        renderItemText(item)
      ))
      }
    </View>
  );
}

function renderImage(props) {
  console.log('props:', props);
  return (
    <View style={{ backgroundColor: '#fff', marginTop: 10 }}>
      {renderLabel(props)}
      <FastImage
        style={{ width: props.width, height: props.height }}
        source={{
          uri: props.uri,
          priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
      />
    </View>
  );
}

function renderMult(props) {
  return (
    <Mult {...props} />
  );
}

function renderGrayTitle(props) {
  return (
    <View
      style={{
        height: props.height || 50,
        backgroundColor: '#F4F5F5',
        paddingLeft: 15,
      }}
    >
      <Text style={{
        color: '#666',
        fontSize: 14,
        marginTop: 15,
      }}
      >
        {props.text}
      </Text>
    </View>
  );
}

function renderTextInput(props) {
  return(
    <ListItem
      style={{
        borderBottomColor: '#ccc',
      }}
      text={props.text}
    >
      <Text>{props.value}</Text>
    </ListItem>
  );
}

function renderProgress(props) {
  return(
    <Progress
     index={props.index}
     data={props.data}
    />
  )
}

function renderNotice(props) {
  return(<View
    style={{
      height: props.height || 50,
      backgroundColor: '#FFF8EC',
      alignItems: 'center'
    }}
  >
    <Text style={{
      color: '#F5591C',
      fontSize: 14,
      marginTop: 15,
    }}
    >
      {props.text}
    </Text>
  </View>)
}

function renderCheckBox(props){
  return(
    <CheckBoxGroup
      {...props}
    />
  );
}

export function renderPageByConfig(type, renderCustomView?) {
  console.log('renderPageByConfig:', type);
  switch (type) {
  case BANNER:
    return renderBanner;
  case PAGE_TITLE:
    return renderTitle;
  case LIST_ITEM:
    return renderListItem;
  case MULTINPUT:
    return renderMult;
  case BUTTON_GROUP:
    return renderButtonGroup;
  case IMAGE:
    return renderImage;
  case TEXT_INPUT:
    return renderTextInput;
  case GRAY_LABEL:
    return renderGrayTitle;
  case NOTICE:
    return renderNotice;
  case PROGRESS:
    return renderProgress;
  case CHECKBOX:
    return renderCheckBox;
  default:
    // 有自定义方法执行传入的渲染方法
    if (renderCustomView) {
      return renderCustomView(type);
    }
    return () => {};
  }
}

export default {
  renderPageByConfig,
};
