<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MusiLib.Views.PartitionView"
             xmlns:model="clr-namespace:MusiLib.Model"
             xmlns:local="clr-namespace:MusiLib.Views"
             Title="{Binding NomPartitionTitle}">


    <ScrollView Orientation="Both">
        <VerticalStackLayout >
            <HorizontalStackLayout x:Name="Part">
                <CarouselView ItemsSource="{Binding Image}" ItemsLayout="VerticalList" PeekAreaInsets="0">
                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <Image  Source="{Binding .}" HeightRequest="600" WidthRequest="400" Aspect="AspectFill"/>
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>

                <VerticalStackLayout Margin="15" WidthRequest="375">
                    <Label Text="{Binding Description}" />

                    <Grid Margin="15">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="35"/>
                            <RowDefinition Height="70"/>
                            <RowDefinition Height="25"/>
                            <RowDefinition Height="70"/>
                            <RowDefinition Height="25"/>
                            <RowDefinition Height="70"/>
                            <RowDefinition Height="25"/>
                            <RowDefinition Height="70"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="130"/>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Button Grid.Row="1" Grid.Column="0"
                                Text="Jouer"
                                WidthRequest="75"
                                HeightRequest="75"
                                HorizontalOptions="Start"
                                Clicked="Play_Music"
                                x:Name="play_music_button"
                                />
                        <Button Grid.Row="1" Grid.Column="1"
                                Text="Arrêter"
                                WidthRequest="75"
                                HeightRequest="75"
                                HorizontalOptions="Start"
                                Clicked="Stop_Music"
                                />

                        <Border Grid.Row="1" Grid.Column="1"  WidthRequest="75"
                                      HeightRequest="75" HorizontalOptions="End" Stroke="#6600FF" BackgroundColor="#6600FF">
                            <ImageButton Grid.Row="3" Grid.Column="1" x:Name="favoriButton"
                                      WidthRequest="75"
                                      HeightRequest="75"
                                      HorizontalOptions="End"
                                      Clicked="AddFavoriButton"
                                      />
                        </Border>

                        <Border Grid.Row="2" Grid.Column="0" WidthRequest="200"
                                HeightRequest="50" HorizontalOptions="Start" Stroke="#6600FF" BackgroundColor="#6600FF"
                                Margin="0,60,0,0">
                            <Slider Grid.Row="2" Grid.Column="0" 
                                    x:Name="tempo_slider"
                                    Minimum="0" 
                                    Maximum="6" 
                                    Value="1"
                                    ValueChanged="TempoSlider" />
                        </Border>
                        <Label Grid.Row="3" Grid.Column="1" Text="Vitesse musique" WidthRequest="130" HeightRequest="55" HorizontalOptions="End"/>
                        <Label Grid.Row="0" Grid.Column="0" Text="Paramètres du son " HorizontalOptions="End"/>
                        <Label Grid.Row="0" Grid.Column="1" Text="de la partition :"/>
                        <Label Grid.Row="4" Grid.Column="0"   Text="Paramètres du" HorizontalOptions="Center" />
                        <Label Grid.Row="4" Grid.Column="1" Text="métronome :" HorizontalOptions="Start"/>
                        <Label Grid.Row="7" Grid.Column="1" Text="Vitesse Métronome" WidthRequest="130" HeightRequest="55" HorizontalOptions="End" />
                        <Button Grid.Row="5" Grid.Column="0"
                                Text="Jouer"
                                WidthRequest="75"
                                HeightRequest="75"
                                HorizontalOptions="Start"
                                Clicked="Play_Metronome"
                                x:Name="play_metronome_button"
                                />
                        <Button Grid.Row="5" Grid.Column="1"
                                Text="Arrêter"
                                WidthRequest="75"
                                HeightRequest="75"
                                HorizontalOptions="Start"
                                Clicked="Stop_Metronome"
                                />
                        <Border Grid.Row="7" Grid.Column="0" WidthRequest="200" HeightRequest="50" HorizontalOptions="Start" Stroke="#6600FF" BackgroundColor="#6600FF">
                            <Slider Grid.Row="7" Grid.Column="0"
                                    x:Name="BPM_slider"
                                    Minimum="0"
                                    Maximum="6"
                                    Value="1"
                                    ValueChanged="BPMSlider"/>
                        </Border>


                    </Grid>
                </VerticalStackLayout>
            </HorizontalStackLayout>

            <Border Stroke="#000080" >
                <StackLayout x:Name="PartitionsSimilairesStackLayout"
             Orientation="Horizontal"
             VerticalOptions="FillAndExpand"
             HorizontalOptions="FillAndExpand">
                </StackLayout>
            </Border>
            
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>
