Ui/InstrumentUi.razor
@using System
@using Clover.Carriable
@using Clover.Components
@using Clover.Player
@using Sandbox.UI;
@inherits Panel
@namespace Clover.Ui
@attribute [StyleSheet]

<root>
	@if ( PlayAlongMaster.IsValid() && !string.IsNullOrEmpty( PlayAlongMaster.PlaybackTitle ) )
	{
		<div class="playalong">
			<h1>@( $"Play along with {PlayAlongMaster.Player.Network.Owner.DisplayName}" )</h1>
			<section>
				<h2>Song</h2>
				<main>
					@PlayAlongMaster.PlaybackTitle
				</main>
			</section>
			<section>
				<h2>Tracks</h2>
				<main class="tracks">
					@for ( int i = 0; i < PlayAlongMaster.PlaybackTracksInstruments.Count; i++ )
					{
						var i1 = i;
						<button class="track-button @( PlayAlongMaster.IsPlaybackTrackEnabled( i ) ? "enabled" : "disabled" ) @( PlayAlongMaster.PlaybackTracksInstruments[i1] == Instrument ? "me" : "other" ) button-sounds" @onclick=@( () => PlayAlongMaster.RequestTrackPlayback( Instrument, i1 ) )>
							<div class="index">@i1</div>
							<div class="player">
								@if ( PlayAlongMaster.PlaybackTracksInstruments[i].IsValid() )
								{
									<img src="@( $"avatar://{PlayAlongMaster.PlaybackTracksInstruments[i].Network.Owner.SteamId}" )"/>
								}
							</div>
						</button>
					}
				</main>
			</section>
		</div>
	}
	<div class="playback">
		<h1>
			@( $"Loaded: {Instrument.PlaybackTitle}" )
		</h1>
		@if ( !Instrument.IsPlayingBack )
		{
			<div class="midis">
				@foreach ( var midi in GetMidiFiles() )
				{
					<button class="midi button-sounds @( Instrument.PlaybackTitle == midi ? "active" : "" )" @onclick=@( () => Instrument.LoadFile( midi ) )>
						@midi
					</button>
				}
			</div>
		}
		<div class="actions">
			<button class="clover-button button-sounds @( string.IsNullOrEmpty( Instrument.PlaybackTitle ) ? "disabled" : "" )" @onclick=@( () => Instrument.StartPlayback() )>Play</button>
			<button class="clover-button button-sounds" @onclick=@( () => Instrument.StopPlayback() )>Stop</button>
			@*<TextEntry Numeric=@( true ) Value:[email protected]/>*@
			<section class="transpose">
				<h2 class="title">Transpose</h2>
				<main>
					<button class="clover-button small button-sounds" @onclick=@( () => Instrument.TransposePlayback -= 12 )>-1</button>
					<div class="value">@( Instrument.TransposePlayback / 12 )</div>
					<button class="clover-button small button-sounds" @onclick=@( () => Instrument.TransposePlayback += 12 )>+1</button>
				</main>
			</section>
			<section>
				<h2 class="title">Tracks</h2>
				<main class="tracks">
					@for ( int i = 0; i < Instrument.PlaybackTracksInstruments.Count; i++ )
					{
						var i1 = i;
						<button class="track-button @( Instrument.IsPlaybackTrackEnabled( i ) ? "enabled" : "disabled" ) @( Instrument.PlaybackTracksInstruments[i1] == Instrument ? "me" : "other" ) button-sounds" @onclick=@( () => Instrument.ToggleTrackPlayback( i1 ) )>
							<div class="index">@i1</div>
							<div class="player">
								@if ( Instrument.PlaybackTracksInstruments[i].IsValid() )
								{
									<img src="@( $"avatar://{Instrument.PlaybackTracksInstruments[i].Network.Owner.SteamId}" )"/>
								}
							</div>
						</button>
					}
				</main>
			</section>
			<section class="progress">
				<h2 class="title">Progress</h2>
				<main>
					@*<div class="progress-bar">
						<div class="progress-bar-fill" style="width: @( Instrument.PlaybackProgress * 100 )px"></div>
					</div>*@
					@( $"{(Instrument.PlaybackProgress * 100):0.00}%" )
				</main>
			</section>
		</div>
	</div>
	<div class="notes">
		@foreach ( var note in Enum.GetValues( typeof(BaseInstrument.Note) ) )
		{
			<div class="note @( BaseInstrument.IsBlackNote( (BaseInstrument.Note)note ) ? "black" : "white" )">
				<div class="name">@BaseInstrument.NoteNames[(BaseInstrument.Note)note]</div>
				<div class="action">
					<Image [email protected]( $"PlayNote{(BaseInstrument.Note)note}", InputGlyphSize.Small, GlyphStyle.Knockout )/>
				</div>
			</div>
		}
	</div>
</root>

@code {

	private BaseInstrument Instrument => PlayerCharacter.Local.Equips.GetEquippedItem<BaseInstrument>( Equips.EquipSlot.Tool );

	private BaseInstrument PlayAlongMaster => Scene.GetAllComponents<BaseInstrument>().FirstOrDefault( x => x != Instrument && x.Player.IsValid() && x.WorldPosition.Distance( Instrument.WorldPosition ) < 300 );

	private List<string> GetMidiFiles()
	{
		return FileSystem.Data.FindFile( "midi", "*.mid" ).ToList();
	}

	protected override int BuildHash()
	{
		return HashCode.Combine( Instrument?.PlaybackProgress, PlayAlongMaster?.PlaybackTracksInstruments.Select( x => x.Network.Owner.SteamId ).ToArray() );
	}

}