@page "/TestBarcodeReader"

<PageTitle>Test Barcode Reader</PageTitle>

<div class="card my-2">
    <div class="card-header"><h4>Test Barcode Reader</h4></div>
    <div class="card-body">
        <BarcodeReader 
                       @ref="barcodeReaderCustom"
                       ScanResult="(e) => ScanDoneHandler(e)"
                       ScanBtnTitle="Scan"
                       ResetBtnTitle="Reset"
                       CloseBtnTitle="Close"
                       UseBuiltinDiv="false"
                       SelectDeviceBtnTitle="Select Device">
        </BarcodeReader>

        <div @ref="barcodeReaderCustom.Element" class="d-flex justify-content-center">
            <div class="col-12 col-md-8 col-lg-6">
                <button class="btn btn-outline-success p-2 m-1 w-25" data-action="startButton">Scan</button>
                <button class="btn btn-outline-success p-2 m-1 w-25" data-action="resetButton">Reset</button>

                <div data-action="sourceSelectPanel" style="display:none">
                    <label for="sourceSelect">Source:</label>
                    <select data-action="sourceSelect" style="max-width:100%" class="form-control">
                    </select>
                </div>
                <div>
                    <video id="video" playsinline="true" autoplay="true" class="w-100 h-100 border rounded shadow shadow-lg image-mirror" muted="true"></video>
                </div>
            </div>
        </div>
    </div>
</div>

@code {

    protected BarcodeReader barcodeReaderCustom { get; set; } = null!;
    protected Random rnd = new Random();
    protected async Task ScanDoneHandler(string value)
    {
        await Task.Delay(1);
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
    }

    protected string qrCodeVal { get; set; } = "https://office.egalware.com/WDC/UI";
}