/**
 * 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 { Root, Toast } from 'native-base';

import ProductDetailsView from './productDetailsView';
import { NavigationStackScreenProps } from 'react-navigation-stack';

interface Iprops extends NavigationStackScreenProps {}
interface Istate {
  iconClicked: boolean;
  showToast: boolean;
  selected: string;
  selectedIndex: any;
}

class ProductDetailsContainer extends Component<Iprops, Istate> {
  constructor(props: Iprops) {
    super(props);
    this.state = {
      iconClicked: true,
      showToast: false,
      selected: 'key1',
      selectedIndex: null,
    };
  }
  onValueChange = (value: string) => {
    this.setState({
      selected: value,
    });
  };
  goBack = () => {
    this.props.navigation.goBack();
  };

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

    if (item === 'checked' || index === selectedIndex) {
      this.setState({ iconClicked: false, selectedIndex: null });
      Toast.show({
        text: 'Added to favorite!',
        duration: 3000,
      });
    } else if (item === 'unchecked') {
      this.setState({ iconClicked: true, selectedIndex: index });
      Toast.show({
        text: 'Removed from favorite!',
        duration: 3000,
      });
    }
  }

  goforProductDetailPage(items: any) {
    this.props.navigation.navigate('GroceryProductdetails', { items });
  }

  goForViewMore(listItems: any, offerIndex: number) {
    this.props.navigation.navigate('GroceryViewmore', {
      listItems,
      offerIndex,
    });
  }
  goToMyCart = () => {
    this.props.navigation.navigate('GroceryMycart');
  };
  render() {
    const { selectedIndex } = this.state;
    const type = 'Ionicons';
    const heartFull = 'heart';
    const heartEmpty = 'heart-empty';
    const share = 'md-share';
    const textTitle = 'Product Details';
    const details = this.props.navigation.getParam('items');
    return (
      <Root>
        <ProductDetailsView
          textTitle={textTitle}
          goBack={this.goBack}
          details={details}
          favouriates={(item: any, index?: number) =>
            this.favouriates(item, index)
          }
          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, offerIndex: number) =>
            this.goForViewMore(listItems, offerIndex)
          }
          goToMyCart={this.goToMyCart}
        />
      </Root>
    );
  }
}
export default ProductDetailsContainer;
