/**
 * @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';

/**
 *
 首页
 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 BANNER = 0;
const GRID = 1;
const ACTIVITY = 2;
const EXTRASRV = 3;

export function swiperItem(props) {
  const swiperHeight = props.width / 2.7;
  const { item } = props;
  return (
    <View
      key={`swiperItem${item.imgUrl}`}
      style={{
        width: props.width,
        height: swiperHeight,
        paddingHorizontal: 10,
        paddingTop: 10,
      }}
    >
      <FastImage
        style={{ width: props.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}
      >
        {
          props.data.map((item, index) => (swiperItem({ ...props, item })))
        }
      </SwiperView>
    </View>
  );
}


export const renderGridItem = (props) => {
  const { item, gridWidth } = props;
  return (
    <TouchableOpacity
      onPress={() => {
        console.log(props, item.tagUrl);
        props.pushTo(item.tagUrl);
      }}
    >
      <View
        key={`${item.imgUrl}`}
        style={{
          width: gridWidth - 1,
          justifyContent: 'center',
          alignItems: 'center',
          marginVertical: 10,
        }}
      >
        <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 const renderGrid = (props) => {
  const gridWidth = ((props.width) / 4);
  console.log('renderGrid:', gridWidth);
  return (
    <FlatGrid
      itemDimension={gridWidth}
      items={props.data}
      spacing={0}
      renderItem={({ item, index }) => (
        renderGridItem({ ...props, item, gridWidth })
      )}
    />
  );
};

export function activityItem(item) {
  return (
    <View
      style={{
        width: 192,
        alignItems: 'stretch',
        marginLeft: 10,
      }}
    >
      <FastImage
        style={{ width: 192, height: 108 }}
        source={{
          uri: item.imgUrl,
          priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.stretch}
      />
      <Text
        style={{
          fontSize: 16,
          marginTop: 8,
          fontColor: '#20253C',
        }}
      >
        {item.title}
      </Text>
      <Text
        style={{
          fontSize: 14,
          marginVertical: 8,
          color: item.detailColor,
        }}
        numberOfLines={2}
      >
        {item.detail}
      </Text>
    </View>
  );
}

export function renderTitle(title, diyStyle) {
  return (
    <View>
      <Text
        style={{
          fontSize: 18,
          marginLeft: 10,
          marginTop: 10,
          fontColor: '#20253C',
          ...diyStyle,
        }}
      >
        {title}
      </Text>
    </View>
  );
}

export function renderActivity(props) {
  return (
    <View>
      {
        renderTitle(props.title)
      }
      <ScrollView
        style={{
          marginVertical: 14,
          width: props.width,
          height: 176,
        }}
        horizontal
        showsHorizontalScrollIndicator={false}
      >
        {props.data.map((item, index) => (
          <TouchableOpacity
            onPress={() => {
              console.log(props.pushTo, item.tagUrl);
              props.pushTo(item.tagUrl);
            }}
          >
            {activityItem(item)}
          </TouchableOpacity>
        ))
        }
      </ScrollView>
    </View>
  );
}


export function renderExtraSrv(props) {
  return (
    <View>
      {
        renderTitle(props.title)
      }
      <ScrollView
        style={{
          marginVertical: 14,
          width: props.width,
        }}
        horizontal
        showsHorizontalScrollIndicator={false}
      >
        {props.data.map((item, index) => (
          <TouchableOpacity
            onPress={() => {
              console.log(props.pushTo, item.tagUrl);
              props.pushTo(item.tagUrl);
            }}
          >
            <FastImage
              style={{
                width: 122,
                height: 130,
                marginLeft: 10,
              }}
              source={{
                uri: item.imgUrl,
                priority: FastImage.priority.normal,
              }}
              resizeMode={FastImage.resizeMode.stretch}
            />
          </TouchableOpacity>
        ))
        }
      </ScrollView>
    </View>
  );
}

export function renderByType(type) {
  switch (type) {
  case BANNER:
    return renderBanner;
  case GRID:
    return renderGrid;
  case ACTIVITY:
    return renderActivity;
  case EXTRASRV:
    return renderExtraSrv;
  default:
    return () => {
    };
  }
}

export default {};
