@using Telerik.Blazor.Components.Editor

<TelerikEditor @bind-Value="@EditorValue"
               Tools="@ToolCollection"
               EditMode="@EditorEditMode.Div" />

<style>
.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}
div.ProseMirror {
  position: relative;
  min-height: 100%;
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
}
div.ProseMirror:focus {
  outline: none;
}
.ProseMirror pre {
  white-space: pre-wrap;
}
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }
.ProseMirror li {
  position: relative;
}
li.ProseMirror-selectednode {
  outline: none;
}
li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}
.ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
}
.ProseMirror-gapcursor:after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid black;
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}
@keyframes ProseMirror-cursor-blink {
  to {
    visibility: hidden;
  }
}
.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}
.k-editor-resize-handles-wrapper {
  position: absolute;
  visibility: hidden;
}
.k-editor-resize-handle {
  position: absolute;
  visibility: visible;
  background-color: #fff;
  border: 1px solid #000;
  z-index: 100;
  width: 5px;
  height: 5px;
}
.k-editor-resize-handle.northwest {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: nw-resize;
}
.k-editor-resize-handle.north {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: n-resize;
}
.k-editor-resize-handle.northeast {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  cursor: ne-resize;
}
.k-editor-resize-handle.southwest {
  left: 0;
  bottom: 0;
  transform: translate(-50%, 50%);
  cursor: sw-resize;
}
.k-editor-resize-handle.south {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  cursor: s-resize;
}
.k-editor-resize-handle.southeast {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
  cursor: se-resize;
}
.k-editor-resize-handle.west {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: w-resize;
}
.k-editor-resize-handle.east {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  cursor: e-resize;
}
.ProseMirror .tableWrapper {
  overflow-x: auto;
  margin: 1em 0;
}
.k-editor-resize-wrap-element {
  display: inline-block;
  position: relative;
}
.ProseMirror .row-resize-handle {
  position: absolute;
  right: 0; left: 0; bottom: 0;
  transform: translate(0, 50%);
  height: 4px;
  z-index: 20;
  background-color: #adf;
  pointer-events: none;
}
.ProseMirror.resize-cursor-vertical {
  cursor: sn-resize;
  cursor: row-resize;
}
.k-editor-resize-wrap-element table td p,
.k-editor-resize-wrap-element table th p {
  margin: 0 auto;
}
.ProseMirror table {
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
}
.ProseMirror td, .ProseMirror th {
  min-width: 1em;
  border: 1px solid #ddd;
  padding: 3px 5px;
  vertical-align: top;
  box-sizing: border-box;
  position: relative;
}
.ProseMirror th {
  font-weight: bold;
  text-align: left;
}
.ProseMirror .column-resize-handle {
  position: absolute;
  right: -2px; top: 0; bottom: 0;
  width: 4px;
  z-index: 20;
  background-color: #adf;
  pointer-events: none;
}
.ProseMirror.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}
/* Give selected cells a blue overlay */
.ProseMirror .selectedCell:after {
  z-index: 2;
  position: absolute;
  content: "";
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(200, 200, 255, 0.4);
  pointer-events: none;
}
</style>

@code {
    string EditorValue { get; set; }

    public List<IEditorTool> ToolCollection { get; set; } = new List<IEditorTool>() {
            new InsertTable()
        };
}

@selectedTime?.ToString("F")

<TelerikTimePicker Min="@Min" Max="@Max" Format="hh:mm:ss tt" 
                   Value="@selectedTime" ValueChanged="@( (DateTime? v) => ValueChangedHandler(v) )">
</TelerikTimePicker>

@code {
    public DateTime Min = new DateTime(1900, 1, 1, 10, 0, 0);
    public DateTime Max = new DateTime(1900, 1, 1, 20, 0, 0);
    public DateTime? selectedTime { get; set; } = new DateTime(1900, 1, 1, 12, 0, 0);

    void ValueChangedHandler(DateTime? updatedTime)
    {
        selectedTime = new DateTime(
                selectedTime.Value.Year,
                selectedTime.Value.Month,
                selectedTime.Value.Day,
                updatedTime.Value.Hour,
                updatedTime.Value.Minute,
                updatedTime.Value.Second
            );
    }
}

@inject ITelerikStringLocalizer Loc

<LanguageTrackProvider OnInitializeEvent="provider => provider.RegisterComponent(this)" />

@if (Images.Any() && _selectedImage != null)
{
    <div class="d-flex @Class" style="height: @Height; width: @Width;">
        <ul aria-label="@Loc["ImageThumbnails"]" role="radiogroup" class="image-collection-button-container">
            @foreach (var image in Images)
            {
                <li>
                    <button @onclick="() => OnImageSelect(image)"
                            class="@($"image-collection-button{(image.Src == _selectedImage.Src ? " selected" : "")}")"
                            role="radio" aria-checked="@(image.Src == _selectedImage.Src ? "true" : "false")">
                        <img src="@image.Src" alt="@image.Alt" />
                    </button>
                </li>

            }
        </ul>
        <div class="image-collection-image-container">
            <MagnifiableImage Image="@(new ImageInfo(_selectedImage.Src, _selectedImage.Alt))" Class="image-collection-image" MagnifyScale="@MagnifyScale"
                              Height="@(ConstrainImageHeight ? "calc(100% - 2px)" : "auto")" Width="@(ConstrainImageWidth ? "100%" : "auto")" />
        </div>
    </div>
}
else
{
    <TelerikSkeleton ShapeType="@SkeletonShapeType.Rectangle" Height="@Height" Width="@Width" Class="@Class"/>
}

<style>
    .image-collection-button-container {
        flex: 0 0 auto;
        width: 10%;
        height: 100%; 
        min-width: 90px;
        max-width: 110px;
        overflow-y: auto;
        padding: 2px;
        margin: 0;
        scrollbar-color: rgba(1, 1, 1, 0.25) rgba(0, 0, 0, 0);
        scrollbar-gutter: stable;
        list-style: none;
    }
    
    .image-collection-button {
        padding: 0;
        margin-bottom: 1rem;
        border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08));
        border-radius: 0.5rem;
        width: auto;
        aspect-ratio: 1 / 1;
        display: block;
    }
    .image-collection-button:hover {
        filter: brightness(90%);
    }
    .image-collection-button:focus {
        outline: none;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #424242) 50%, transparent);
    }
    .image-collection-button.selected {
        box-shadow: 0 0 0 2px var(--kendo-color-primary, #1274AC);
    }
    .image-collection-button img {
        width: 100%;
        height: 100%;
        min-width: 70px;
        min-height: 70px;
        max-width: 90px;
        max-height: 90px;
        object-fit: cover;
        border-radius: 0.5rem;
        display: block;
    }
    
    .image-collection-image-container {
        flex: 0 0 auto;
        width: 90%;
        padding: 2px;
    }
    
    .image-collection-image {
        border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08));
    }
</style>

using Microsoft.AspNetCore.Components;
using Telerik.Blazor.Components;

namespace RazorLibrary.Components.Images;

/// <summary>
/// <para>
/// Displays a collection of selectable image thumbnails provided by <see cref="Images"/> and a main image display area.
/// If <see cref="Images"/> is empty, displays a <see cref="TelerikSkeleton"/> placeholder instead. Supports
/// accessibility, configurable height via <see cref="Height"/>, width via <see cref="Width"/>, aspect ratio control
/// via <see cref="ConstrainImageHeight"/> and <see cref="ConstrainImageWidth"/>, and alt text for images.
/// </para>
/// <para>
/// Usage: 
/// <code>
/// @using RazorLibrary.Components.Images
///
/// 
/// &lt;ImageCollection Images="myImages" Height="300px" Width="100%" /&gt;
///
/// 
/// @code {
///     private List&lt;ImageInfo&gt; myImages = new()
///     {
///         new ImageInfo("img1.jpg", "First image"),
///         new ImageInfo("img2.jpg", "Second image")
///     };
/// }
/// </code>
/// </para>
/// </summary>
public partial class ImageCollection
{
    /// <summary>
    /// The collection of images to display in the image collection.
    /// </summary>
    [Parameter] public IEnumerable<ImageInfo> Images { get; set; } = [];

    /// <summary>
    /// The overall height of the image collection component (e.g., "200px", "100%", or "auto"). Default is "auto".
    /// </summary>
    [Parameter] public string Height { get; set; } = "auto";
    /// <summary>
    /// The overall width of the image collection component (e.g., "200px", "100%", or "auto"). Default is "auto".
    /// </summary>
    [Parameter] public string Width { get; set; } = "auto";

    /// <summary>
    /// If true, sets the main image display height to 100%, which constrains it to the value specified by <c>Height</c>.
    /// If false, height is auto. Maintains aspect ratio unless both <c>FixImageHeight</c> and <c>FixImageWidth</c> are true.
    /// Default is false.
    /// </summary>
    [Parameter] public bool ConstrainImageHeight { get; set; } = false;
    /// <summary>
    /// If true, sets the main image display width to 100%, which constrains it to the value specified by <c>Width</c>.
    /// If false, width is auto. Maintains aspect ratio unless both <c>FixImageHeight</c> and <c>FixImageWidth</c> are true.
    /// Default is true.
    /// </summary>
    [Parameter] public bool ConstrainImageWidth { get; set; } = true;

    /// <summary>
    /// The magnification scale for the magnifier. Default is 3 (3x magnification).
    /// </summary>
    [Parameter] 
    public double MagnifyScale { get; set; } = 3;
    
    /// <summary>
    /// Applies additional CSS classes to the ImageCollection's root element for custom styling and visual modifications.
    /// </summary>
    [Parameter] public string Class { get; set; } = string.Empty;

    private ImageInfo? _selectedImage;

    /// <inheritdoc />
    protected override void OnInitialized()
    {
        _selectedImage = Images.FirstOrDefault();
    }

    private void OnImageSelect(ImageInfo imageInfo)
    {
        _selectedImage = imageInfo;
    }
}

namespace RazorLibrary.Components.Images;

/// <summary>
/// Information about an image, including the source URL and alt text.
/// </summary>
/// <param name="Src">The image source URL. Required.</param>
/// <param name="Alt">The image alt text. Optional.</param>
public record ImageInfo(string Src, string? Alt = null);

<TelerikEditor @bind-Value="@EditorContent">
    <EditorSettings>
        <EditorPasteSettings 
                             RemoveAttributes="@( new List<string>() )"
                            >
        </EditorPasteSettings>
    </EditorSettings>
</TelerikEditor>

@EditorContent

@code{
    string EditorContent { get; set; }
}