@using Sandbox;
@using Sandbox.UI;
@inherits PanelComponent
@namespace Clover.Ui

<root>
	<div class="paint-window" @ref=" Window">
		<div class="vsplit expand">
			<div class="header">
				<h1>Paint</h1>
				<button class="close" @onclick=@( () => { Enabled = false; } )>
					<i class="icon">close</i>
				</button>
			</div>
			<div class="hsplit expand">
				<div class="menu">
					<section>
						<h2 class="section-title">Tools</h2>
						<div class="tools">
							<button @onclick=@( () => CurrentTool = PaintTool.Pencil ) class="paint-button @( CurrentTool == PaintTool.Pencil ? "active" : "" )" tooltip="Pencil">
								<img src="ui/icons/paint/pencil-solid-24.png"/>
							</button>
							<button @onclick=@( () => CurrentTool = PaintTool.Fill ) class="paint-button @( CurrentTool == PaintTool.Fill ? "active" : "" )" tooltip="Fill">
								<img src="ui/icons/paint/color-fill-solid-24.png"/>
							</button>
							<button @onclick=@( () => CurrentTool = PaintTool.Spray ) class="paint-button @( CurrentTool == PaintTool.Spray ? "active" : "" )" tooltip="Spray">
								<img src="ui/icons/paint/spray-can-solid-24.png"/>
							</button>
							<button @onclick=@( () => CurrentTool = PaintTool.Eraser ) class="paint-button @( CurrentTool == PaintTool.Eraser ? "active" : "" )" tooltip="Eraser">
								<img src="ui/icons/paint/eraser-solid-24.png"/>
							</button>
							<button @onclick=@( () => CurrentTool = PaintTool.Eyedropper ) class="paint-button @( CurrentTool == PaintTool.Eyedropper ? "active" : "" )" tooltip="Eyedropper">
								<img src="ui/icons/paint/eyedropper-solid-24.png"/>
							</button>
							<button @onclick=@( () => CurrentTool = PaintTool.Line ) class="paint-button @( CurrentTool == PaintTool.Line ? "active" : "" )" tooltip="Line">
								<img src="ui/icons/paint/minus-regular-24.png"/>
							</button>
							<button @onclick=@( () => CurrentTool = PaintTool.Rectangle ) class="paint-button @( CurrentTool == PaintTool.Rectangle ? "active" : "" )" tooltip="Rectangle">
								<img src="ui/icons/paint/rectangle-regular-24.png"/>
							</button>
							<button @onclick=@( () => CurrentTool = PaintTool.Circle ) class="paint-button @( CurrentTool == PaintTool.Circle ? "active" : "" )" tooltip="Circle">
								<img src="ui/icons/paint/circle-regular-24.png"/>
							</button>
							<button @onclick=@( () => CurrentTool = PaintTool.Move ) class="paint-button @( CurrentTool == PaintTool.Move ? "active" : "" )" tooltip="Move">
								<img src="ui/icons/paint/move-regular-24.png"/>
							</button>
							<button @onclick=@( () => CurrentTool = PaintTool.Clone ) class="paint-button @( CurrentTool == PaintTool.Clone ? "active" : "" )" tooltip="Clone">
								<img src="ui/icons/paint/select-multiple-regular-24.png"/>
							</button>
							<button @onclick=@( () => CurrentTool = PaintTool.Dodge ) class="paint-button @( CurrentTool == PaintTool.Dodge ? "active" : "" )" tooltip="Dodge">
								<img src="ui/icons/paint/sun-regular-24.png"/>
							</button>
							<button @onclick=@( () => CurrentTool = PaintTool.Burn ) class="paint-button @( CurrentTool == PaintTool.Burn ? "active" : "" )" tooltip="Burn">
								<img src="ui/icons/paint/moon-solid-24.png"/>
							</button>
						</div>

						<div class="button-pair">
							@*<button class="paint-button" @onclick=@( () => ZoomIn() )>
								<img src="ui/icons/paint/zoom-in-solid-24.png"/>
							</button>
							<button class="paint-button" @onclick=@( () => ZoomOut() )>
								<img src="ui/icons/paint/zoom-out-solid-24.png"/>
							</button>*@
							<button class="paint-button" @onclick=@( () => ShowGrid = !ShowGrid ) tooltip="Toggle Grid">
								<img src="ui/icons/paint/table-regular-24.png"/>
							</button>
						</div>

						<div class="button-pair">
							<button class="paint-button @( UndoStack.Count == 0 ? "disabled" : "" )" @onclick=@( () => Undo() )>
								<img src="ui/icons/paint/undo-regular-24.png"/>
							</button>

							<button class="paint-button @( RedoStack.Count == 0 ? "disabled" : "" )" @onclick=@( () => Redo() )>
								<img src="ui/icons/paint/redo-regular-24.png"/>
							</button>
						</div>

					</section>

					@if ( ShowBrushSizeForCurrentTool() )
					{
						<section>
							<h2 class="section-title">Tool size</h2>
							<div class="button-pair">
								<button class="paint-button" @onclick=@( () => DecreaseBrushSize() )>
									️<i class="icon">remove</i>
								</button>
								<button class="paint-button" @onclick=@( () => IncreaseBrushSize() )>
									️<i class="icon">add</i>
								</button>
							</div>
							<div>@( $"Brush Size: {BrushSize}" )</div>
						</section>
					}

					@if ( !Monochrome )
					{
						<section>
							<h2 class="section-title">Palettes</h2>
							<button @onclick=@( () => ShowPalettes = !ShowPalettes ) class="paint-button small">
								<i class="icon">@( ShowPalettes ? "chevron_right" : "expand_more" )</i>
								@PaletteName
							</button>
							@if ( ShowPalettes )
							{
								<dialog class="paint-popup">
									@foreach ( var palette in Utilities.Decals.GetPalettes() )
									{
										<button @onclick=@( () => SetPalette( palette ) ) class="paint-button small @( palette == PaletteName ? "active" : "" )">
											@palette
										</button>
									}
								</dialog>
							}
						</section>
					}

					<section class="actions">
						<h2 class="section-title">Actions</h2>
						<button class="paint-button" @onclick=@( () => ShowFileActions = !ShowFileActions )>
							<i class="icon">@( ShowFileActions ? "chevron_right" : "expand_more" )</i>
							File
						</button>
						@if ( ShowFileActions )
						{
							<dialog class="paint-popup">

								<TextEntry class="paint-input" Value:bind="@CurrentFileName" placeholder="Filename"/>
								<TextEntry class="paint-input" Value:bind="@CurrentName" placeholder="Name"/>

								<button class="paint-button" @onclick=@( () => Save() )>Save</button>
								@*<button class="paint-button" @onclick=@( () => ResetPaint() )>Reset</button>*@
								<button class="paint-button" @onclick=@( () => New() )>New</button>
							</dialog>
						}
					</section>

					@*<section>
						<h2>Stats</h2>
						
					</section>*@
				</div>
				<div class="vsplit expand main">
					<div @ref=" CanvasContainer" class="canvas">
						<div @ref=" CanvasSquare" class="canvas-square">
							<Image class="canvas-texture" @ref=" CanvasImage" Texture=@DrawTexture @onmousedown=@OnCanvasMouseDown @onmouseup=@OnCanvasMouseUp/>
							<Image class="preview-overlay" @ref=" PreviewOverlay" Texture=@PreviewTexture/>
							@*<Image class="grid" @ref=" Grid" Texture=@GridTexture/>*@
							@if ( ShowGrid )
							{
								<GridRenderer class="grid" TextureSize=@TextureSize/>
							}
						</div>
						<div @ref=" Crosshair" class="crosshair"></div>
						<div class="preview">
							@if ( _currentPaintType == PaintType.Pumpkin )
							{
								<PumpkinPanel Texture=@DrawTexture/>
							}
							else if ( _currentPaintType == PaintType.Snowman )
							{
								<SnowmanPanel Texture=@DrawTexture/>
							}
							else
							{
								<Image Texture=@DrawTexture/>
							}
						</div>
					</div>
					<div class="toolbar">
						<div class="vsplit">
							@if ( ShowFavoritesEditor )
							{
								<div class="favorites-editor">
									@for ( var i = 0; i < Palette.Count; i++ )
									{
										var index = i;
										var color = Palette[index];
										<button
											class="color-button"
											@onmousedown=@( ( PanelEvent e ) => FavoriteEditorColorButtonClick( e, index ) )
											style="background-color: @color.Hex">
										</button>
									}
								</div>
							}
							<div class="hsplit expand no-shrink">
								<div class="current-colors">
									<div class="color-fg" style="background-color: @ForegroundColor.Hex"></div>
									<div class="color-bg" style="background-color: @BackgroundColor.Hex"></div>
								</div>
								<div class="palette-favorites">

									@if ( Palette.Count > FavoriteColors.Length )
									{
										@for ( var i = 0; i < FavoriteColors.Length; i++ )
										{
											var index = i;
											var color = FavoriteColors[index];
											<button
												class="color-button big @( ShowFavoritesEditor && SelectedFavorite == index ? "selected" : "" )"
												@onmousedown=@( ( PanelEvent e ) => FavoriteColorButtonClick( e, index ) )
												style="background-color: @GetColorFromByte( color ).Hex">
											</button>
										}

										<button class="paint-button @( ShowFavoritesEditor ? "active" : "" )" @onclick=@ToggleShowFavoritesEditor>
											<i class="icon">edit</i>
										</button>

										<button class="paint-button" @onclick=@GenerateFavoriteColors>
											<i class="icon">refresh</i>
										</button>
									}
									else
									{
										@for ( var i = 0; i < Palette.Count; i++ )
										{
											var index = i;
											var color = Palette[index];
											<button
												class="color-button big"
												@onmousedown=@( ( PanelEvent e ) => SetColor( e, index ) )
												tooltip="@color.Hex"
												style="background-color: @color.Hex">
											</button>
										}
									}

								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="sidebar">
					<div class="decals">
						<h2 class="section-title">Decals</h2>
						@foreach ( var decal in Decals )
						{
							<button @onclick=@( () => LoadDecal( decal.FileName ) ) class="decal">
								<Image [email protected]/>
								<div class="decal-name">@decal.Decal.Name</div>
							</button>
						}
						<button class="paint-button" @onclick=@PopulateDecals>Refresh (@Decals.Count)</button>
					</div>
					<div class="images">
						<h2 class="section-title">Import</h2>
						@foreach ( var image in Images )
						{
							<button @onclick=@( () => LoadImage( image ) ) class="image">
								<Image Texture=@image/>
								<div class="image-name">@image.ResourceName</div>
							</button>
						}
						<button class="paint-button" @onclick=@PopulateImages>Refresh (@Images.Count)</button>
					</div>
				</div>
			</div>
		</div>
	</div>

</root>