import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { screen } from "nativescript-platform"
import { WebViewExt } from '@nota/nativescript-webview-ext';
import { mapHtml } from './map';
import { jsStr } from './mapscript';
import { ModalDialogParams } from '@nativescript/angular';
import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { SERVER_URL } from '~/constants/api.constants';
import { DateTimePipe } from '~/shared/pipes/date-time.pipe';
import { CampEventOutput } from '~/pages/event/entities/camp-event-search.types';
import { GenEventMapPickerState, SetIsLoading } from '~/pages/event/state-mgmt/gen/gen-event-map-picker.state';

const campData = (title: string, arr: { value: string, title: string }[]) => {
    return {
        header: `\`<h3>${title}</h3>\``,
        body:
            `
            \`<table><tbody>
            ${arr.map(item => `
            <tr>
            <td>${item.title}</td>
            <td><span class="FormLabel">${item.value}</span></td>
            </tr>
            `).join('')}
            </tbody></table>\`
        `
    }
}

@Component({
    selector: 'CampMapModal',
    moduleId: module.id,
    templateUrl: './camp-map-modal.component.html',
})
export class CampMapModal implements OnInit, AfterViewInit {
    @Select(GenEventMapPickerState.isLoading)
    isLoading$: Observable<boolean>;
    @ViewChild('mapView', { static: true })
    webview: ElementRef<WebViewExt>;

    camps: CampEventOutput[]
    htmlstr = ''
    CAMP_PRESENT =
        SERVER_URL + 'Junak/App_Themes/Modern/camp_present.png';
    CAMP_PAST =
        SERVER_URL + 'Junak/App_Themes/Modern/camp_past.png';
    CAMP_FUTURE =
        SERVER_URL + 'Junak/App_Themes/Modern/camp_future.png';
    CAMP_REAL =
        SERVER_URL + 'Junak/App_Themes/Modern/camp_real.png';
    constructor(
        private params: ModalDialogParams,
        private store: Store,
        private dateTimePipe: DateTimePipe,
    ) {
    }

    ngOnInit(): void {
        this.camps = this.params.context.camps
        this.store.dispatch(new SetIsLoading(true))
        this.htmlstr = mapHtml(screen.width, screen.height - 225, jsStr)
    }
    ngAfterViewInit(): void {

        const webview = this.webview && this.webview.nativeElement;
        webview.on(WebViewExt.loadFinishedEvent, () => {
            this.store.dispatch(new SetIsLoading(false))
            this.camps.forEach(camp => {
                const values = [
                    { value: camp.EventCampState, title: 'Stav:' },
                    { value: this.dateTimePipe.transform(camp.StartDate, false), title: 'Začátek:' },
                    { value: this.dateTimePipe.transform(camp.EndDate, false), title: 'Konec:' },
                    { value: camp.RegistrationNumber, title: 'Evidenční číslo:' },
                    { value: camp.Unit, title: 'Pořádající jednotka:', },
                    { value: camp.Location, title: 'Místo konání:', },
                    { value: camp.PersonLeader, title: 'Vedoucí tábora:', },
                    { value: camp.MobileContactDisplay, title: 'Telefon v době tábora:', },
                    { value: camp.DateReal === 'true' ? 'ano' : 'ne', title: 'Skutečnost odevzdána:', },
                ].filter(i => i.value)
                const data = campData(camp.DisplayName, values)
                let type = this.CAMP_PAST;
                const today = new Date();
                const start = new Date(camp.StartDate)
                const end = new Date(camp.EndDate);
                if (camp.DateReal) {
                    type = this.CAMP_REAL;
                } else if (start > today) {
                    type = this.CAMP_FUTURE;
                } else if (start < today && end > today) {
                    type = this.CAMP_PRESENT;
                } else if (end < today) {
                    type = this.CAMP_PAST;
                }

                const a = `$map.addMarker(${camp.GpsLongitude},${camp.GpsLatitude},${data.body},${data.header},"${type}")`
                webview.executeJavaScript(a)
            })

        });
    }

    close() {
        this.params.closeCallback();
    }


}
