/**
 * @fileoverview
 * File for camera selection UI.
 * 
 * @author mebjas <minhazav@gmail.com>
 * 
 * The word "QR Code" is registered trademark of DENSO WAVE INCORPORATED
 * http://www.denso-wave.com/qrcode/faqpatent-e.html
 */

import { CameraDevice } from "../../camera/core";
import {
    BaseUiElementFactory,
    PublicUiElementIdAndClasses
} from "./base";
import {
    Html5QrcodeScannerStrings
} from "../../strings";

/** Class for rendering and handling camera selection UI. */
export class CameraSelectionUi {

    private readonly selectElement: HTMLSelectElement;
    private readonly options: Array<HTMLOptionElement>;
    private readonly cameras: Array<CameraDevice>;

    private constructor(cameras: Array<CameraDevice>) {
        this.selectElement = BaseUiElementFactory
            .createElement<HTMLSelectElement>(
            "select",
            PublicUiElementIdAndClasses.CAMERA_SELECTION_SELECT_ID);
        this.cameras = cameras;
        this.options = [];        
    }

    /*eslint complexity: ["error", 10]*/
    private render(
        parentElement: HTMLElement) {
        const cameraSelectionContainer = document.createElement("span");
        cameraSelectionContainer.style.marginRight = "10px";
        const numCameras = this.cameras.length;
        if (numCameras === 0) {
            throw new Error("No cameras found");
        }
        if (numCameras === 1) {
            // If only one camera is found, don't show camera selection.
            cameraSelectionContainer.style.display = "none";
        } else {
            // Otherwise, show the number of cameras found as well.
            const selectCameraString = Html5QrcodeScannerStrings.selectCamera();
            cameraSelectionContainer.innerText
                = `${selectCameraString} (${this.cameras.length})  `;
        }

        let anonymousCameraId = 1;

        for (const camera of this.cameras) {
            const value = camera.id;
            let name = camera.label == null ? value : camera.label;
            // If no name is returned by the browser, replace it with custom
            // camera label with a count.
            if (!name || name === "") {
                name = [
                    Html5QrcodeScannerStrings.anonymousCameraPrefix(),
                    anonymousCameraId++
                    ].join(" ");
            }

            const option = document.createElement("option");
            option.value = value;
            option.innerText = name;
            this.options.push(option);
            this.selectElement.appendChild(option);
        }
        cameraSelectionContainer.appendChild(this.selectElement);
        parentElement.appendChild(cameraSelectionContainer);
    }

    //#region Public APIs
    public disable() {
        this.selectElement.disabled = true;
    }

    public isDisabled() {
        return this.selectElement.disabled === true;
    }

    public enable() {
        this.selectElement.disabled = false;
    }

    public getValue(): string {
        return this.selectElement.value;
    }

    public hasValue(value: string): boolean {
        for (const option of this.options) {
            if (option.value === value) {
                return true;
            }
        }
        return false;
    }

    public setValue(value: string) {
        if (!this.hasValue(value)) {
            throw new Error(`${value} is not present in the camera list.`);
        }
        this.selectElement.value = value;
    }

    public hasSingleItem() {
        return this.cameras.length === 1;
    }

    public numCameras() {
        return this.cameras.length;
    }
    //#endregion

    /** Creates instance of {@link CameraSelectionUi} and renders it. */
    public static create(
        parentElement: HTMLElement,
        cameras: Array<CameraDevice>): CameraSelectionUi {
        let cameraSelectUi = new CameraSelectionUi(cameras);
        cameraSelectUi.render(parentElement);
        return cameraSelectUi;
    }
}