class SensorSelectView extends BasicView {
    constructor(controller) {
        super(controller);

        //Capture widget defaults
        this.radioContainer1 = $('#radio-container-1').clone();
        this.radioContainer2 = $('#radio-container-2').clone();
        this.sensorContainer1 = $('#sensor-container-1').clone();
        this.sensorContainer2 = $('#sensor-container-2').clone();
        this.activeSensorContainer = $('#active-sensor-container').clone();
    }

    bindEvents() {
        super.bindEvents();

        $('#radio-container-1, #radio-container-2').on('click', '[name="manual-select"]', this.controller.selectManual.bind(this.controller));
        $('#radio-container-1').on('click', '[name="switching-select-1"]', this.controller.selectAutomatic.bind(this.controller));
        $('#radio-container-2').on('click', '[name="switching-select-2"]', this.controller.selectAutomatic.bind(this.controller));
        $('#switching-container').on('change', '#criteria-select', this.controller.changeCriteria.bind(this.controller));
        $('#switching-container').on('change', '#hysteresis', this.controller.changeHysteresis.bind(this.controller));
    }

    drawActiveSource(model)
    {
        $('#active-sensor-container').html(this.activeSensorContainer.html());

        $('#active-sensor-name').html('<h2>' + model.sensors[model.selectedSource].sensorName + '</h2>');
        $('#active-sensor-source').html('<h2>' + model.sensors[model.selectedSource].activeSource.displayName + '</h2>');
        $('#active-sensor-field').attr('data-field', '0x26' + (parseInt(model.selectedSource) + 1) + '1');
        $('#active-sensor-field').attr('data-sender', 'atprocessor');
        $('#active-sensor-field').attr('data-instance', '0');

        $('#active-sensor-container').show();
    }

    drawApplyBox(model) {
        $('#active-sensor-container').append('<fieldset class="loading-box"><div>Switching updated after apply.</div></fieldset>');

        $('#active-sensor-container').show();
    }

    drawLeftArrow() {
        var canvas = $('#arrow-1')[0];
        canvas.height = canvas.clientHeight;
        canvas.width = canvas.clientWidth;
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.lineWidth = 2;
            ctx.lineJoin = "round";
            ctx.lineCap = "round";
            ctx.shadowBlur = 1;
            ctx.shadowColor = "#666";
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2, 0);
            ctx.lineTo(canvas.width / 2, canvas.height / 1.5);
            ctx.lineTo(canvas.width * 0.9, canvas.height / 1.5);
            ctx.lineTo(canvas.width * 0.9 - 10, canvas.height / 1.5 - 10);
            ctx.moveTo(canvas.width * 0.9, canvas.height / 1.5);
            ctx.lineTo(canvas.width * 0.9 - 10, canvas.height / 1.5 + 10);
            ctx.strokeStyle = "#333";
            ctx.stroke();
        }
    }

    drawLoadingBox(model) {
        $('#active-sensor-container').append('<fieldset class="loading-box"><div>Loading...</div></fieldset>');

        $('#active-sensor-container').show();
    }

    drawRadioButtons(model, sensorNumber) {
        var $radioContainer = $('#radio-container-' + sensorNumber);
        var radioDefault = "radioContainer" + sensorNumber;
        $radioContainer.html(this[radioDefault].html());

        if (model.switchingCriteria == "heel") {
            $('label[for="port-select-1"], label[for="port-select-2"]').html('<h2>Heel STBD</h2>');
            $('label[for="stbd-select-1"], label[for="stbd-select-2"]').html('<h2>Heel Port</h2>');
        } else if (model.switchingCriteria == "twa") {
            $('label[for="port-select-1"], label[for="port-select-2"]').html('<h2>Upwind</h2>');
            $('label[for="stbd-select-1"], label[for="stbd-select-2"]').html('<h2>Downwind</h2>');
        } else {
            $('label[for="port-select-1"], label[for="port-select-2"]').html('<h2>Port Tack</h2>');
            $('label[for="stbd-select-1"], label[for="stbd-select-2"]').html('<h2>STBD Tack</h2>');
        }

        if (model.selectionMode == model.selectionModeManual) {
            if (model.selectedSource + 1 == sensorNumber) {
                $('#manual-select-' + sensorNumber).prop('checked', true);
            }
        } else {
            if (model.portTackSensor + 1 == sensorNumber) {
                $('#port-select-' + sensorNumber).prop('checked', true);
            } else {
                $('#stbd-select-' + sensorNumber).prop('checked', true);
            }
        }
        $radioContainer.show();
    }

    drawRightArrow() {
        var canvas = $('#arrow-2')[0];
        canvas.height = canvas.clientHeight;
        canvas.width = canvas.clientWidth;
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.lineWidth = 2;
            ctx.lineJoin = "round";
            ctx.lineCap = "round";
            ctx.shadowBlur = 1;
            ctx.shadowColor = "#666";
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2, 0);
            ctx.lineTo(canvas.width / 2, canvas.height / 1.5);
            ctx.lineTo(canvas.width * 0.1, canvas.height / 1.5);
            ctx.lineTo(canvas.width * 0.1 + 10, canvas.height / 1.5 - 10);
            ctx.moveTo(canvas.width * 0.1, canvas.height / 1.5);
            ctx.lineTo(canvas.width * 0.1 + 10, canvas.height / 1.5 + 10);
            ctx.strokeStyle = "#333";
            ctx.stroke();
        }
    }

    drawSensor(model, sensorNumber) 
    {
        var $sensorContainer = $('#sensor-container-' + sensorNumber);
        var sensorDefault = "sensorContainer" + sensorNumber;
        $sensorContainer.html(this[sensorDefault].html());

        var $sensorNameContainer = $('#sensor-name-' + sensorNumber);
        var $sensorFieldContainer = $('#sensor-field-' + sensorNumber);

        $sensorNameContainer.html('<h2>' + model.sensors[sensorNumber - 1].sensorName + '</h2>');
        $sensorFieldContainer.attr('data-field', '0x26' + sensorNumber + '1');
        $sensorFieldContainer.attr('data-sender', 'atprocessor');
        $sensorFieldContainer.attr('data-instance', '0');

        if (model.selectedSource + 1 != sensorNumber) {
            $sensorContainer.css('opacity', '0.6');
        } else {
            $sensorContainer.css('opacity', '');
        }
        $sensorContainer.show();
    }

    drawSwitchingCriteria(model) {
        $('#criteria-select option[value="' + model.switchingCriteria + '"]').prop('selected', true);
        $('#hysteresis').val(model.hysteresis);

        $('#switching-container').show();
    }

    resetView() {
        $('#heel-container').hide();
        $('#radio-container-1').empty();
        $('#radio-container-2').empty();
        $('#sensor-container-1').empty();
        $('#sensor-container-2').empty();
        $('#switching-container').hide();
        $('#tack-container').hide();
        $('#pos-container').hide();
        $('#wind-container').hide();
        $('#true-wind-container').hide();
        $('#active-sensor-container').empty().hide();
        var canvas = $('#arrow-1')[0];
        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
        var canvas = $('#arrow-2')[0];
        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
    }

    update(model) {
        this.resetView();

        if (model.widgets['drawSourceDisplay']) {
            this.drawSensor(model, 1);
            this.drawSensor(model, 2);
        }
        if (model.widgets['drawActiveSource']) {
            this.drawActiveSource(model);
        }
        if (model.widgets['drawArrow1']) {
            this.drawLeftArrow();
        }
        if (model.widgets['drawArrow2']) {
            this.drawRightArrow();
        }
        if (model.widgets['drawRadioButtons']) {
            this.drawRadioButtons(model, 1);
            this.drawRadioButtons(model, 2);
        }
        if (model.widgets['drawLoadingBox']) {
            this.drawLoadingBox(model);
        }
        if (model.widgets['drawApplyBox']) {
            this.drawApplyBox(model);
        }
        if (model.widgets['drawSwitchingCriteria']) {
            this.drawSwitchingCriteria(model);
        }
        if (model.widgets['drawTackField']) {
            $('#tack-container').show();
        }
        if (model.widgets['drawPOSField']) {
            $('#pos-container').show()
        }
        if (model.widgets['drawWindField']) {
            $('#wind-container').show();
        }
        if (model.widgets['drawTWAField']) {
            $('#true-wind-container').show();
        }
        if (model.widgets['drawHeelField']) {
            $('#heel-container').show();
        }
    }
}

class DepthSensorSelectView extends SensorSelectView {

    constructor(controller) {
        super(controller);
    }

    drawActiveSource(model) {
        $('#active-sensor-container').html(this.activeSensorContainer.html());

        $('#active-sensor-name').html('<h2>' + model.sensors[model.selectedSource].sensorName + '</h2>');
        $('#active-sensor-source').html('<h2>' + model.sensors[model.selectedSource].activeSource.displayName + '</h2>');
        $('#active-sensor-field').attr('data-field', '0x1401');
        $('#active-sensor-field').attr('data-sender', model.sensors[model.selectedSource].sensorSource);
        $('#active-sensor-field').attr('data-instance', model.sensors[model.selectedSource].sensorInstance);

        $('#active-sensor-container').show();
    }

    drawSensor(model, sensorNumber) {
        let $sensorContainer = $('#sensor-container-' + sensorNumber);
        let sensorDefault = "sensorContainer" + sensorNumber;
        $sensorContainer.html(this[sensorDefault].html());

        let $sensorNameContainer = $('#sensor-name-' + sensorNumber);
        let $sensorFieldContainer = $('#sensor-field-' + sensorNumber);

        $sensorNameContainer.html('<h2>' + model.sensors[sensorNumber - 1].sensorName + '</h2>');
        $sensorFieldContainer.attr('data-field', '0x1401');
        $sensorFieldContainer.attr('data-sender', model.sensors[sensorNumber - 1].sensorSource);
        $sensorFieldContainer.attr('data-instance', model.sensors[sensorNumber - 1].sensorInstance);

        if (model.selectedSource + 1 != sensorNumber) {
            $sensorContainer.css('opacity', '0.6');
        } else {
            $sensorContainer.css('opacity', '');
        }
        $sensorContainer.show();
    }

}

class WindSensorSelectView extends SensorSelectView {
    constructor(controller) {
        super(controller);
    }

    drawActiveSource(model) {
        $('#active-sensor-container').html(this.activeSensorContainer.html());

        $('#active-sensor-name').html('<h2>' + model.sensors[model.selectedSource].sensorName + '</h2>');
        $('#active-sensor-source').html('<h2>' + model.sensors[model.selectedSource].activeSource.displayName + '</h2>');
        $('#active-sensor-field-awa').attr('data-field', '0x0307');
        $('#active-sensor-field-aws').attr('data-field', '0x0302');
        $('#active-sensor-container .field-container').attr('data-sender', model.sensors[model.selectedSource].sensorSource.split(':')[0]);
        $('#active-sensor-container .field-container').attr('data-instance', model.sensors[model.selectedSource].sensorInstance);

        $('#active-sensor-container').show();
    }

    drawSensor(model, sensorNumber) {
        var $sensorContainer = $('#sensor-container-' + sensorNumber);
        var sensorDefault = "sensorContainer" + sensorNumber;
        $sensorContainer.html(this[sensorDefault].html());

        $('#sensor-name-' + sensorNumber).html('<h2>' + model.sensors[sensorNumber - 1].sensorName + '</h2>');
        $('#sensor-field-' + sensorNumber + '-awa').attr('data-field', '0x0307');
        $('#sensor-field-' + sensorNumber + '-aws').attr('data-field', '0x0302');
        $('#sensor-container-' + sensorNumber + ' .field-container').attr('data-sender', model.sensors[sensorNumber - 1].sensorSource.split(':')[0]);
        $('#sensor-container-' + sensorNumber + ' .field-container').attr('data-instance', model.sensors[sensorNumber - 1].sensorInstance);

        if (model.selectedSource + 1 != sensorNumber) {
            $sensorContainer.css('opacity', '0.6');
        } else {
            $sensorContainer.css('opacity', '');
        }
        $sensorContainer.show();
    }
}