/**
 * 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, ReactNode } from 'react';
import { Text, View, ImageBackground } from 'react-native';
import { CardItem, Icon } from 'native-base';
import data from '../../../../Database/star';
import styles from './tinderCardsStyle';
import TinderCardsView from './tinderCardsView';
import { NavigationDrawerScreenProps } from 'react-navigation-drawer';

interface ExempleState {
  cards: Array<any>;
  swipedAllCards: boolean;
  cardIndex: number;
}
interface ExempleProp extends NavigationDrawerScreenProps {}

class TinderCardsContainer extends React.Component<ExempleProp, ExempleState> {
  swiper: any;
  constructor(props: ExempleProp) {
    super(props);
    this.state = {
      cards: Array.from(Array(data.tinderCards.length).keys()),
      swipedAllCards: false,
      cardIndex: 0,
    };
  }

  renderCard = (card: any, index: any) => {
    const cardData = data.tinderCards[card];
    return (
      <View style={styles.card} key={index}>
        <ImageBackground
          source={cardData.image}
          style={styles.imageBackground}
          imageStyle={styles.imagestyle}
          resizeMode={'cover'}
        >
          <View style={styles.overlay}>
            <CardItem style={styles.TinderCardItem}>
              {cardData.occupation && (
                <View style={styles.rowDirectionView}>
                  <Text style={styles.textWithIconLast}>
                    {cardData.name} <Text>{',' + cardData.age}</Text>
                  </Text>
                  <Icon
                    active
                    name={'information-circle'}
                    style={styles.cardsInfoIcon}
                  />
                </View>
              )}
              {cardData.occupation && (
                <View style={styles.cadsViewDirection}>
                  <Icon
                    active
                    name={cardData.iconOccu}
                    style={styles.cardsIcons}
                  />
                  <Text style={styles.cardsTextStyle}>
                    {cardData.occupation}
                  </Text>
                </View>
              )}
              {cardData.occupation && (
                <View style={styles.cadsViewDirection}>
                  <Icon
                    active
                    name={cardData.iconPin}
                    style={styles.cardsIcons}
                  />
                  <Text style={styles.cardsTextStyle}>{cardData.distance}</Text>
                </View>
              )}
            </CardItem>
          </View>
        </ImageBackground>
      </View>
    );
  };
  getSwiperData(item: any) {
    this.swiper = item;
  }

  onSwiped = (type: any) => {
    console.log(`on swiped ${type}`);
  };
  onSwipedAllCards = () => {
    this.setState({
      swipedAllCards: true,
    });
  };

  swipeLeft = () => {
    this.swiper.swipeLeft();
  };
  swipeBack = () => {
    this.swiper.swipeBack();
  };
  swipeRight = () => {
    this.swiper.swipeRight();
  };
  swipeTop = () => {
    this.swiper.swipeTop();
  };

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

  render() {
    const containerColor = 'transparent';
    const { cards, cardIndex } = this.state;

    return (
      <TinderCardsView
        cardsState={cards}
        renderCard={this.renderCard}
        onSwipedAllCards={this.onSwipedAllCards}
        cardIndex={cardIndex}
        overlayLabels={data.overlayLabels}
        onSwiped={(type: any) => this.onSwiped(type)}
        swipeLeft={this.swipeLeft}
        swipeBack={this.swipeBack}
        swipeRight={this.swipeRight}
        swipeTop={this.swipeTop}
        getSwiperData={(item: any) => this.getSwiperData(item)}
        containerColor={containerColor}
        toggleDrawer={this.toggleDrawer}
      />
    );
  }
}
export default TinderCardsContainer;
