@page "/layout"
@using System.IO
@rendermode InteractiveServer
@inject IJSRuntime JS

<script>
    window.downloadFileFromStream = async (fileName, contentStreamReference) => {
      const arrayBuffer = await contentStreamReference.arrayBuffer();
      const blob = new Blob([arrayBuffer]);
      const url = URL.createObjectURL(blob);
      const anchorElement = document.createElement('a');
      anchorElement.href = url;
      anchorElement.download = fileName ?? '';
      anchorElement.click();
      anchorElement.remove();
      URL.revokeObjectURL(url);
    }
</script>

<div class="border" style="padding: 20px; margin-top: 20px;">

<DxFormLayout CssClass="w-100 demo-form-layout">
    <DxFormLayoutItem Caption="Contact Name:">
        <DxTextBox @bind-Text="@Name" />
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="eMail:">
        <DxTextBox @bind-Text="@Email" InputId="contactEmail" />
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="Birth Date:">
        <DxDateEdit @bind-Date="@BirthDate" Mask="@DateTimeMask.ShortDate" PickerDisplayMode="DatePickerDisplayMode.Calendar" />
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="Years Worked:">
        <DxSpinEdit @bind-Value="@YearsWorked" />
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="On Vacation:">
        <DxCheckBox @bind-Checked="@OnVacation" />
    </DxFormLayoutItem>
</DxFormLayout>

<div class="w-100 mx-0 mt-3">
    <p class="demo-text col-12 mt-2">
        @nameof(Name)=<b>@Name</b>,
        @nameof(Email)=<b>@Email</b>,
        @nameof(BirthDate)=<b>@BirthDate</b>,
        @nameof(YearsWorked)=<b>@YearsWorked</b>,
        @nameof(OnVacation)=<b>@OnVacation</b>
    </p>
</div>
</div>

<div class="border" style="padding: 20px; margin-top: 20px;">

<DxFormLayout>
    @* If the viewport width is less then 768px (medium), the item occupies 12 columns *@
    @* If the viewport width is from 768px (medium) to 1200px (extra large), the item occupies 6 columns *@
    @* If the viewport width exceeds 1200px (extra large), the item occupies 4 columns *@
    <DxFormLayoutItem Caption="Name" ColSpanXl="4" ColSpanMd="6">
        <DxTextBox />
    </DxFormLayoutItem>
</DxFormLayout>
</div>

<div class="border" style="padding: 20px; margin-top: 20px;">
<div>
    <button @onclick="DownloadFileFromStream">
        Download File From Stream
    </button>
</div>
</div>

@code {
    string Name { get; set; } = "Nancy Davolio";
    string Email { get; set; } = "NancyDavolio@sample.com";
    DateTime BirthDate { get; set; } = DateTime.Now.AddYears(-20);
    int YearsWorked { get; set; } = 3;
    bool OnVacation { get; set; } = true;
    bool IsInfoOpen { get; set; } = false;

/*    private Stream GetFileStream()
    {
        var randomBinaryData = new byte[50 * 1024];
        var fileStream = new MemoryStream(randomBinaryData);

        return fileStream;
    }
*/
    private Stream GetFileStream() => File.OpenRead(@"D:\Mappe1.xlsx");

    private async Task DownloadFileFromStream()
    {
        var fileStream = GetFileStream();
        var fileName = "Mappe2.xlsx";

        using var streamRef = new DotNetStreamReference(stream: fileStream);

        await JS.InvokeVoidAsync("downloadFileFromStream", fileName, streamRef);
    }

}