@* Styleguide: the Actions components (Button, Dropdown, FAB, Modal, Swap, Theme controller). *@
<div class="grid gap-8 lg:grid-cols-2">
	<section class="flex flex-col gap-3 lg:col-span-2">
		<h3 class="text-lg font-bold">DButton</h3>
		<div class="flex flex-wrap items-center gap-2">
			@foreach (var color in Enum.GetValues<DColor>())
			{
				<DButton Color="color">@color</DButton>
			}
		</div>
		@foreach (var variant in Enum.GetValues<DButtonVariant>().Skip(1))
		{
			<div class="flex flex-wrap items-center gap-2">
				<span class="w-16 text-sm opacity-60">@variant</span>
				@foreach (var color in Enum.GetValues<DColor>())
				{
					<DButton Color="color" Variant="variant">@color</DButton>
				}
			</div>
		}
		<div class="flex flex-wrap items-center gap-2">
			<DButton Size="DSize.Xs">Xs</DButton>
			<DButton Size="DSize.Sm">Sm</DButton>
			<DButton>Md</DButton>
			<DButton Size="DSize.Lg">Lg</DButton>
			<DButton Size="DSize.Xl">Xl</DButton>
		</div>
		<div class="flex flex-wrap items-center gap-2">
			<DButton Shape="DButtonShape.Wide" Color="DColor.Primary">Wide</DButton>
			<DButton Shape="DButtonShape.Square"><i class="ion-md-heart"></i></DButton>
			<DButton Shape="DButtonShape.Circle" Color="DColor.Secondary"><i class="ion-md-add"></i></DButton>
			<DButton Shape="DButtonShape.Circle" Size="DSize.Sm"><i class="ion-md-close"></i></DButton>
			<DButton Color="DColor.Accent"><i class="ion-md-mail"></i> With icon</DButton>
		</div>
		<DButton Shape="DButtonShape.Block">Block</DButton>
		<div class="flex flex-wrap items-center gap-2">
			<DButton Active="true">Active</DButton>
			<DButton Active="true" Color="DColor.Primary">Active primary</DButton>
			<DButton Disabled="true">Disabled</DButton>
			<DButton Disabled="true" Color="DColor.Primary">Disabled primary</DButton>
			<DButton Href="#">Link button</DButton>
			<DButton Href="#" Disabled="true">Disabled link</DButton>
			<DButton Color="DColor.Info" OnClick="() => buttonClicks++">Clicked @buttonClicks times</DButton>
		</div>
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DDropdown</h3>
		<div class="flex flex-wrap items-start gap-2">
			<DDropdown @bind-IsOpen="dropdownOpen" CloseOnContentClick="true" TriggerClass="btn" ContentClass="w-52 rounded-box p-2">
				<Trigger>Menu (@(dropdownOpen ? "open" : "closed"))</Trigger>
				<ChildContent>
					<ul class="menu w-full p-0">
						<li><a><i class="ion-md-person"></i> Profile</a></li>
						<li><a><i class="ion-md-settings"></i> Settings</a></li>
						<li><a><i class="ion-md-home"></i> Home</a></li>
					</ul>
				</ChildContent>
			</DDropdown>
			<DDropdown Align="DDropdownAlign.End" TriggerClass="btn btn-primary" ContentClass="w-52 rounded-box p-4">
				<Trigger>Align end</Trigger>
				<ChildContent>Any content: press Escape or click outside to close.</ChildContent>
			</DDropdown>
			<DDropdown Hover="true" TriggerClass="btn btn-ghost" ContentClass="w-40 rounded-box p-2">
				<Trigger>Hover</Trigger>
				<ChildContent>
					<ul class="menu w-full p-0">
						<li><a>One</a></li>
						<li><a>Two</a></li>
					</ul>
				</ChildContent>
			</DDropdown>
		</div>
		<div class="flex flex-wrap items-center gap-2 pt-24">
			<DDropdown Placement="DDropdownPlacement.Top" TriggerClass="btn btn-sm" ContentClass="w-32 rounded-box p-2">
				<Trigger>Top</Trigger>
				<ChildContent>Above</ChildContent>
			</DDropdown>
			<DDropdown Placement="DDropdownPlacement.Right" TriggerClass="btn btn-sm" ContentClass="w-32 rounded-box p-2">
				<Trigger>Right</Trigger>
				<ChildContent>Beside</ChildContent>
			</DDropdown>
			<DDropdown Placement="DDropdownPlacement.Left" Align="DDropdownAlign.End" TriggerClass="btn btn-sm"
					   ContentClass="w-32 rounded-box p-2" class="ml-auto">
				<Trigger>Left</Trigger>
				<ChildContent>Beside</ChildContent>
			</DDropdown>
		</div>
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DModal</h3>
		<div class="flex flex-wrap items-center gap-2">
			@foreach (var placement in Enum.GetValues<DModalPlacement>())
			{
				<DButton OnClick="() => OpenModal(placement)">@placement</DButton>
			}
			<DButton Color="DColor.Warning" OnClick="() => strictModalOpen = true">No backdrop close</DButton>
		</div>
		<p class="text-sm opacity-60">Escape and a click outside close the first modal; the second closes only from its buttons or Escape.</p>
		<DModal @bind-IsOpen="modalOpen" Placement="modalPlacement">
			<Heading>Hello from @modalPlacement</Heading>
			<ChildContent>
				<p class="py-4">Press Escape or click outside to close.</p>
			</ChildContent>
			<Actions>
				<DButton OnClick="() => modalOpen = false">Close</DButton>
			</Actions>
		</DModal>
		<DModal @bind-IsOpen="strictModalOpen" CloseOnBackdrop="false" BoxClass="w-11/12 max-w-3xl">
			<Heading>Confirm</Heading>
			<ChildContent>
				<p class="py-4">A wider box (BoxClass) that ignores clicks on the backdrop.</p>
			</ChildContent>
			<Actions>
				<DButton Variant="DButtonVariant.Ghost" OnClick="() => strictModalOpen = false">Cancel</DButton>
				<DButton Color="DColor.Primary" OnClick="() => strictModalOpen = false">OK</DButton>
			</Actions>
		</DModal>
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DSwap</h3>
		<div class="flex flex-wrap items-center gap-6 text-4xl">
			<DSwap @bind-Active="swapVolume" LabelText="mute">
				<On><i class="ion-md-volume-high"></i></On>
				<Off><i class="ion-md-volume-off"></i></Off>
			</DSwap>
			<DSwap @bind-Active="swapTheme" Effect="DSwapEffect.Rotate" LabelText="dark mode">
				<On><i class="ion-md-sunny"></i></On>
				<Off><i class="ion-md-moon"></i></Off>
			</DSwap>
			<DSwap Effect="DSwapEffect.Rotate" class="btn btn-circle" LabelText="menu">
				<On><i class="ion-md-close"></i></On>
				<Off><i class="ion-md-menu"></i></Off>
			</DSwap>
			<DSwap Effect="DSwapEffect.Flip" class="text-5xl">
				<On>😈</On>
				<Off>😇</Off>
			</DSwap>
			<DSwap class="text-base font-bold">
				<On>ON</On>
				<Off>OFF</Off>
			</DSwap>
			<DSwap Active="true" Disabled="true" class="text-base">
				<On>Disabled on</On>
				<Off>Disabled off</Off>
			</DSwap>
		</div>
		<p class="text-sm opacity-60">Volume: @(swapVolume ? "on" : "off"), sun: @(swapTheme ? "on" : "off")</p>
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DFab</h3>
		<p class="text-sm opacity-60">Click or focus the button; these boxes contain the fixed FABs (transform-gpu).</p>
		<div class="grid grid-cols-2 gap-3">
			<div class="relative h-80 transform-gpu overflow-hidden rounded-box bg-base-200">
				<DFab LabelText="Actions">
					<Trigger><i class="ion-md-add text-xl"></i></Trigger>
					<Close>Close <span class="btn btn-circle btn-lg btn-error"><i class="ion-md-close"></i></span></Close>
					<ChildContent>
						<div>Camera <DButton Size="DSize.Lg" Shape="DButtonShape.Circle"><i class="ion-md-camera"></i></DButton></div>
						<div>Image <DButton Size="DSize.Lg" Shape="DButtonShape.Circle"><i class="ion-md-image"></i></DButton></div>
						<div>Mic <DButton Size="DSize.Lg" Shape="DButtonShape.Circle"><i class="ion-md-mic"></i></DButton></div>
					</ChildContent>
				</DFab>
			</div>
			<div class="relative h-80 transform-gpu overflow-hidden rounded-box bg-base-200">
				<DFab Flower="true" Color="DColor.Secondary" LabelText="Actions">
					<Trigger><i class="ion-md-add text-xl"></i></Trigger>
					<MainAction>
						<DButton Size="DSize.Lg" Shape="DButtonShape.Circle" Color="DColor.Accent"><i class="ion-md-create"></i></DButton>
					</MainAction>
					<ChildContent>
						<div class="tooltip tooltip-left" data-tip="Camera">
							<DButton Size="DSize.Lg" Shape="DButtonShape.Circle"><i class="ion-md-camera"></i></DButton>
						</div>
						<div class="tooltip tooltip-left" data-tip="Image">
							<DButton Size="DSize.Lg" Shape="DButtonShape.Circle"><i class="ion-md-image"></i></DButton>
						</div>
						<div class="tooltip tooltip-left" data-tip="Mic">
							<DButton Size="DSize.Lg" Shape="DButtonShape.Circle"><i class="ion-md-mic"></i></DButton>
						</div>
					</ChildContent>
				</DFab>
			</div>
		</div>
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DThemeController</h3>
		<p class="text-sm opacity-60">Overrides the app theme while checked.</p>
		<label class="flex items-center gap-2">
			<i class="ion-md-sunny"></i>
			<DThemeController Value="neo-dark" @bind-Checked="themeToggle" class="toggle" aria-label="dark theme" />
			<i class="ion-md-moon"></i>
		</label>
		<div class="join">
			<DThemeController Radio="true" Value="neo-light" name="styleguide-theme" class="btn join-item" aria-label="neo-light"
							  Checked="@(themeRadio == "neo-light")" CheckedChanged="@(() => themeRadio = "neo-light")" />
			<DThemeController Radio="true" Value="neo-dark" name="styleguide-theme" class="btn join-item" aria-label="neo-dark"
							  Checked="@(themeRadio == "neo-dark")" CheckedChanged="@(() => themeRadio = "neo-dark")" />
			<DButton class="join-item" OnClick="() => themeRadio = null">Reset</DButton>
		</div>
	</section>
</div>

@code {
	int buttonClicks;
	bool dropdownOpen;
	bool modalOpen;
	bool strictModalOpen;
	DModalPlacement modalPlacement;
	bool swapVolume = true;
	bool swapTheme;
	bool themeToggle;
	string themeRadio;

	void OpenModal(DModalPlacement placement)
	{
		modalPlacement = placement;
		modalOpen = true;
	}
}