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

/**
 *
 首页
 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 USEDLIST = 4;
const TITLE = 5;
const GRID = 6;
const GRID_WITH_TITLE = 8;

export function swiperItem(data) {
  const swiperHeight = data.width / 2.7;
  console.log('width:', data.width, swiperHeight);
  return (
    data.data.map((item, index) => (
      <View
        key={`${item.imgUrl}${index}`}
        style={{
          width: data.width,
          height: swiperHeight,
          paddingHorizontal: 10,
          paddingTop: 10,
        }}
      >
        <FastImage
          style={{ width: data.width - 20, height: swiperHeight - 10 }}
          source={{
            uri: item.imgUrl,
            priority: FastImage.priority.normal,
          }}
          resizeMode={FastImage.resizeMode.stretch}
        />
      </View>
    ))
  );
}

export function renderBanner(props) {
  console.log('renderBanner', props);
  return (
    <View
      key="SwiperView"
      style={{
        height: props.height,
      }}
    >
      <SwiperView
        height={props.height}
        width={props.width}
      >
        {swiperItem(props)}
      </SwiperView>
    </View>
  );
}

export function renderGrid(props) {
  const gridWidth = ((props.width) / 4);
  console.log('renderGrid:', gridWidth);
  return (
    <FlatGrid
      style={{ backgroundColor: props.backgroundColor }}
      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: 25,
            }}
          >
            <FastImage
              style={{ width: 36, height: 36 }}
              source={{
                uri: item.imgUrl,
                priority: FastImage.priority.normal,
              }}
              resizeMode={FastImage.resizeMode.stretch}
            />
            <Text
              style={{
                fontSize: 14,
                color: '#333',
                marginTop: 5,
              }}
            >
              {item.title}
            </Text>
          </View>
        </TouchableOpacity>
      )}
    />
  );
}

export function renderOnlyTitle(props) {
  return (
    <View style={{ marginTop: 10, backgroundColor: '#FFF' }}>
      {
        renderTitle(props.title)
      }
    </View>
  );
}

export function renderUsedList(props) {
  return (
    <View style={{ marginTop: 10, backgroundColor: '#FFF' }}>
      {
        renderTitle(props.title)
      }
      <View style={{ height: 10, backgroundColor: '#FFF' }} />
    </View>
  );
}


export function renderGridWithTitle(props) {
  return (
    <View style={{ backgroundColor: '#F7FBFF', marginTop: 10 }}>
      {
        renderTitle(props.title, { fontSize: 16, color: '#0E6DCF' })
      }
      <View style={{ marginVertical: 10 }}>
        {
          renderGrid({ ...props, backgroundColor: '#F7FBFF' })
        }
      </View>
    </View>
  );
}

export function renderOnlyGrid(props) {
  return renderGrid({ ...props, backgroundColor: '#FFF' });
}

export function renderByType(type) {
  switch (type) {
  case USEDLIST:
    return renderUsedList;
  case GRID:
    return renderGrid;
  case TITLE:
    return renderOnlyTitle;
  case GRID_WITH_TITLE:
    return renderGridWithTitle;
  default:
    return () => {
    };
  }
}

export default {};
