import Location from "../Location.js";
import Event from "../Event.js";

import GithubLocations from "./GithubLocations.js";
import Locations from "../Locations.js";


export default class App {

    constructor() {
        this._init();
    }

    _init() {
        this.githubLocations = new GithubLocations('Midefos', 'idealista-enhancer');
    }

    async load() {
        const newLocation = document.querySelector('textarea#newLocation');
        newLocation.textContent = JSON.stringify(Location.empty(), undefined, 4);

        const locations = await this.githubLocations.extractLocations();

        const locationQuantity = document.querySelector('#locations-quantity');
        locationQuantity.textContent = locations.length;
        const tableBody = document.querySelector('#locations-table tbody');
        for (const location of locations) {
            tableBody.insertAdjacentHTML('afterend', `<tr>
                <td>${location.name}</td>
                <td><a data-name="${location.name}" class="load-location waves-effect waves-light btn">Cargar</a></td>
            </tr>`);
        }
        Event.click('.load-location', async (element) => {
            const rawName = element.getAttribute('data-name'); 
            const name = rawName.substring(0, rawName.indexOf('.json'));
            const location = await Locations.get(name);
            document.querySelector('#locationFilename').value = name;
            newLocation.textContent = JSON.stringify(location, undefined, 4);
        })
    }

}

const app = new App();
app.load()