/**
 * 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, { Component } from 'react';
import { ToastAndroid } from 'react-native';
import { Root } from 'native-base';

import ProductDetailsView from './productDetailsView';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as ProductDetailsActionCreator from '../../../redux/actions/ProductDetialsPage';
import { NavigationStackScreenProps } from 'react-navigation-stack';
import { selectProduct, setSeeMoreProducts } from '../../../redux/actions/Product';
import { AppReduxState } from '../../../redux/reducers';
import { addToCart } from '../../../redux/actions/Cart';
import { showToast } from '../../../utils';

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

interface Istates {
  iconClicked: boolean;
  showToast: boolean;
  selected: string;
  selectedIndex: any;
}

class ProductDetailsContainer extends Component<Iprops, Istates> {
  constructor(props:Iprops) {
    super(props);
    console.log('ProductDetailsContainer pass');
    this.state = {
        iconClicked: true,
        showToast: false,
        selected: '1',
        selectedIndex: null,
      };
  }
  componentDidMount() {
    const { actions, product, cart } = this.props;
    console.log('ProductDetailsContainer componentDidMount pass');
    actions.getSimilarProducts();
    console.log('ProductDetailsContainer componentDidMount getSimilarProducts pass');
  }
  onValueChange = (value:string) => {
    this.setState({
        selected: value,
      });
  }
  goBack = () => {
    this.props.navigation.goBack();
  }

  favouriates(item:string, index?:number) {
    const { selectedIndex } = this.state;

    if (item === 'checked' || index === selectedIndex) {
        this.setState({ iconClicked: false, selectedIndex: null });
        ToastAndroid.showWithGravity(
                'Added to favouriates!',
                ToastAndroid.LONG,
                ToastAndroid.TOP,
            );
      } else if (item === 'unchecked') {
          this.setState({ iconClicked: true, selectedIndex: index });
          ToastAndroid.showWithGravity(
                'Removed from favouriates!',
                ToastAndroid.LONG,
                ToastAndroid.TOP,
            );
        }
  }
  goforProductDetailPage(items:any) {
    const { actions } = this.props;
    actions.selectProduct(items);
  }

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

  addToCart = (navigate:boolean) => {
    const { selected } = this.state;
    if (!selected || selected.length < 1) {
        showToast('please select a valid quantity');
        return;
      }
    const { actions, product } = this.props;
    product.selectedProduct.units += parseInt(selected);
    actions.addToCart(product.selectedProduct);
    if (navigate) {
        this.goToCart();
      }
  }
  goToCart = () => {
    this.props.navigation.navigate('Mycart');
  }
  render() {
    const { selectedIndex } = this.state;
    const { productDetails, product, cart } = this.props;
    const type = 'Ionicons';
    const heartFull = 'heart';
    const heartEmpty = 'heart-empty';
    const share = 'md-share';
    const textTitle = 'Product List';
    return (
            <Root>
                <ProductDetailsView
                    cartItemLength={cart.cartItemNumber}
                    textTitle={textTitle}
                    goBack={this.goBack}
                    details={product.selectedProduct}
                    favouriates={this.favouriates}
                    iconClicked={this.state.iconClicked}
                    type={type}
                    heartFull={heartFull}
                    heartEmpty={heartEmpty}
                    share={share}
                    onValueChange={this.onValueChange}
                    selected={this.state.selected}
                    goforProductDetailPage={(items:any) => this.goforProductDetailPage(items)}
                    selectedIndex={selectedIndex}
                    goForViewMore={(listItems:any) => this.goForViewMore(listItems)}
                    buyNow={() => this.addToCart(true)}
                    goToCart={this.goToCart}
                    similarProducts={productDetails.similarProducts}
                    productQuntity={cart.productQuntity}
                />
            </Root>

      );
  }
}

const mapStateToProps = (state:AppReduxState) => ({
  productDetails: state.productDetails,
  product: state.product,
  cart: state.cart,
});

const matchDispatchToProps = (dispatch:any) => ({
  actions: bindActionCreators({ ...ProductDetailsActionCreator, selectProduct, setSeeMoreProducts, addToCart }, dispatch),
});
export default connect(mapStateToProps, matchDispatchToProps)(ProductDetailsContainer);
