/**
 * 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 { View, Button, Icon, Input, Text } from 'native-base';
import styles from './styles';
import { connect } from 'react-redux';
import { AppReduxState } from '../../redux/reducers';
import { bindActionCreators } from 'redux';
import {
  addToCart,
  removeFromCart,
  raiseQuantity,
  reduceQuantity,
} from '../../redux/actions/Cart';
import { Alert } from 'react-native';

interface AddToCartButtonProps extends AppReduxState {
  productId: string;
  productQty: number;
  product: any;
  actions?: any;
}
interface AddToCartButtonState {
  productQty: number;
}

class AddToCartButton extends React.Component<
  AddToCartButtonProps,
  AddToCartButtonState
  > {
  componentDidMount() { }

  reduceQuantity = () => {
    const { productId, productQty, cart, actions } = this.props;
    const index = cart.cartProducts.findIndex((el) => el.id === productId);
    if (cart.cartProducts[index].units > 1) {
      actions.reduceQuantity(index);
    } else {
      this.openAlert(index);
    }
  };

  raiseQuantity = () => {
    const { productId, productQty, cart, actions } = this.props;
    const index = cart.cartProducts.findIndex((el) => el.id === productId);
    actions.raiseQuantity(index);
  };

  addToCart = () => {
    const { product, actions } = this.props;
    product.units += 1;
    actions.addToCart(product);
  };

  openAlert = (productId: number) => {
    Alert.alert(
      'Remove From Cart!',
      'Are you Sure you want to remove this Product',
      [
        {
          text: 'Cancel',
          style: 'cancel',
        },
        {
          text: 'Remove',
          onPress: () => {
            const { actions } = this.props;
            actions.removeFromCart(productId);
          },
        },
      ],
      { cancelable: false }
    );
  };

  render() {
    const { productQuntity } = this.props.cart;
    const productQty = productQuntity[this.props.productId];
    return productQty ? (
      <View style={styles.counterView}>
        <Button transparent onPress={this.reduceQuantity}>
          <Icon name="remove-circle-outline" type="Ionicons"
            style={{ color: 'red' }} />
        </Button>

        <Input disabled placeholder="4" value={`${productQty}`} />
        <Button transparent onPress={this.raiseQuantity}>
          <Icon name="ios-add-circle-outline" type="Ionicons"
            style={{ color: 'green' }} />
        </Button>
      </View>
    ) : (
        <Button block danger style={{ width: '100%' }} onPress={this.addToCart}>
          <Text>Add</Text>
        </Button>
      );
  }
}

const mapStateToProps = (state: AppReduxState) => {
  return {
    cart: state.cart,
  };
};
const matchDispatchToProps = (dispatch: any) => ({
  actions: bindActionCreators(
    { addToCart, removeFromCart, raiseQuantity, reduceQuantity },
    dispatch
  ),
});

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