@using System.Drawing
@using Blazorise.Extensions
@using WatchIt.DTO.Models.Controllers.Photos.Photo
@using WatchIt.Website.Components.Subcomponents.Common

@inherits Component



<div class="panel">
    <div class="container-grid">
        <div class="row mb-3">
            <div class="col">
                <div class="d-flex align-items-center h-100">
                    <h4 class="m-0"><strong>Photos</strong></h4>
                </div>
            </div>
            <div class="col-auto">
                @if (!_photoEditMode)
                {
                    <button type="button" class="btn btn-secondary" disabled="@(!Id.HasValue || !_loaded)" @onclick="() => InitEditPhoto(null)">Add new photo</button>
                }
                else
                {
                    <div class="d-flex gap-3 align-items-center">
                        <button type="button" class="btn btn-secondary" disabled="@(_photoEditSaving)" @onclick="SaveEditPhoto">
                            <LoadingButtonContent IsLoading="@(_photoEditSaving)" LoadingContent="Saving..." Content="Save"/>
                        </button>
                        <button type="button" class="btn btn-secondary" disabled="@(_photoEditSaving)" @onclick="CancelEditPhoto">Cancel</button>
                    </div>
                }
            </div>
        </div>
        <div class="row">
            <div class="col">
                @if (!_photoEditMode)
                {
                    if (_loaded)
                    {
                        if (!_photos.IsNullOrEmpty())
                        {
                            <div id="scrollPhotos" class="d-flex p-3 gap-3" data-bs-spy="scroll" tabindex="0">
                                @foreach (PhotoResponse photo in _photos)
                                {
                                    <div class="container-grid photo-container">
                                        <div class="row">
                                            <div class="col">
                                                <Image Content="@(photo)" AlternativeText="photo" Width="350" Placeholder="/assets/placeholders/photo.png" AspectRatio="Image.ImageComponentAspectRatio.Photo"/>
                                            </div>
                                        </div>
                                        <div class="row mt-2 gx-2">
                                            @if (photo.Background is not null)
                                            {
                                                <div class="col-auto">
                                                    <div class="d-flex align-items-center">
                                                        <div id="backgroundIndicator" class="border rounded-circle circle-@(photo.Background.IsUniversal ? "blue" : "grey") p-1" data-toggle="tooltip" data-placement="top" title="@(photo.Background.IsUniversal ? "Universal" : "Media-only") background">
                                                            <img class="no-vertical-align" src="assets/icons/background.png" alt="background_icon" height="20px" width="20px"/>
                                                        </div>
                                                    </div>
                                                </div>
                                            }
                                            <div class="col">
                                                <div class="d-flex align-items-center h-100 text-size-upload-date">
                                                    Upload: @(photo.UploadDate.ToString("g"))
                                                </div>
                                            </div>
                                            <div class="col-auto">
                                                <button type="button" class="btn btn-secondary btn-sm" @onclick="() => InitEditPhoto(photo.Id)" disabled="@(_photoDeleting.Contains(photo.Id))">
                                                    <img src="assets/icons/edit.png" alt="edit_icon" height="20px" width="20px"/>
                                                </button>
                                            </div>
                                            <div class="col-auto">
                                                <button type="button" class="btn btn-danger btn-sm" disabled="@(_photoDeleting.Contains(photo.Id))" @onclick="() => DeletePhoto(photo.Id)">
                                                    @if (!_photoDeleting.Contains(photo.Id))
                                                    {
                                                        <img src="assets/icons/delete.png" alt="delete_icon" height="20px" width="20px"/>
                                                    }
                                                    else
                                                    {
                                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                                    }
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                }
                            </div>
                        }
                        else
                        {
                            <div class="d-flex justify-content-center">
                                Photo list is empty
                            </div>
                        }
                    }
                    else
                    {
                        <div class="d-flex justify-content-center">
                            <Loading Color="Loading.Colors.Light"/>
                        </div>
                    }
                }
                else
                {
                    <div class="container-grid">
                        <div class="row">
                            <div class="col-auto">
                                <div class="container-grid">
                                    <div class="row">
                                        <div class="col">
                                            <Image Content="@(_photoEditRequest)" Placeholder="/assets/placeholders/photo.png" AlternativeText="edit_photo" Width="300" AspectRatio="Image.ImageComponentAspectRatio.Photo"/>
                                        </div>
                                    </div>
                                    @if (_photoEditId is null)
                                    {
                                        <div class="row mt-2">
                                            <div class="col">
                                                <InputFile class="form-control" OnChange="LoadPhoto" autocomplete="off" style="width: 300px;"/>
                                            </div>
                                        </div>
                                    }
                                </div>
                            </div>
                            <div class="col">
                                <div class="container-grid">
                                    <div class="row form-group">
                                        <div class="col">
                                            <div class="form-check">
                                                <InputCheckbox class="form-check-input" @bind-Value="_photoEditIsBackground"/>
                                                <label class="form-check-label">Use as background</label>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-check">
                                                <InputCheckbox class="form-check-input" @bind-Value="_photoEditBackgroundData.IsUniversal" disabled="@(!_photoEditIsBackground)"/>
                                                <label class="form-check-label">Use as universal background</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row form-group my-1">
                                        <label for="first-gradient-color" class="col-4 col-form-label">First gradient color</label>
                                        <div class="col-8">
                                            <input type="color" class="form-control form-control-color w-100" id="first-gradient-color" value="@(ColorTranslator.ToHtml(_photoEditBackgroundData.FirstGradientColor))" disabled="@(!_photoEditIsBackground)" @onchange="EditPhotoFirstGradientColorChanged">
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <label for="second-gradient-color" class="col-4 col-form-label">Second gradient color</label>
                                        <div class="col-8">
                                            <input type="color" class="form-control form-control-color w-100" id="second-gradient-color" value="@(ColorTranslator.ToHtml(_photoEditBackgroundData.SecondGradientColor))" disabled="@(!_photoEditIsBackground)" @onchange="EditPhotoSecondGradientColorChanged">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>