class SetViewportController {
    constructor () {
        this.div = document.getElementById('setViewportDiv');
        this.viewportEntryDiv = undefined;
        this.standardRangePickerDiv = undefined;
        this.initHtml();
        this.expanded = false;
    }

    initHtml () {
        this.div.style.display = 'grid';
        this.div.style.gridTemplateColumns = 'auto';
        this.div.style.gridTemplateRows = 'auto auto auto';
        this.headerDiv = document.createElement('div');
        this.headerDiv.innerHTML = '<span style="font-weight: bold; cursor: pointer;" onclick="svc.toggleExpand();" title="Click to expand">Time Range&nbsp;</span>';
        this.headerDiv.style.display = 'grid';
        this.headerDiv.style.gridColumn = '1';
        this.div.appendChild(this.headerDiv);
        this.div.style.gap = '5px';

        this.viewportEntryDiv = document.createElement('div');
        this.viewportEntryDiv.style.display = 'none';
        this.viewportEntryDiv.innerHTML = 'Earliest&nbsp;<input id="viewportEarliestInput" size="18"><br>Latest&nbsp;&nbsp;&nbsp;<input id="viewportLatestInput" size="18">';
        this.div.appendChild(this.viewportEntryDiv);
        this.standardRangePickerDiv = document.createElement('div');
        this.standardRangePickerDiv.style.display = 'none';
        let srpHtml = '<span id="setViewportApplyButton" style="border:solid blue;" onclick="svc.updateFromInputs();">&nbsp;Apply&nbsp;</span>&nbsp;&nbsp;'
        srpHtml += '<select oninput="svc.processSrpInput();" name="timerange" id="timerange-select"><option value="">Choose...</option>' 
        srpHtml += '<option value="Last15min">Last 15 Minutes</option>';
        srpHtml += '<option value="Last30min">Last 30 Minutes</option>';
        srpHtml += '<option value="Last1hr">Last 1 Hour</option>';
        srpHtml += '<option value="Last2hr">Last 2 Hours</option>';
        srpHtml += '<option value="Last4hr">Last 4 Hours</option>';
        srpHtml += '<option value="Last8hr">Last 8 Hours</option>';
        srpHtml += '<option value="Last12hr">Last 12 Hours</option>';
        srpHtml += '<option value="Last24hr">Last 24 Hours</option>';
        srpHtml += '</select>'
        this.standardRangePickerDiv.innerHTML = srpHtml;
        this.div.appendChild(this.standardRangePickerDiv);

        document.getElementById('viewportEarliestInput').value = pdate(fullRangeStart);
        document.getElementById('viewportLatestInput').value = pdate(fullRangeEnd);
    }

    processSrpInput() {
        let pickedRange = document.getElementById('timerange-select').value;
        let newEarliest = visibleRangeStart;
        let now = parseInt(Date.now() / 1000) - 60; // stay 1 minute back so we don't 
        if (pickedRange === '') {return;}
        else if (pickedRange === 'Last15min') { newEarliest = now - 900; }
        else if (pickedRange === 'Last30min') { newEarliest = now - 1800; }
        else if (pickedRange === 'Last1hr') { newEarliest = now - 3600; }
        else if (pickedRange === 'Last2hr') { newEarliest = now - 7200; }
        else if (pickedRange === 'Last4hr') { newEarliest = now - 14400; }
        else if (pickedRange === 'Last8hr') { newEarliest = now - 28800; }
        else if (pickedRange === 'Last12hr') { newEarliest = now - 43200; }
        else if (pickedRange === 'Last24hr') { newEarliest = now - 86400; }

        document.getElementById('viewportEarliestInput').value = pdate(newEarliest);
        document.getElementById('viewportLatestInput').value = pdate(now);
    }

    updateHtml () {
        document.getElementById('viewportEarliestInput').value = pdate(fullRangeStart);
        document.getElementById('viewportLatestInput').value = pdate(fullRangeEnd);
    }

    updateFromInputs () {
        // now uses millis throughout
        let earliest = parseInt(new Date(document.getElementById('viewportEarliestInput').value).getTime());
        let latest = parseInt(new Date(document.getElementById('viewportLatestInput').value).getTime());
        console.log('Input requested viewport earliest ' + pdate(earliest) + ' latest ' + pdate(latest));
        
        // new validation shit
        // earliest and latest are millis

        const systemEpoch = 1602892800;
        const systemEpochMillis = systemEpoch * 1000;
        const nowMillis = Date.now();
        const now = parseInt(nowMillis / 1000);

        if (earliest < systemEpochMillis) {
            earliest = systemEpochMillis;
            toast('Cannot query before system epoch. Query start trimmed.');
            if (latest < earliest) {
                latest = earliest + 900 * 1000;
                toast('Query end now before earliest. End adjusted to earliest + 15min');
            }
        }
        if (latest > nowMillis) {
            latest = nowMillis;
            toast('Cannot query later than current time. Query end trimmed.');
        }
        if (earliest > latest) {
            earliest = latest - 900 * 1000;
            toast('Start cannot be after end. Start adjusted to end -15min.');
        }
        if (latest - earliest > 86400 * 30 * 1000) {
            latest = earliest + (86400 * 30 * 1000);
            toast('Query span must be less than 30 days. Query end trimmed.');
        }
        if (fullRangeEnd - earliest > 86400 * 30 * 1000) {
            toast('Requested a span that would be >30d with existing data, clearing state and disabling autoupdate');
            clearData();
            updateEnabled = false;
            autoupdateToggle.checked = false;
        }
        //console.log('updateFromInputs calling changeRange');
        changeRange(earliest, latest, earliest, latest);
    }

    toggleExpand () {
        if (this.expanded) {
            this.collapse();
            this.expanded = false;
        } else {
            this.expand();
            this.expanded = true;
        }
    }

    collapse () {
        this.updateHtml();
        this.viewportEntryDiv.style.display = 'none';
        this.standardRangePickerDiv.style.display = 'none';
    }

    expand () {
        this.updateHtml();
        this.viewportEntryDiv.style.display = 'block';
        this.standardRangePickerDiv.style.display = 'block';
    }
}