@using Telerik.Blazor.Components.Editor

<TelerikButton OnClick="@(() => EditorValue = "<p>baz</p><p>baz</p>")" ButtonType="@ButtonType.Button">Change Editor Value</TelerikButton>

<TelerikEditor Tools="@EditorTools"
               @bind-Value="@EditorValue">
    <EditorCustomTools>
        <EditorCustomTool Name="CustomEditorTool">
            custom tool here
        </EditorCustomTool>
    </EditorCustomTools>
</TelerikEditor>

@code {
    private string EditorValue { get; set; } = @"<p>foo</p><p>bar</p>";
    private List<IEditorTool> EditorTools { get; set; } = new();

    protected override void OnInitialized()
    {
        EditorTools.Add(new CustomTool("CustomEditorTool"));

        base.OnInitialized();
    }
}

@using Telerik.Blazor.Common.Export.Excel
@using Telerik.Blazor.Components.Grid

<TelerikGrid TItem="@FlowRun"
             Pageable="true"
             OnRead="@GetData">

    <GridToolBar>
        <GridCommandButton Command="ExcelExport" Icon="file-excel">Export to Excel</GridCommandButton>
        <GridCommandButton Command="CsvExport" Icon="file-csv">Export to CSV</GridCommandButton>
        <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBar>

    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" OnBeforeExport="@BeforeExcelExport" />
        <GridCsvExport FileName="telerik-grid-export" AllPages="@ExportAllPages" OnBeforeExport="@BeforeCsvExport" />
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(FlowRun.FileName)" Title="File Name" Width="300px" />
        <GridColumn Field="@nameof(FlowRun.Type)" Title="Type" Width="100px" />
        <GridColumn Field="@nameof(FlowRun.FileSize)" Title="File Size" Width="200px" />
        <GridColumn Title="Source">
            <Columns>
                <GridColumn Field="@(nameof(FlowRun.Source))" Title="MPID"/>
                <GridColumn Field="@(nameof(FlowRun.SourceFileProtocol))" Title="Type" />
            </Columns>
        </GridColumn>
        <GridColumn Field="@nameof(FlowRun.ErrorMessage)"
                    Title = "Error"
                    Width="0" />
    </GridColumns>
</TelerikGrid>

@code {
    bool ExportAllPages { get; set; }

    private async Task GetData(GridReadEventArgs args)
    {
        args.Data = Enumerable.Range(1, 10).Select(x => new FlowRun
            {
                FileName = $"File {x}",
                Type = $"Type {x}",
                FileSize = x * 2,
                Source = $"Source {x}",
                SourceFileProtocol = FileProtocol.CIX,
                ErrorMessage = $"Error {x}"
            }).ToList();

        args.Total = 100;
    }

    private void BeforeCsvExport(GridBeforeCsvExportEventArgs obj)
    {
        AddErrorMessageColumn(obj);
    }

    private void BeforeExcelExport(GridBeforeExcelExportEventArgs obj)
    {
        AddErrorMessageColumn(obj);
    }

    private void AddErrorMessageColumn(GridBeforeSpreadsheetExportEventArgs args)
    {
        args.Columns.Find(x => x.Field == nameof(FlowRun.ErrorMessage)).Width = "100px";

        //args.Columns.Add(new ExcelExportableColumn
        //{            
        //    Field = nameof(FlowRun.ErrorMessage),
        //    Title = "Error"
        //});
    }

    public class FlowRun
    {
        public string FileName { get; set; }
        public string Type { get; set; }
        public long? FileSize { get; set; }
        public string Source { get; set; }
        public FileProtocol SourceFileProtocol { get; set; }
        public string ErrorMessage { get; set; }
    }

    public enum FileProtocol
    {
        Unknown,
        PIX,
        CIX,
        SS
    }
}

<PageTitle>Home</PageTitle>

<div>
    <TelerikTextBox Width="20rem" Placeholder="Pallet" DebounceDelay="1000" @bind-Value="@_textInput" OnChange="@(async (input) => await OnInputChanged(input))" />
</div>
<p>@_textInput</p>


@code {
    private string? _textInput;

    private async Task OnInputChanged(object input)
    {
        Console.WriteLine($"Immediate: function parameter: {input}, bound variable: {_textInput}");
        await Task.Delay(1000);
        Console.WriteLine($"Delayed: function parameter: {input}, bound variable: {_textInput}");
        //Make the OnChange event receive the immediate value when the DebounceDelay is set
    }
}

<ComboBoxPopupSettings Height="auto" MaxHeight="45vh"></ComboBoxPopupSettings>

<ul>
    <li><code>AutoCompleteValue</code>: @AutoCompleteValue</li>
    <li><code>SelectedValue</code>: @SelectedValue</li>
    <li><code>SelectedValueNullable</code>: @SelectedValueNullable</li>
    <li><code>MultiSelectValues</code>: @string.Join(", ", MultiSelectValues)</li>
</ul>

<p>
    <TelerikButton OnClick="@(() => {
        AutoCompleteValue = string.Empty;
        SelectedValue = default;
        SelectedValueNullable = default;
        MultiSelectValues = new();
    })">Clear Values</TelerikButton>
</p>

<TelerikAutoComplete Data="@ListItems"
                     @bind-Value="@AutoCompleteValue"
                     ValueField="@nameof(ListItem.Text)"
                     Placeholder="Select Item"
                     ShowClearButton="true"
                     Width="300px" />

<br /><br />

<TelerikComboBox Data="@ListItems"
                 @bind-Value="@SelectedValue"
                 TextField="@nameof(ListItem.Text)"
                 ValueField="@nameof(ListItem.Id)"
                 Placeholder="Select Item"
                 ShowClearButton="true"
                 Width="300px" />

<TelerikComboBox Data="@ListItems"
                 @bind-Value="@SelectedValueNullable"
                 TextField="@nameof(ListItem.Text)"
                 ValueField="@nameof(ListItem.Id)"
                 Placeholder="Select Item"
                 ShowClearButton="true"
                 Width="300px" />


<br /><br />

<TelerikDropDownList Data="@ListItems"
                     @bind-Value="@SelectedValue"
                     TextField="@nameof(ListItem.Text)"
                     ValueField="@nameof(ListItem.Id)"
                     DefaultText="Select Item"
                     Width="300px" />

<TelerikDropDownList Data="@ListItems"
                     @bind-Value="@SelectedValueNullable"
                     TextField="@nameof(ListItem.Text)"
                     ValueField="@nameof(ListItem.Id)"
                     DefaultText="Select Item"
                     Width="300px" />

<br /><br />

<TelerikMultiColumnComboBox Data="@ListItems"
                            @bind-Value="@SelectedValue"
                            TextField="@nameof(ListItem.Text)"
                            ValueField="@nameof(ListItem.Id)"
                            Placeholder="Select Item"
                            ShowClearButton="true"
                            Width="300px">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="@nameof(ListItem.Id)" />
        <MultiColumnComboBoxColumn Field="@nameof(ListItem.Text)" />
    </MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>

<TelerikMultiColumnComboBox Data="@ListItems"
                            @bind-Value="@SelectedValueNullable"
                            TextField="@nameof(ListItem.Text)"
                            ValueField="@nameof(ListItem.Id)"
                            Placeholder="Select Item"
                            ShowClearButton="true"
                            Width="300px">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="@nameof(ListItem.Id)" />
        <MultiColumnComboBoxColumn Field="@nameof(ListItem.Text)" />
    </MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>

<br /><br />

<TelerikMultiSelect Data="@ListItems"
                    @bind-Value="@MultiSelectValues"
                    TextField="@nameof(ListItem.Text)"
                    ValueField="@nameof(ListItem.Id)"
                    Placeholder="Select Items"
                    ShowArrowButton="true"
                    ShowClearButton="true"
                    AutoClose="false"
                    Width="600px" />

@code {
    private List<ListItem> ListItems { get; set; } = new();

    private int SelectedValue { get; set; } = 3;
    private int? SelectedValueNullable { get; set; } = 3;
    private string AutoCompleteValue { get; set; } = "Item 3";

    private List<int> MultiSelectValues { get; set; } = new() { 3, 5 };

    protected override void OnInitialized()
    {
        ListItems = new List<ListItem>();

        for (int i = 1; i <= 24; i++)
        {
            ListItems.Add(new ListItem()
            {
                Id = i,
                Text = $"Item {i}"
            });
        }

        base.OnInitialized();
    }

    public class ListItem
    {
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;
    }
}

@inject IJSRuntime JsInterop

<input />
<span @onfocusin="@CollapseInputSelection" @ref="@ParentElem">
    <TelerikMaskedTextBox Mask="+1 (000) 000-0000"
                          IncludeLiterals="true"
                          @bind-Value="@CellPhoneNumber"
                          Class="form-control" />
</span>

@* move this script to an actual script file instead of using this hack *@
<script suppress-error="BL9992">
    function collapseInputSelection(root) {
        setTimeout(function () {
            var input = root.querySelector("input");
            if (input) {
                input.setSelectionRange(0, 0);
            }
        }, 20);
    }
</script>

@code{
    string CellPhoneNumber { get; set; }

    ElementReference ParentElem { get; set; }
    async Task CollapseInputSelection()
    {
        await JsInterop.InvokeVoidAsync("collapseInputSelection", ParentElem);
    }
}