<p>/folder-16/folder-17</p>

<TelerikTextBox @bind-Value="@DirectoryPath" Width="max-content" OnChange="@(() => FileManagerRef!.Rebind())" />

<TelerikFileManager @ref="@FileManagerRef"
                    Data="@FileManagerData"
                    @bind-Path="@DirectoryPath"
                    View="@FileManagerViewType.ListView"
                    EnableLoaderContainer="false"
                    OnDownload="@OnDownloadHandler"
                    NameField="@(nameof(FlatFileEntry.Name))"
                    SizeField="@(nameof(FlatFileEntry.Size))"
                    PathField="@(nameof(FlatFileEntry.Path))"
                    ExtensionField="@(nameof(FlatFileEntry.Extension))"
                    IsDirectoryField="@(nameof(FlatFileEntry.IsDirectory))"
                    HasDirectoriesField="@(nameof(FlatFileEntry.HasDirectories))"
                    IdField="@(nameof(FlatFileEntry.Id))"
                    ParentIdField="@(nameof(FlatFileEntry.ParentId))"
                    DateCreatedField="@(nameof(FlatFileEntry.DateCreated))"
                    DateCreatedUtcField="@(nameof(FlatFileEntry.DateCreatedUtc))"
                    DateModifiedField="@(nameof(FlatFileEntry.DateModified))"
                    DateModifiedUtcField="@(nameof(FlatFileEntry.DateModifiedUtc))"
                    Class="my-filemanager">
</TelerikFileManager>

@code {
    private TelerikFileManager<FlatFileEntry>? FileManagerRef { get; set; }

    private List<FlatFileEntry>? FileManagerData { get; set; }

    public string? DirectoryPath { get; set; } = string.Empty;

    private readonly string RootPath = string.Empty;

    public async Task<bool> OnDownloadHandler(FileManagerDownloadEventArgs args)
    {
        await Task.Delay(1);

        return true;
    }

    private int FolderLevelCount { get; set; } = 5;
    private int FilesInFolderCount { get; set; } = 5;
    private int FoldersInFolderCount { get; set; } = 2;
    private int FolderNameCounter { get; set; }
    private readonly List<string> FileExtensions = new() {
            ".txt", ".pdf", ".docx", ".xlsx", ".png", ".jpg", ".gif", ".zip", ".css", ".html", ".mp3", ".mpg"
        };

    protected override async Task OnInitializedAsync()
    {
        await Task.CompletedTask;

        DirectoryPath = RootPath;

        FileManagerData = LoadFlatDataAsync();

        await base.OnInitializedAsync();
    }

    private List<FlatFileEntry> LoadFlatDataAsync()
    {
        List<FlatFileEntry> data = new List<FlatFileEntry>();

        string rootDataPath = string.IsNullOrEmpty(RootPath) ? "/" : RootPath;

        PopulateChildren(data, null, rootDataPath, 1);

        return data;
    }

    private void PopulateChildren(List<FlatFileEntry> data, string? parentId, string parentPath, int level)
    {
        var rnd = Random.Shared;

        for (int i = 1; i <= FilesInFolderCount; i++)
        {
            string itemId = Guid.NewGuid().ToString();
            string itemExtension = FileExtensions[rnd.Next(0, FileExtensions.Count)];
            string itemName = $"{itemExtension.Substring(1)}-file-{(FolderNameCounter != default ? string.Concat(FolderNameCounter, "-") : string.Empty)}{i}";
            string itemPath = Path.Combine(parentPath, string.Concat(itemName, itemExtension));

            data.Add(new FlatFileEntry()
            {
                Id = itemId,
                ParentId = parentId,
                Name = itemName,
                IsDirectory = false,
                HasDirectories = false,
                DateCreated = DateTime.Now,
                DateCreatedUtc = DateTime.Now.ToUniversalTime(),
                DateModified = DateTime.Now,
                DateModifiedUtc = DateTime.Now.ToUniversalTime(),
                Path = itemPath,
                Extension = itemExtension,
                Size = rnd.Next(1_000, 3_000_000)
            });
        }

        if (level < FolderLevelCount)
        {
            for (int i = 1; i <= FoldersInFolderCount; i++)
            {
                var itemId = Guid.NewGuid().ToString();
                var itemName = $"folder-{++FolderNameCounter}";
                var itemPath = Path.Combine(parentPath, itemName);

                data.Add(new FlatFileEntry()
                {
                    Id = itemId,
                    ParentId = parentId,
                    Name = itemName,
                    IsDirectory = true,
                    HasDirectories = level < FolderLevelCount - 1,
                    DateCreated = DateTime.Now,
                    DateCreatedUtc = DateTime.Now.ToUniversalTime(),
                    DateModified = DateTime.Now,
                    DateModifiedUtc = DateTime.Now.ToUniversalTime(),
                    Path = itemPath,
                    Size = rnd.Next(100_000, 10_000_000)
                });

                PopulateChildren(data, itemId, itemPath, level + 1);
            }
        }
    }

    public class FlatFileEntry : FileEntry
    {
        public string Id { get; set; } = Guid.NewGuid().ToString();

        public string ParentId { get; set; }
    }

    public class FileEntry
    {
        public string Name { get; set; }

        public long Size { get; set; }

        public string Path { get; set; }

        public string Extension { get; set; }

        public bool IsDirectory { get; set; }

        public bool HasDirectories { get; set; }

        public DateTime DateCreated { get; set; }

        public DateTime DateCreatedUtc { get; set; }

        public DateTime DateModified { get; set; }

        public DateTime DateModifiedUtc { get; set; }
    }
}

@using Telerik.Blazor.Components.Grid

@inject IJSRuntime JS

<PageTitle>Home</PageTitle>

<TelerikGrid Data="@GridData">
    <GridToolBarTemplate>
        <TelerikButton OnClick="@ExportGridWithOtherColumns">Export Programmatically</TelerikButton>
        <GridCommandButton Class="hidden-export-button" Command="ExcelExport">Export Natively</GridCommandButton>
    </GridToolBarTemplate>
    <GridSettings>
        <GridExcelExport OnBeforeExport="@OnGridBeforeExport" />
    </GridSettings>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Id)" Width="100px" />
        <GridColumn Field="@nameof(Product.Name)" Width="120px" />
        <GridColumn Title="Product Details">
            <Columns>
                <GridColumn Field="@nameof(Product.Group)" Width="180px" />
                <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" Width="120px" />
                <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:n0}" Width="120px" />
                <GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:d}" Width="180px" />
                <GridColumn Field="@nameof(Product.Discontinued)" Width="100px" />
            </Columns>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

<style>
    .hidden-export-button {
        display: none;
    }
</style>

<script suppress-error="BL9992">
    function clickExportCommandButton() {
        let hiddenExportButton = document.querySelector(".hidden-export-button");
        if (hiddenExportButton) {
            hiddenExportButton.click();
        }
    }
</script>

@code {
    private List<Product> GridData { get; set; } = new();

    private void OnGridBeforeExport(GridBeforeExcelExportEventArgs args)
    {
        List<string> exportableColumnFields = new List<string> { nameof(Product.Name), nameof(Product.Price), nameof(Product.Quantity) };
        List<GridExcelExportColumn> ColumnsToExport = new();

        foreach (GridExcelExportColumn column in args.Columns)
        {
            if (exportableColumnFields.Contains(column.Field))
            {
                ColumnsToExport.Add(column);
            }
        }

        args.Columns = ColumnsToExport;
    }

    private async Task ExportGridWithOtherColumns()
    {
        await JS.InvokeVoidAsync("clickExportCommandButton");
    }

    protected override void OnInitialized()
    {
        var rnd = Random.Shared;

        for (int i = 1; i <= 7; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = $"Name {i} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}",
                Group = $"Group {i % 3 + 1}",
                Price = rnd.Next(1, 100) * 1.23m,
                Quantity = rnd.Next(0, 10000),
                Released = DateTime.Today.AddDays(-rnd.Next(60, 1000)),
                Discontinued = i % 4 == 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Group { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Quantity { get; set; }
        public DateTime Released { get; set; }
        public bool Discontinued { get; set; }
    }
}

<TelerikGrid Data="@GridData"
             SelectionMode="@GridSelectionMode.Multiple"
             SelectedItems="@SelectedItems"
             SelectedItemsChanged="@( (IEnumerable<Employee> newSelected) => OnSelectedItemsChanged(newSelected) )"
             Height="300px">
    <GridToolBarTemplate>
        <TelerikButton Enabled="@(SelectedItems.Any())" OnClick="@DeleteSelectedEmployees">Delete</TelerikButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridCheckboxColumn SelectAll="true" />
        <GridColumn Field="Name" Title="Name" />
        <GridColumn Field="Team" Title="Team" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<Employee> GridData { get; set; } = Enumerable.Range(1, 10).Select(i => new Employee
    {
        EmployeeId = i,
        Name = $"Employee {i}",
        Team = $"Team {i % 3}"
    }).ToList();

    private List<Employee> SelectedItems { get; set; } = new();

    private void OnSelectedItemsChanged(IEnumerable<Employee> items)
    {
        SelectedItems = items.ToList();
    }

    private void DeleteSelectedEmployees()
    {
        if (SelectedItems.Any())
        {
            GridData = GridData.Except(SelectedItems).ToList();
            SelectedItems.Clear();
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public override bool Equals(object obj) => obj is Employee e && e.EmployeeId == EmployeeId;
        public override int GetHashCode() => EmployeeId.GetHashCode();
    }
}

<TelerikDrawer Data="@NavigablePages" Expanded="true" MiniMode="true" Mode="@DrawerMode.Push">
    <DrawerContent>
        <TelerikGridLayout>
            <GridLayoutItems>
                <GridLayoutItem Column="1">
                    <TelerikCard Width="300px" Height="400px">
                        <CardHeader>
                            <CardTitle>CARD 1</CardTitle>
                        </CardHeader>
                        <CardBody>
                            @if (IsLoading)
                            {
                                <span style="height:100%">...loading...</span>
                            }
                            else
                            {
                                <TelerikChart Transitions=@false>
                                    <ChartSeriesItems>
                                        <ChartSeries Type="ChartSeriesType.Donut" Data="@donutData"
                                                        Field="@nameof(MyDonutChartModel.SegmentValue)" CategoryField="@nameof(MyDonutChartModel.SegmentName)">
                                            <ChartSeriesTooltip Visible="@IsChartTooltipVisible" Background="#222731" Color="#FFFFFF">
                                                <Template>
                                                    @((context.DataItem as MyDonutChartModel)?.Tooltip)
                                                </Template>
                                            </ChartSeriesTooltip>
                                        </ChartSeries>
                                    </ChartSeriesItems>
                                </TelerikChart>
                            }
                        </CardBody>
                    </TelerikCard>
                </GridLayoutItem>
                <GridLayoutItem Column="2">
                    <TelerikCard Width="300px" Height="400px">
                        <CardHeader>
                            <CardTitle>CARD 2</CardTitle>
                        </CardHeader>
                        <CardBody>
                            <TelerikButton OnClick="@OnClickHandler">REFRESH CHART</TelerikButton>
                        </CardBody>
                    </TelerikCard>
                </GridLayoutItem>
            </GridLayoutItems>
        </TelerikGridLayout>
    </DrawerContent>
</TelerikDrawer>


@code{

    public bool IsLoading { get; set; } = false;
    public bool IsChartTooltipVisible { get; set; } = true;

    private async Task OnClickHandler()
    {
        IsLoading = true;
        IsChartTooltipVisible = false;
        // Simulate API call
        await Task.Delay(2000);
        IsLoading = false;
        // Force the Chart to render
        StateHasChanged();
        // Delay the Chart Tooltip initialization
        await Task.Delay(100);
        IsChartTooltipVisible = true;
    }

    List<DrawerItem> NavigablePages { get; set; } = new List<DrawerItem>
{
        new DrawerItem { Text = "Home", Icon = SvgIcon.Home }
    };

    public class DrawerItem
    {
        public string Text { get; set; }
        public ISvgIcon Icon { get; set; }
    }

    public class MyDonutChartModel
    {
        public string SegmentName { get; set; }
        public double SegmentValue { get; set; }
        public string Tooltip { get; set; }
    }

    public List<MyDonutChartModel> donutData = new List<MyDonutChartModel>
    {
        new MyDonutChartModel
        {
            SegmentName = "Product 1",
            SegmentValue = 2,
            Tooltip = "Tooltip 1"
        },
        new MyDonutChartModel
        {
            SegmentName = "Product 2",
            SegmentValue = 3,
            Tooltip = "Tooltip 2"
        },
        new MyDonutChartModel
        {
            SegmentName = "Product 3",
            SegmentValue = 4,
            Tooltip = "Tooltip 3"
        }
    };
}

<TelerikNumericTextBox @bind-Value="@Price1" ShowClearButton=true/>
<p>Price: @Price1</p>
@code {
    private decimal? Price1 { get; set; }
}

<p>Load a PDF file from your computer in both PDF Viewers and click the buttons.</p>

<strong>@TestResult</strong>

<br /><br />

<TelerikButton OnClick="@OnLoadButtonClick1" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Get Current PDF 1</TelerikButton>

<TelerikPdfViewer @ref="@PdfViewerRef1"
                  Data="@PdfViewerData1"
                  AnnotationMode="@PdfViewerAnnotationMode.EnableForms"
                  Height="400px">
</TelerikPdfViewer>

<TelerikButton OnClick="@OnLoadButtonClick2" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Get Current PDF 2</TelerikButton>

<TelerikPdfViewer @ref="@PdfViewerRef2"
                  Data="@PdfViewerData2"
                  AnnotationMode="@PdfViewerAnnotationMode.EnableForms"
                  Height="400px">
</TelerikPdfViewer>

@code {
    #nullable enable

    private TelerikPdfViewer? PdfViewerRef1 { get; set; }
    private TelerikPdfViewer? PdfViewerRef2 { get; set; }
    private byte[]? PdfViewerData1 { get; set; }
    private byte[]? PdfViewerData2 { get; set; }

    private string TestResult { get; set; } = string.Empty;

    private async Task OnLoadButtonClick1()
    {
        var pdfSource = await PdfViewerRef1!.GetFileAsync();
        TestResult = $"First PDF Viewer GetFileAsync() returned {pdfSource} at {DateTime.Now.ToString("HH:mm:ss")}";
    }

    private async Task OnLoadButtonClick2()
    {
        var pdfSource = await PdfViewerRef2!.GetFileAsync();
        TestResult = $"Second PDF Viewer GetFileAsync() returned {(pdfSource != null ? pdfSource.ToString() : "null")}  at {DateTime.Now.ToString("HH:mm:ss")}";
    }

    protected override void OnInitialized()
    {
        PdfViewerData1 = Convert.FromBase64String(PdfBase64);
    }

    private const string PdfBase64 = "JVBERi0xLjEKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDEvTWVkaWFCb3ggWy0zMCAtNjQgMjcwIDgwXSA+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9Gb250PDwvRjE8PC9UeXBlL0ZvbnQvU3VidHlwZS9UeXBlMS9CYXNlRm9udC9BcmlhbD4+ID4+ID4+L0NvbnRlbnRzIDQgMCBSPj5lbmRvYmoKNCAwIG9iajw8L0xlbmd0aCA1OT4+CnN0cmVhbQpCVAovRjEgMTggVGYKMCAwIFRkCihQREYgRmlsZSAuLi4pIFRqCkVUCmVuZHN0cmVhbQplbmRvYmoKeHJlZgowIDUKMDAwMDAwMDAwMCA2NTUzNSBmCjAwMDAwMDAwMjEgMDAwMDAgbgowMDAwMDAwMDg2IDAwMDAwIG4KMDAwMDAwMDE5NSAwMDAwMCBuCjAwMDAwMDA0OTAgMDAwMDAgbgp0cmFpbGVyIDw8ICAvUm9vdCAxIDAgUiAvU2l6ZSA1ID4+CnN0YXJ0eHJlZgo2MDkKJSVFT0Y=";
}