/**
 * 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 { TouchableOpacity, Image } from 'react-native';
import { Icon, Container, Footer, View } from 'native-base';
import Swiper from 'react-native-deck-swiper';
import styles from './tinderCardsStyle';
interface TinderCardsViewProps {
  cardsState: any;
  renderCard: any;
  onSwipedAllCards: () => void;
  cardIndex: number;
  overlayLabels: any;
  onSwiped: (type: any) => void;
  swipeLeft: () => void;
  swipeBack: () => void;
  swipeRight: () => void;
  swipeTop: () => void;
  getSwiperData: (type: any) => void;
  toggleDrawer: (type: any) => void;
  containerColor: string;
}

const TinderCardsView = (props: TinderCardsViewProps) => {
  const {
    cardsState,
    renderCard,
    onSwipedAllCards,
    cardIndex,
    overlayLabels,
    swipeLeft,
    swipeBack,
    swipeRight,
    swipeTop,
    containerColor,
  } = props;
  const backImg = require('../../../../assets/star/back.png');
  return (
    <Container style={{ backgroundColor: '#f0f4f9' }}>
      <View style={styles.containerSwiper}>
        <Swiper
          ref={(swiper: any) => {
            props.getSwiperData(swiper);
          }}
          useViewOverflow={false}
          onSwiped={() => props.onSwiped('general')}
          onSwipedLeft={() => props.onSwiped('left')}
          onSwipedRight={() => props.onSwiped('right')}
          onSwipedTop={() => props.onSwiped('top')}
          onSwipedBottom={() => props.onSwiped('bottom')}
          // onTapCard={swipeLeft}
          cards={cardsState}
          cardIndex={cardIndex}
          cardVerticalMargin={10}
          renderCard={renderCard}
          onSwipedAll={onSwipedAllCards}
          stackSize={2}
          infinite={true}
          showSecondCard={true}
          stackSeparation={0}
          overlayLabels={overlayLabels}
          animateOverlayLabelsOpacity
          animateCardOpacity
          swipeBackCard={true}
          backgroundColor={containerColor}
          stackAnimationTension={10}
          cardHorizontalMargin={0}
          cardStyle={{ alignItems: 'center' }}
        />
      </View>

      <Footer style={styles.footerSyle}>
        <View style={styles.footer}>
          <View style={styles.buttonContainer}>
            <TouchableOpacity
              style={[styles.button, styles.red]}
              onPress={swipeLeft}
            >
              <Icon name='close' type='Ionicons' style={styles.closeIcon} />
            </TouchableOpacity>

            <TouchableOpacity
              style={[styles.button, styles.orange]}
              onPress={swipeBack}
            >
              <Image
                source={backImg}
                resizeMode={'contain'}
                style={styles.backIcon}
              />
            </TouchableOpacity>

            <TouchableOpacity
              style={[styles.button, styles.starIconBorder]}
              onPress={swipeRight}
            >
              <Icon name='star' type='Ionicons' style={styles.starIcon} />
            </TouchableOpacity>

            <TouchableOpacity
              style={[styles.button, styles.green]}
              onPress={swipeTop}
            >
              <Icon name='heart' type='Ionicons' style={styles.heartIcon} />
            </TouchableOpacity>
          </View>
        </View>
      </Footer>
    </Container>
  );
};
export default TinderCardsView;
