/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */
import React from 'react';
import HomeView from './homeView';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as HomeActionCreator from '../../../redux/actions/HomePage';
import {
  selectProduct,
  setSeeMoreProducts,
} from '../../../redux/actions/Product';
import { NavigationStackScreenProps } from 'react-navigation-stack';
import { AppReduxState } from '../../../redux/reducers';
import { getCartProducts } from '../../../redux/actions/Cart';

interface Iprops extends NavigationStackScreenProps, AppReduxState {
  actions: any;
}

interface Istates {
  segment: boolean;
  selectedIndex: any;
  spinner: boolean;
}

class HomeContainer extends React.Component<Iprops, Istates> {
  constructor(props: Iprops) {
    super(props);
    this.state = {
      selectedIndex: null,
      segment: false,
      spinner: true,
    };
  }
  componentDidMount() {
    const { actions } = this.props;
    actions.getCartProducts();
    actions
      .getShortOffers()
      .then((success: any) => this.setState({ spinner: false }))
      .catch((e: any) => this.setState({ spinner: false }));
    actions.getSliderData();
    actions.getAccordionData();
  }

  toggleDrawer = () => {
    this.props.navigation.toggleDrawer();
  };

  goToMyCart = () => {
    this.props.navigation.navigate('Mycart');
  };

  goforProductPage = (title: string, products: any) => {
    const { navigation, actions } = this.props;
    actions.setCategoryTitle(title);
    actions.setCategoryProducts(products);
    navigation.push('Products');
  };
  goforProductDetailPage(items: any) {
    console.log('action pass', items);
    const { navigation, actions } = this.props;
    actions.selectProduct(items);
    console.log('action pass');
    navigation.push('ProductdetailsRedux');
    console.log('mavigation pass');
  }

  changeStateFunction(index: any) {
    const { selectedIndex } = this.state;
    if (index === selectedIndex) {
      this.setState({
        selectedIndex: null,
      });
    } else {
      this.setState({
        selectedIndex: index,
      });
    }
  }

  goToViewAll(listItems: any) {
    const { navigation, actions } = this.props;
    actions.setSeeMoreProducts(listItems);
    navigation.navigate('Viewmore');
  }

  render() {
    const { selectedIndex, spinner } = this.state;
    const { home, cart } = this.props;
    return (
      <HomeView
        cartItemLength={cart.cartItemNumber}
        toggleDrawer={this.toggleDrawer}
        goToMyCart={this.goToMyCart}
        goforProductPage={this.goforProductPage}
        selectedIndex={selectedIndex}
        changeStateFunction={(i: any) => this.changeStateFunction(i)}
        goforProductDetailPage={(items: any) =>
          this.goforProductDetailPage(items)
        }
        products={home.shortOffers}
        goToViewAll={(listItems: any) => this.goToViewAll(listItems)}
        accordionData={home.accordionData}
        sliderData={home.sliderData}
        spinner={spinner}
      />
    );
  }
}

const mapStateToProps = (state: AppReduxState) => {
  return {
    home: state.home,
    cart: state.cart,
  };
};
const matchDispatchToProps = (dispatch: any) => ({
  actions: bindActionCreators(
    {
      ...HomeActionCreator,
      selectProduct,
      setSeeMoreProducts,
      getCartProducts,
    },
    dispatch
  ),
});

export default connect(mapStateToProps, matchDispatchToProps)(HomeContainer);
