/**
 * @flow
 */
import React from 'react';
import {
  TouchableOpacity,
  View,
} from 'react-native';
import { ListItem } from 'react-native-elements';
import FastImage from 'react-native-fast-image';
import { FlatGrid } from 'react-native-super-grid';
import Text from '../../components/Text';
import { renderTitle } from './homeRenderUtil';
import BasicIcon from '../../components/BasicIcon';

/**
 *
 首页
 type  0     轮播图
 type  1     九宫格
 type  2     活动
 type  3     商品

 服务

 type  4  最近使用
 type  5  标题
 type  6  九宫格
 type  7  图片展示
 type  8  公司名字九宫格
 type  9  轮播图

 我的
 type 10  3列九宫格
 type 11  带标题4列的九宫格
 type 12  icon+title       >
 * @type {number}
 */
const THREE = 10;
const GRID = 11;
const TABLE = 12;

const marginLeft = 10;

function renderGrid(props) {
  const count = props.count || 4;
  const gridwidth = ((props.width - marginLeft * 2) / count);
  return (
    <View
      key={`user${count}columnGrid`}
      style={{
        marginHorizontal: marginLeft,
        borderRadius: 5,
        backgroundColor: 'white',
        elevation: 20,
        shadowOffset: { width: 0, height: 0 },
        shadowColor: '#D0DBFF',
        shadowOpacity: 1,
        shadowRadius: 5,
        marginTop: props.marginTop || 10,
        marginBottom: props.marginBottom || 10,
      }}
    >
      <FlatGrid
        itemDimension={gridwidth}
        items={props.data}
        spacing={0}
        renderItem={({ item, index }) => (
          <TouchableOpacity
            onPress={() => {
              console.log(props, item.tagUrl);
              props.pushTo(item.tagUrl);
            }}
          >
            <View
              key={`${index}${item.imgUrl}`}
              style={{
                width: gridwidth - 1,
                justifyContent: 'center',
                alignItems: 'center',
                marginVertical: 10,
              }}
            >
              <FastImage
                style={{ width: 32, height: 32 }}
                source={{
                  uri: item.imgUrl,
                  priority: FastImage.priority.normal,
                }}
                resizeMode={FastImage.resizeMode.stretch}
              />
              <Text
                style={{
                  marginTop: 5,
                  color: '#333',
                  fontSize: 12,
                }}
              >
                {item.title}
              </Text>
            </View>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}


function render3Column(props) {
  return renderGrid({ ...props, count: 3, marginTop: -1 });
}

function render4Column(props) {
  return (
    <View>
      <View style={{ height: 10, backgroundColor: '#F4F5F5' }} />
      {
        renderTitle(props.title, { marginLeft })
      }
      {
        renderGrid(props)
      }
    </View>
  );
}

function renderTable(props) {
  return (
    <View>
      {
        props.data.map((item, index) => (
          <ListItem
            key={`renderTable${index}`}
            containerStyle={{
              borderBottomWidth: index < props.data.length - 1 ? 0.3 : 0,
              borderBottomColor: '#ccc',
            }}
            title={item.title}
            titleStyle={{ color: '#666', fontSize: 14 }}
            leftElement={(
              <FastImage
                style={{ width: 24, height: 24 }}
                source={{
                  uri: item.imgUrl,
                  priority: FastImage.priority.normal,
                }}
                resizeMode={FastImage.resizeMode.stretch}
              />
            )}
            rightElement={(
              <BasicIcon
                suite="Ionicons"
                name="ios-arrow-forward"
                size={24}
                color="#666"
              />
            )}
          />
        ))
      }
    </View>
  );
}

export function renderByType(type) {
  switch (type) {
  case THREE:
    return render3Column;
  case GRID:
    return render4Column;
  case TABLE:
    return renderTable;
  default:
    return () => {
    };
  }
}

export default {};
