import React, {useState} from 'react';
import TinderCard from 'react-tinder-card';
import './Tinder.css'

const db = [
    {
        id: 1,
        name: 'Richard Hendricks',
        url: './img/richard.jpg'
    },
    {
        id: 2,
        name: 'Erlich Bachman',
        url: './img/erlich.jpg'
    },
    {
        id: 3,
        name: 'Monica Hall',
        url: './img/monica.jpg'
    },
    {
        id: 4,
        name: 'Jared Dunn',
        url: './img/jared.jpg'
    },
    {
        id: 5,
        name: 'Dinesh Chugtai',
        url: './img/dinesh.jpg'
    }
  ]

  const Tinder = () => {
    const characters = db;
    const [lastDirection, setLastDirection] = useState();
    const [cardId, setCardId] = useState([]);
  
    const swiped = (direction, nameToDelete, id) => {
      console.log('removing: ' + nameToDelete);
      setLastDirection(direction);
      if (direction === 'right') {
        cardId.push(id);
      };
      console.log(cardId);
    };
  
    const outOfFrame = (name) => {
      console.log(name + ' left the screen!');
    };

    let uniqueTags = [];
    const getId = () => {
        uniqueTags = cardId.filter(function(elem, pos) {
            return cardId.indexOf(elem) === pos;
        })
        console.log(uniqueTags)
    }
  
    return (
      <div className='tinder-container'>
            <h1>Card</h1>
            <div className='card-container'>
            {characters.map((character) => (
                <TinderCard
                className='swipe'
                key={character.id}
                onSwipe={(dir) => swiped(dir, character.name, character.id)}
                onCardLeftScreen={() => outOfFrame(character.name)}
                >
                <div className='card'>
                    <div
                    className='card-content'
                    style={{ backgroundImage: `url(${character.url})` }}
                    >
                    <h3>{character.name}</h3>
                    </div>
                </div>
                </TinderCard>
            ))}
            </div>
            {lastDirection ? (
            <h2 className='infoText'>You swiped {lastDirection}</h2>
            ) : (
            null
            )}
            <button onClick={() => getId()}>Вывести массив</button>
        </div>
    );
  };
  
  export default Tinder;