/**
 * @flow
 */
import React, { Component } from 'react';
import { View, TouchableOpacity } from 'react-native';
import FastImage from 'react-native-fast-image';
import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader';
import { LargeList } from 'react-native-largelist-v3';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { headerHeight, tabHeight } from './policyRenderUtil';
import { queryInsuranceProductsAPI } from '../InsuranceList/InsuranceAPI';
import { push } from '../../BasicNavigator/actions';

const listItemHeight = (global.SCREEN_WIDTH - 10) * 255 / 365;
const listItemWidth = global.SCREEN_WIDTH - 10;

class PolicyList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          items: [],
        },
      ],
    };
  }

  componentDidMount() : void {
    this.queryList();
  }

   renderIndexPath = (item, row ) => {
     const { theme, pushTo } = this.props;

     return (
       <TouchableOpacity
         onPress={() => pushTo('ProductDetailPage', item)}
       >
         <FastImage
           style={{
             width: listItemWidth,
             height: listItemHeight,
           }}
           source={{
             uri: item.iconUrl,
             priority: FastImage.priority.normal,
           }}
           resizeMode={FastImage.resizeMode.stretch}
         />
       </TouchableOpacity>
     );
   };

  queryList = async () => {
    const list = await queryInsuranceProductsAPI({});
    console.log('queryInsuranceProductsAPI:', list);
    if (list) {
      this.setState({
        data: [
          {
            items: list,
          },
        ],
      });
    }
  };

   onRefresh = async () => {
     await this.queryList();
     this.scrollView.endRefresh();
   };

   endRefresh = () => {

   };
/*       <LargeList
         ref={(com) => {
           this.scrollView = com;
         }}
         style={{
           backgroundColor: '#F4F5F5',
           height: global.SCREEN_HEIGHT - headerHeight - tabHeight - 49,
         }}
         contentStyle={[
           { backgroundColor: '#F4F5F5' },
         ]}
         data={this.state.data}
         onRefresh={this.onRefresh}
         endRefresh={this.endRefresh}
         refreshHeader={CommonLottieHeader}
         heightForIndexPath={() => listItemHeight}
         heightForSection={() => 0}
         renderIndexPath={this.renderIndexPath}
       />*/
   render() {
     return (
       <View>
         {this.state.data[0].items.map(this.renderIndexPath)}
       </View>
     );
   }
}

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

function propsMapping({ theme }) {
  return {
    theme,
  };
}

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