/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { useEffect, useState } from 'react';
import {
  View,
  StyleSheet,
  NativeAppEventEmitter,
  TouchableOpacity,
} from 'react-native';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { LargeList } from 'react-native-largelist-v3';
import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader';
import { TabView, TabBar } from 'react-native-tab-view';
import LinearGradient from 'react-native-linear-gradient';
import { push, tab } from '../../BasicNavigator/actions';
import NavigationBar, { NavHeight } from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import { queryInsuranceListByUidAPI } from './InsuranceAPI';
import Styles from '../../theme/Styles';
import ListItem from './ListItem';
import decorator from '../../utils/decorator';
import BasicIcon from '../../components/BasicIcon';
import Text from '../../components/Text';

type Props = {
  pushTo : ()=> void,
  tabTo : ()=> void,
  theme : Object,
};


const styles = StyleSheet.create({
  tabBar: {
    backgroundColor: 'white',
  },
  tab: {
    width: global.SCREEN_WIDTH / 3,
  },
  indicator: {
    backgroundColor: '#4ECBFC',
  },
  label: {
    fontWeight: 'bold',
    fontSize: 16,
    //color: '#666',
  },
});

const typeArr : Array<> = [
  { key: 'ALL', title: '全部', type: 1 },
  { key: 'SAVE', title: '保障中', type: 41 },
  { key: 'EXPIRED', title: '已失效', type: 10 },
  { key: 'EXPIRED2', title: '其他', type: 10 },
];

const typeData = {
  index: 0,
  routes: typeArr,
};

function InsuranceListPage(props : Props) {
  //console.log('JSPage props from lastPage', this.props.navigation.state);
  const [type, setType] = useState(typeData);
  const [isFirst, setIsFirst] = useState(true);
  const [data, setData] = useState([{ items: [] }]);
  const itemHeight = (global.SCREEN_WIDTH - 30) * 137 / 345 + 12;
  const titleHeight = (itemHeight - 12) * 80 / 137;

  const _handleIndexChange = (index) => {
    const _type = {
      index,
      routes: typeArr,
    };
    setType(_type);
  };
  const renderIndexPath = ({ section, row }) => {
    const { theme, pushTo } = props;
    const item = data[section].items[row];

    return (
      <ListItem
        section={section}
        row={row}
        item={item}
        titleHeight={titleHeight}
        itemHeight={itemHeight}
        onPress={() => pushTo('InsuranceDetail', item)}
      />
    );
  };
  const queryList = async () => {
    const list = await queryInsuranceListByUidAPI({ params: { uid: 'u0000001' } });
    console.log('list:', list);

    if (list) {
      setData([
        {
          items: list,
        },
      ]);
    }
  };
  useEffect(() => {
    if (isFirst) {
      queryList();
      setIsFirst(false);
    }
  });
  const onRefresh = async () => {
    await queryList();
    this.scrollView.endRefresh();
  };
  const endRefresh = () => {

  };

  const _renderScene = ({ route, jumpTo }) => (
    <LargeList
      ref={(com) => {
        this.scrollView = com;
      }}
      style={{
        backgroundColor: '#F4F5F5',
      }}
      contentStyle={[
        { height: global.SCREEN_HEIGHT - NavHeight - 50, backgroundColor: '#F4F5F5' },
      ]}
      data={data}
      onRefresh={onRefresh}
      endRefresh={endRefresh}
      refreshHeader={CommonLottieHeader}
      heightForIndexPath={() => itemHeight}
      heightForSection={() => 0}
      renderIndexPath={renderIndexPath}
    />
  );

  function _renderTabBar(item) {
    return (
      <TabBar
        {...item}
        scrollEnabled
        indicatorStyle={{ backgroundColor: props.theme.ThemeColor }}
        style={{ backgroundColor: '#fff', height: 50 }}
        tabStyle={styles.tab}
        labelStyle={[styles.label]}
        activeColor={props.theme.ThemeColor}
        inactiveColor="#666"
      />
    );
  }

  return (
    <View style={Styles.container}>
      <NavigationBar
        style={{ backgroundColor: '#fff' }}
        textStyle={{
          color: '#333',
          fontSize: 17,
          fontWeight: '400',
        }}
        left={<BackButton style={{ color: '#333' }} />}
        title="我的保单"
      />
      <TabView
        navigationState={type}
        renderScene={_renderScene}
        renderTabBar={_renderTabBar}
        onIndexChange={_handleIndexChange}
        lazy
        swipeEnabled={false}
        swipeDistanceThreshold={global.SCREEN_WIDTH / 10}
        initialLayout={{ width: global.SCREEN_WIDTH }}
      />
    </View>
  );
}

function propsMapping(props) {
  const { nav, theme } = props;
  return {
    nav,
    theme,
  };
}

function actionMapping(dispatch) {
  return {
    pushTo: compose(dispatch, push),
    tabTo: compose(dispatch, tab),
  };
}

//const mapDispatchToProps = dispatch => (bindActionCreators({goNext}, dispatch))

export default connect(propsMapping, actionMapping)(InsuranceListPage);
