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

const Tinder = (props) => {

    const route = props.getValue;
    const cardInfo = props.cardInfo;

    const [lastDirection, setLastDirection] = useState();
    const [cardId, setCardId] = useState([]);
    const [allIds, setAllIds] = useState([]);

    const swiped = (direction, id) => {
        setLastDirection(direction);
        allIds.push(id);
        console.log(allIds.length);
        if (direction === 'right' || direction === 'up') {
            cardId.push(id);
        };
    };

    const handleDislike = (id) => {
        console.log('left');
        swiped('left', id);
    };

    const handleLike = (id) => {
        console.log('right');
        swiped('right', id);
    };

    return (
        <div className='tinder-container'>
            <div className='card-container'>
                {cardInfo.map((card) => (
                    <TinderCard
                        className='swipe'
                        key={card.id}
                        onSwipe={(dir) => {
                            swiped(dir, card.id);
                            var unique = [...new Set(cardId)]
                            var uniqueIds = [...new Set(allIds)];
                            if(uniqueIds.length === cardInfo.length) {
                                route('/main');
                                console.log(unique);
                            }
                        }}
                    >
                        <div className='card'>
                            <div
                                className='card-content'
                                style={{
                                    width: '300px',
                                    height: '500px',
                                    borderRadius: '10px',
                                    display: 'flex',
                                    flexDirection: 'column',
                                    paddingTop: '10px',
                                }}
                            >
                                <div style={{
                                    height: '188px',
                                    width: '245px',
                                    borderRadius: '10px',
                                    backgroundImage: `url(${card.imageURL})`,
                                    backgroundRepeat: 'no-repeat',
                                    backgroundPosition: 'center',
                                }}/>
                                <div style={{
                                    display: 'flex',
                                    flexDirection: 'column',
                                    justifyContent: 'space-between',
                                    height: '150px',
                                    width: '100%',
                                }}>
                                    <h3>{card.question}</h3>
                                <div style={{
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                    marginLeft: '3px',
                                    marginRight: '3px',
                                }}>
                                    <button
                                    style={{
                                        height: '69px',
                                        width: '69px',
                                        backgroundColor: 'rgb(0,0,0,0)',
                                        border: 'none',
                                    }}
                                    onClick={() => handleDislike(card.id)}
                                >
                                    <img src="./Dis.png" alt='#' style={{
                                        height: '100%',
                                        width: '100%',
                                    }} onClick={() => handleDislike(card.id)}/>
                                </button>
                                <button
                                    style={{
                                        height: '69px',
                                        width: '69px',
                                        backgroundColor: 'rgb(0,0,0,0)',
                                        border: 'none',
                                    }}
                                    onClick={() => handleLike(card.id)}
                                >
                                    <img src="./Like.png" alt='#' style={{
                                        height: '100%',
                                        width: '100%',
                                    }} onClick={() => handleLike(card.id)}/>
                                </button>
                                </div>
                                </div>
                                
                            </div>
                        </div>
                    </TinderCard>
                ))}
            </div>
        </div>
    );
}

export default Tinder;