class HeelView extends BasicView {
    constructor(controller) {
        super(controller);
    }

    bindEvents() {
        super.bindEvents();

        $('#sensor-select-row').on('click', '[name="sensor-select"]', this.controller.changeSensor.bind(this.controller));

        $('#internal-heel-container').on('click', '[name="back-plate"]', this.controller.changeBackPlateOrientation.bind(this.controller));
        $('#internal-heel-container').on('click', '[name="cable-exit"]', this.controller.changeCableExitOrientation.bind(this.controller));

        $('#heel-offset').on('change', this.controller.changeHeelOffset.bind(this.controller));
        $('#trim-offset').on('change', this.controller.changeTrimOffset.bind(this.controller));

        $('#external-heel-container').on('change', '#heel-source-select', this.controller.changeHeelSource.bind(this.controller));
        $('#external-heel-container').on('change', '#heel-analogue-instance-select, #heel-nmea-instance-select', this.controller.changeHeelInstance.bind(this.controller));
    
        $('#external-heel-container').on('change', '#heel-can-devices', this.controller.changeHeelCanbusDevice.bind(this.controller));
    }

    displayAnalogueHeelWidget(model) 
    {
        if (model.heelSources.length == 0) {
            $('#heel-analogue-instance-select').append('<option value="">No Source</option>');
        } else {
            model.heelSources.forEach(function(source) {
                //Instance = <board number><channel number>
                let boardNum = source.internalName.split(':')[1];
                var instance = boardNum + source.channelNumber;
                $('#heel-analogue-instance-select').append(
                    '<option data-board="' + source.internalName + '" data-instance="' + boardNum + '" data-channel="' + source.channelNumber + '" value="' + instance + '">' + source.displayName + '</option>'
                );
            });
        }
        $('#heel-analogue-instance-select option[value="' + model.heelSourceInstance + '"]').prop('selected', true);
        $('#heel-analogue-instance').show();
    }

    displayCANHeelWidget(model) 
    {
        $('#heel-canbus-instance').empty();

        let optionString = "<option value='0' data-address='0'>No Device</option>";
        model.listOfCanDevices.forEach(function(device) {
            optionString += "<option value='" + device.uniqueid + "' data-address='" + device.address + "'>" + device.displayName + "</option>";
        });

        $('#heel-canbus-instance').append(
			    '<div class="flex-row">'
            +	    '<div class="flex-heading">'
            +           '<h2>CANbus Device:</h2>'
            +       '</div>'
            +       '<select id="heel-can-devices">'
            +           optionString
            +       '<select>'
			+   '</div>'
        );

        $('#heel-can-devices').find('option[value="' + model.heelUniqueid + '"]').prop('selected', true);

        // Note: this assumes that "0" is not a valid address, implying that it could 
        // only be the result of selecting "No Device" or an "Unconnected Device".
        if (model.heelCanbusSourceAddress === "0")
            $('#heel-can-devices').addClass('bad-source');

        $('#heel-canbus-instance').show();
    }

    displayExternalSensor(model) 
    {
        $('#heel-source-select option[value="' + model.heelSource + '"]').prop('selected', true);

        $('#external-heel-container').show();
    }

    displayInternalSensor(model) 
    {
        $('input[name="back-plate"][value="' + model.backPlateOrientation + '"]').prop('checked', true);
        $('input[name="cable-exit"][value="' + model.cableExitOrientation + '"]').prop('checked', true);

        var $selectedOrientation = $('input[name="back-plate"]:checked');
        $('#internal-heel-container input[name="cable-exit"]').each(function() {
            $(this).prop('disabled', !model.isValidOrientation[$selectedOrientation.attr('data-orientation')][$selectedOrientation.val()][$(this).val()] || false);
        })

        $('#internal-heel-container').show();
    }

    displayNMEAHeelWidget(model) 
    {
        model.nmeaSource.ports.forEach(function(port) {
            $('#heel-nmea-instance-select').append(
                '<option value="' + port.internalName + '">' + port.displayName + '</option>'
            );
        })
        $('#heel-nmea-instance-select option[value="' + model.heelSourceInstance + '"]').prop('selected', true);
        $('#heel-nmea-instance').show();
    }

    displaySensorSelect(model) 
    {
        $('#sensor-select-row [name="sensor-select"][value="' + model.useInternalSensor + '"]').prop('checked', true);
    }

    resetView() 
    {
        $('#internal-heel-container').hide();
        $('#external-heel-container').hide();
        $('#heel-analogue-instance').hide();
        $('#heel-analogue-instance-select').empty();
        $('#heel-canbus-instance').hide();
        $('#heel-nmea-instance').hide();
        $('#heel-nmea-instance-select').empty();
    }

    update(model) 
    {
        this.resetView();
        
        this.displaySensorSelect(model);
        if (model.widgets.displayInternalSensorWidget) 
        {
            this.displayInternalSensor(model);

            $('#rawHeel, #rawTrim').attr('data-sender', 'Main Interface Board');
            $('#rawHeel, #rawTrim').attr('data-instance', '0');
        }

        if (model.widgets.displayExternalSensorWidget) 
        {
            this.displayExternalSensor(model);

            switch(model.widgets.displayHeelInstanceWidget) 
            {
                case "CanBus":
                    this.displayCANHeelWidget(model);
                    break;

                case "NMEA0183":
                    this.displayNMEAHeelWidget(model);
                    break;
            }

            switch (model.heelSource)
            {
                case 'CanBus':
                    $('#rawHeel, #rawTrim').attr('data-sender', 'CanBus');
                    $('#rawHeel, #rawTrim').attr('data-instance', model.heelCanbusSourceAddress);
                    break;

                case 'NMEA0183':
                    $('#rawHeel, #rawTrim').attr('data-sender', 'NMEA0183');
                    $('#rawHeel, #rawTrim').attr('data-instance', $('#heel-nmea-instance-select option:selected').val());
                    break;
            }
        }

        $('#heel-offset').val(model.heelOffset);
        $('#trim-offset').val(model.trimOffset);
    }
}
