@using Cropper.Blazor.Models

<CropperComponent Class="big-img"
                  Src="images/Rivne.jpg"
                  Options="new Options()" />

@* Make sure the size of the image fits perfectly into the container *@
<style>
    .big-img {
        max-height: 500px;
        /* This rule is very important, please don't ignore this */
        max-width: 100%;
    }
</style>

@using Cropper.Blazor.Models

<div class="img-container">
    <CropperComponent Src="cropperblazor.png" Options="new Options()" />
</div>

<style>
    .img-container {
        max-height: 300px;
        width: 100%;
    }
</style>

@using Cropper.Blazor.Models

<div class="cropper-canvas-container">
    <CropperComponent @ref="cropperComponent"
                      IsErrorLoadImage="@IsErrorLoadImage"
                      ErrorLoadImageSrc="images/error300px.png"
                      ErrorLoadImageClass="error-image"
                      CropperComponentType="CropperComponentType.Canvas"
                      InputAttributes="@InputAttributes"
                      Options="options" />
</div>

@if (!IsErrorLoadImage)
{
    <div class="button" @onclick="SetError">
        Set Error
    </div>
}

<style>
    .cropper-canvas-container {
        max-height: 300px;
        width: 100%;
        /* These styles below are just needed for a nice button and don't related with cropper component */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .error-image {
        filter: grayscale(100%);
    }

    /* These styles are just needed for a nice button and don't related with cropper component */
    .button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
    }
</style>

@code {
    [Inject] private IJSRuntime? JSRuntime { get; set; }

    private CropperComponent? cropperComponent = null!;
    private Options options;
    private bool IsErrorLoadImage { get; set; } = false;

    public Dictionary<string, object> InputAttributes { get; set; } = new Dictionary<string, object>
    {
        { "id", "canvas-cropper" }
    };

    protected override void OnInitialized()
    {
        options = new Options
        {

        };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            
            
            
            
            
            
            ElementReference? canvasElementReference = cropperComponent!.GetCropperElementReference();

            
            await JSRuntime!.InvokeVoidAsync(
                "fillCanvasWithRandomColors",
                canvasElementReference);

            
            cropperComponent.InitCropper();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public void SetError()
    {
        
        
        IsErrorLoadImage = true;
        cropperComponent!.Destroy();
    }
}