rxjs

'use babel';

import groupBy from 'lodash/groupBy';
import forEach from 'lodash/forEach';
import axios from 'axios';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/fromPromise';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';

let countryPromise = null;
let airportPromise = null;

export function areaSelect(areaElement, countryElement) {
    if (countryPromise === null) {
        countryPromise = axios.get(`${window.Laravel.url}/api/countries`);
    }

    return Observable.fromPromise(countryPromise)
        .map(response => response.data)
        .do((items) => {
            const areaOptions = [];
            const countryOptions = [];
            forEach(groupBy(items, country => country.area.name), (countries, name) => {
                areaOptions.push(`<option value="${countries[0].area.id}">${name}</option>`);
                forEach(countries, (country) => {
                    countryOptions.push(`<option data-area-id="${country.area.id}" value="${country.id}">${country.name}</option>`);
                });
            });
            areaElement.innerHTML = areaOptions.join('');
            countryElement.innerHTML = countryOptions.join('');
        });
}

export function airportSelect(airportElement) {
    if (airportPromise === null) {
        airportPromise = axios.get(`${window.Laravel.url}/api/airports`);
    }

    return Observable.fromPromise(airportPromise)
        .map(response => response.data)
        .do((items) => {
            const airportOptions = [];
            forEach(items, (airport) => {
                airportOptions.push(`<option data-country-id="${airport.country_id}" value="${airport.id}">${airport.name}</option>`);
            });
            airportElement.innerHTML = airportOptions.join('');
        });
}

export function chainSelect(areaElement, countryElement, airportElement) {
    areaSelect(areaElement, countryElement).subscribe(() => {
        airportSelect(airportElement).subscribe(() => {
            Observable.fromEvent(areaElement, 'change')
                .do((e) => {
                    const target = e.target;
                    const options = countryElement.querySelectorAll('option');
                    options.forEach((option) => {
                        option.style.display = option.getAttribute('data-area-id') === target.value ? 'inherit' : 'none';
                    });

                    countryElement.value = Array.from(options).filter(option => option.style.display !== 'none')[0].value;
                })
                .subscribe();

            Observable.fromEvent(countryElement, 'change')
                .do((e) => {
                    const target = e.target;
                    const options = airportElement.querySelectorAll('option');
                    options.forEach((option) => {
                        option.style.display = option.getAttribute('data-country-id') === target.value ? 'inherit' : 'none';
                    });

                    airportElement.value = Array.from(options).filter(option => option.style.display !== 'none')[0].value;
                })
                .subscribe();

            areaElement.dispatchEvent(new CustomEvent('change'));
            countryElement.dispatchEvent(new CustomEvent('change'));
        });
    });
}

const areaElement = document.querySelector('[name=area_id]');
const countryElement = document.querySelector('[name=country_id]');
const airportElement = document.querySelector('[name=departure_airport_id]');

chainSelect(areaElement, countryElement, airportElement);