export class Locations {
    constructor(parentElement) {
        this.listItems = Array.from(parentElement.querySelectorAll('.js-locations-list-item'));
        this.markers = Array.from(parentElement.querySelectorAll('.js-locations-marker'));
        this.cards = Array.from(parentElement.querySelectorAll('.js-locations-card'));
        this.cardsWrapper = parentElement.querySelector('.js-locations-cards');

        this.listItems.forEach(item => item.addEventListener('mouseenter', this.handleListItemMouseEnter))
        this.listItems.forEach(item => item.addEventListener('mouseleave', this.handleListItemMouseLeave))
        this.listItems.forEach(item => item.addEventListener('click', this.handleClick))
        this.markers.forEach(item => item.addEventListener('mouseenter', this.handleMarkerMouseEnter))
        this.markers.forEach(item => item.addEventListener('mouseleave', this.handleMarkerMouseLeave))
        this.markers.forEach(item => item.addEventListener('click', this.handleClick))

        const randomActiveId = Math.floor(Math.random() * (this.listItems.length - 1) + 1 )
        this.setActiveCard(randomActiveId)
    }


    handleListItemMouseEnter = (event) => {
        const targetLocationId = event.target.dataset.locationId;
        const hoverLocationMarker = this.markers.filter(marker => marker.dataset.locationId === targetLocationId)[0];
        if (hoverLocationMarker) hoverLocationMarker.classList.add('active');
    }

    handleListItemMouseLeave = (event) => {
        const targetLocationId = event.target.dataset.locationId;
        const hoverLocationMarker = this.markers.filter(marker => marker.dataset.locationId === targetLocationId)[0];
        if (hoverLocationMarker) hoverLocationMarker.classList.remove('active');
    }

    handleMarkerMouseEnter = (event) => {
        const targetLocationId = event.target.dataset.locationId;
        const hoverLocationListItem = this.listItems.filter(item => item.dataset.locationId === targetLocationId)[0];
        if (hoverLocationListItem) hoverLocationListItem.parentNode.classList.add('active');
        event.target.classList.add('active');
    }

    handleMarkerMouseLeave = (event) => {
        const targetLocationId = event.target.dataset.locationId;
        const hoverLocationListItem = this.listItems.filter(item => item.dataset.locationId === targetLocationId)[0];
        if (hoverLocationListItem) hoverLocationListItem.parentNode.classList.remove('active');
        event.target.classList.remove('active');
    }

    handleClick = (event) => {
        const clickLocationId = event.target.dataset.locationId;
        this.setActiveCard(clickLocationId);
    }

    setActiveCard(cardId) {
        this.cards.forEach(card => card.classList.add('hidden'));
        const activeCard = this.cards.filter(card => card.dataset.locationId == cardId)[0];

        activeCard.classList.remove('hidden');
        this.markers.forEach(marker => marker.classList.remove('selected'));
        this.listItems.forEach(item => item.parentNode.classList.remove('selected'));


        const correspondingMarker = this.markers.filter(marker => marker.dataset.locationId == cardId)[0];
        const correspondingListItem = this.listItems.filter(item => item.dataset.locationId == cardId)[0];

        if(correspondingMarker) correspondingMarker.classList.add('selected');
        correspondingListItem.parentNode.classList.add('selected');
    }

}