@namespace Connected.Components
@using System.Globalization;
@using Connected.Utilities;
@inherits Picker<Color>

@Render

@code {

	protected override RenderFragment PickerContent =>
	@<CascadingValue Value="@this" IsFixed="true">
		<PickerToolbar DisableToolbar="@DisableToolbar" Class="picker-color-toolbar">
			@if (PickerVariant != PickerVariant.Static)
					{
						<IconButton Class="pa-1 mud-close-picker-button" Size="Size.Small" Color="ThemeColor.Inherit" Icon="@CloseIcon" OnClick="@GetEventCallback()" />
					}
					<Spacer />
					<IconButton Class="pa-1" Size="Size.Small" Color="GetButtonColor(ColorPickerView.Spectrum)" Icon="@SpectrumIcon" OnClick="(() => ChangeView(ColorPickerView.Spectrum))" />
					<IconButton Class="pa-1 mx-1" Size="Size.Small" Color="GetButtonColor(ColorPickerView.Grid)" Icon="@GridIcon" OnClick="(() => ChangeView(ColorPickerView.Grid))" />
					<IconButton Class="pa-1" Size="Size.Small" Color="GetButtonColor(ColorPickerView.Palette)" Icon="@PaletteIcon" OnClick="(() => ChangeView(ColorPickerView.Palette))" />
				</PickerToolbar>
				<PickerContent Class="picker-color-content">
					@if (!DisableColorField)
					{
						<div class="picker-color-picker">
							@if (_activeColorPickerView == ColorPickerView.Spectrum)
							{
								<div class="picker-color-overlay" style="@($"background-color: {_baseColor.ToString(ColorOutputFormats.RGB)}")">
									<div class="picker-color-overlay mud-picker-color-overlay-white">
										<div class="picker-color-overlay mud-picker-color-overlay-black">
											<div class="picker-color-overlay" id="@_id" @onclick="OnColorOverlayClick">
												<svg class="picker-color-selector" height="26" width="26" style="transform: @GetSelectorLocation()" @onclick="OnSelectorClicked" @onclick:stopPropagation="true">
													<defs>
														<filter id="picker-color-selector-shadow" x="-50%" y="-50%" width="200%" height="200%">
															<feGaussianBlur in="SourceAlpha" stdDeviation="1" />
															<feOffset dx="0" dy="5" result="offsetblur" />
															<feOffset dx="0" dy="-5" result="offsetblur" />
															<feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge>
														</filter>
													</defs>
													<circle r="10" cx="13" cy="13" stroke="white" stroke-width="1" fill="transparent" style="filter: url(#mud-picker-color-selector-shadow)" />
													<circle r="11" cx="13" cy="13" stroke="white" stroke-width="1.5" fill="transparent" />
												</svg>
											</div>
										</div>
									</div>
								</div>
							}
							@if (_activeColorPickerView is ColorPickerView.Grid or ColorPickerView.GridCompact)
							{
								<div class="picker-color-grid">
									@foreach (var item in _gridList)
									{
										<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
									}
								</div>
							}
						</div>
					}
					@if (_activeColorPickerView != ColorPickerView.GridCompact)
					{
						@if (!DisableSliders || !DisableInputs || !DisablePreview)
						{
							<div class="picker-color-controls">
								@if (!DisableSliders || !DisablePreview)
								{
									<div class="picker-color-controls-row">
										@if (!DisablePreview)
										{
											<div class="picker-color-dot mud-picker-color-dot-current mud-ripple" @onclick="ToggleCollection">
												<div class="picker-color-fill" style="@($"background: {_color.ToString(ColorOutputFormats.RGBA)};")"></div>
											</div>
										}
										@if (!DisableSliders && !_collectionOpen)
										{
											<div class="picker-color-sliders">
												@if (_activeColorPickerView != ColorPickerView.Grid)
												{
													<Slider Class="picker-color-slider hue" dir="ltr" T="int" Value="(int)_color.H" ValueChanged="UpdateBaseColorSlider" Step="1" Min="0" Max="360" />
												}
												@if (!DisableAlpha)
												{
													<Slider Class="picker-color-slider alpha" Value="_color.A" ValueChanged="SetAlpha" T="int" Min="0" Max="255" Step="1" Style="@AlphaSliderStyle" />
												}
											</div>
										}
										@if (_collectionOpen)
										{
											<div class="picker-color-collection">
												@foreach (var item in Palette.Take(5))
												{
													<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
												}
											</div>
										}
									</div>
								}
								@if (!DisableInputs)
								{
									<div class="picker-color-controls-row">
										<div class="picker-color-inputs">
											@switch (ColorPickerMode)
											{
												case ColorPickerMode.RGB:
													<NumericField Value="_color.R" T="int" ValueChanged="SetR" Class="picker-color-inputfield" HelperText="R" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
													<NumericField Value="_color.G" T="int" ValueChanged="SetG" Class="picker-color-inputfield" HelperText="G" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
													<NumericField Value="_color.B" T="int" ValueChanged="SetB" Class="picker-color-inputfield" HelperText="B" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
													break;
												case ColorPickerMode.HSL:
													<NumericField Value="@_color.H" T="double" ValueChanged="SetH" Class="picker-color-inputfield" HelperText="H" Step="1" Min="0" Max="360" Variant="Variant.Outlined" HideSpinButtons="true" />
													<NumericField Value="@_color.S" T="double" ValueChanged="SetS" Class="picker-color-inputfield" HelperText="S" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
													<NumericField Value="@_color.L" T="double" ValueChanged="SetL" Class="picker-color-inputfield" HelperText="L" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
													break;
												case ColorPickerMode.HEX:
													<TextField Value="@GetColorTextValue()" ValueChanged="SetInputString" T="string" Class="picker-color-inputfield" Variant="Variant.Outlined" MaxLength="@GetHexColorInputMaxLength()" HelperText="HEX" />
													break;
												default:
													break;
											}

											@if (!DisableAlpha && ColorPickerMode != ColorPickerMode.HEX)
											{
												<NumericField Value="@(  Math.Round(_color.A / 255.0, 2))" T="double" ValueChanged="SetAlpha" Class="picker-color-inputfield input-field-alpha" HelperText="A" Min="0" Max="1" Step="0.01" Variant="Variant.Outlined" HideSpinButtons="true" />
											}
										</div>
										@if (!DisableModeSwitch)
										{
											<div class="picker-control-switch">
												<IconButton OnClick="ChangeMode" Icon="@ImportExportIcon" Class="pa-1 me-n1"></IconButton>
											</div>
										}
									</div>
								}
							</div>
						}
						@if (_activeColorPickerView == ColorPickerView.Palette)
						{
							<div class="picker-color-view">
								<div class="picker-color-view-collection">
									@foreach (var item in Palette)
									{
										<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
									}
								</div>
							</div>
						}
					}
				</PickerContent>
			</CascadingValue>;

}
