@using Sandbox;
@using Sandbox.UI;
@inherits PanelComponent
@namespace BottomsUp

<root style="width:100%;height:100%;position:absolute;top:0;left:0;">

	@if ( Menu.State == MenuManager.MenuState.Menu || Menu.State == MenuManager.MenuState.FadingOut )
	{
		<div class="menu-screen @(Menu.State == MenuManager.MenuState.FadingOut ? "fading" : "")"
			 style="width:100%;height:100%;position:absolute;top:0;left:0;display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:rgba(0,0,0,0.75);pointer-events:all;">

			<div style="position:relative;">

				<div class="menu-panel"
					 style="position:relative;background-color:#f4e4c1;border:5px solid #4a2f1c;border-radius:14px;padding:56px 64px 48px 64px;min-width:900px;display:flex;flex-direction:column;align-items:stretch;box-shadow:0 12px 32px rgba(0,0,0,0.7);pointer-events:all;">

					<div class="play-button" onclick="@(() => Menu.StartGame())"
						 style="width:100%;display:flex;align-items:center;justify-content:center;background-color:#c99a3b;color:white;font-size:34px;font-weight:bold;padding:20px;border:3px solid #4a2f1c;border-radius:10px;cursor:pointer;pointer-events:all;box-sizing:border-box;margin-bottom:28px;">
						Play
					</div>

					<div class="menu-body" style="display:flex;flex-direction:row;justify-content:space-between;">

						<div class="menu-left" style="display:flex;flex-direction:column;width:360px;">

							<div class="description" style="display:flex;flex-direction:column;margin-bottom:28px;">
								<div style="color:#4a2f1c;font-size:18px;line-height:1.5;">Control your hands and arm to drink your fill!</div>
								<div style="color:#4a2f1c;font-size:18px;line-height:1.5;margin-top:6px;">Careful though, each drink seems to have an effect on you...</div>
							</div>

							<!-- Background Audio Toggle -->
							<div class="audio-toggle" onclick="@(() => Menu.ToggleMute())"
								 style="display:flex;flex-direction:row;align-items:center;cursor:pointer;pointer-events:all;margin-bottom:12px;">
								<div class="checkbox-box" style="width:26px;height:26px;border:2px solid #4a2f1c;background-color:white;margin-right:12px;display:flex;align-items:center;justify-content:center;">
									@if ( !Menu.IsMuted )
									{
										<div style="width:16px;height:16px;background-color:#4a2f1c;"></div>
									}
								</div>
								<div style="color:#4a2f1c;font-size:22px;">Background audio</div>
							</div>

							<!-- Talking Audio Toggle -->
							<div class="audio-toggle" onclick="@(() => Menu.ToggleTalkingMute())"
								 style="display:flex;flex-direction:row;align-items:center;cursor:pointer;pointer-events:all;">
								<div class="checkbox-box" style="width:26px;height:26px;border:2px solid #4a2f1c;background-color:white;margin-right:12px;display:flex;align-items:center;justify-content:center;">
									@if ( !Menu.IsTalkingMuted )
									{
										<div style="width:16px;height:16px;background-color:#4a2f1c;"></div>
									}
								</div>
								<div style="color:#4a2f1c;font-size:22px;">Talking audio</div>
							</div>

						</div>

						<div class="menu-right" style="display:flex;flex-direction:column;align-items:center;margin-left:48px;">

							<div class="howto-title" style="font-size:26px;color:#4a2f1c;font-weight:bold;margin-bottom:16px;">How to play</div>

							<div class="howto-row" style="display:flex;flex-direction:row;">

								<div class="howto-item" style="display:flex;flex-direction:column;align-items:center;margin:0 32px 0 20px;">
									<div style="position:relative;width:110px;height:160px;">
										<div class="mouse-icon" style="width:110px;height:160px;border:4px solid #4a2f1c;border-radius:55px;background-color:white;"></div>
										<div style="position:absolute;top:-30px;left:50%;transform:translateX(-50%);font-size:24px;color:#4a2f1c;">▲</div>
										<div style="position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-size:24px;color:#4a2f1c;">▼</div>
										<div style="position:absolute;left:-30px;top:50%;transform:translateY(-50%);font-size:24px;color:#4a2f1c;">◀</div>
										<div style="position:absolute;right:-30px;top:50%;transform:translateY(-50%);font-size:24px;color:#4a2f1c;">▶</div>
									</div>
									<div class="howto-label" style="color:#4a2f1c;font-size:18px;margin-top:10px;">move hand</div>
								</div>

								<div class="howto-item" style="display:flex;flex-direction:column;align-items:center;margin:0 20px;">
									<div class="mouse-icon" style="width:110px;height:160px;border:4px solid #4a2f1c;border-radius:55px;position:relative;overflow:hidden;background-color:white;">
										<div class="mouse-fill" style="position:absolute;top:0;left:0;width:50%;height:45%;background-color:#4a2f1c;"></div>
									</div>
									<div class="howto-label" style="color:#4a2f1c;font-size:18px;margin-top:10px;">tilt left</div>
								</div>

								<div class="howto-item" style="display:flex;flex-direction:column;align-items:center;margin:0 20px;">
									<div class="mouse-icon" style="width:110px;height:160px;border:4px solid #4a2f1c;border-radius:55px;position:relative;overflow:hidden;background-color:white;">
										<div class="mouse-fill" style="position:absolute;top:0;right:0;width:50%;height:45%;background-color:#4a2f1c;"></div>
									</div>
									<div class="howto-label" style="color:#4a2f1c;font-size:18px;margin-top:10px;">tilt right</div>
								</div>

							</div>

							<div class="howto-caption" style="color:#4a2f1c;font-size:18px;margin-top:16px;text-align:center;">Do your best to drink your fill!</div>

						</div>

					</div>

				</div>

				<img class="menu-logo" src="/ui/logo.png"
					 style="position:absolute;top:-70px;left:50%;transform:translateX(-50%);max-width:300px;max-height:140px;" />

			</div>
		</div>
	}

</root>

@code
{
	[Property] public MenuManager Menu { get; set; }

	protected override int BuildHash()
	{
		// Added Menu?.IsTalkingMuted so the UI knows to update the checkmark when clicked
		return System.HashCode.Combine( Menu?.State, Menu?.IsMuted, Menu?.IsTalkingMuted );
	}
}