<?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"
             xmlns:vm="clr-namespace:BookReader.ViewModels"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="BookReader.Views.ReaderPage"
             x:DataType="vm:ReaderViewModel"
             Shell.NavBarIsVisible="False"
             NavigationPage.HasNavigationBar="False"
             BackgroundColor="#1B130F">

    <ContentPage.Resources>
        <toolkit:InvertedBoolConverter x:Key="InvertedBoolConverter" />
    </ContentPage.Resources>

    <Grid>
        <HybridWebView x:Name="ReaderWebView"
                       RawMessageReceived="OnRawMessageReceived"
                       DefaultFile="index.html"
                       HorizontalOptions="Fill"
                       VerticalOptions="Fill" />

        <Grid IsVisible="{Binding IsMenuVisible}"
              BackgroundColor="#73000000"
              InputTransparent="False">
            <Grid.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding HideMenuCommand}" />
            </Grid.GestureRecognizers>

            <Grid RowDefinitions="Auto,*,Auto"
                  Padding="16,24,16,20">
                <Border Grid.Row="0"
                        BackgroundColor="#F7E8D9"
                        StrokeThickness="0"
                        StrokeShape="RoundRectangle 24"
                        Padding="16">
                    <Grid ColumnDefinitions="Auto,*,Auto"
                          ColumnSpacing="12">
                        <Button Grid.Column="0"
                                Text="Назад"
                                Style="{StaticResource SecondaryButtonStyle}"
                                Padding="16,10"
                                Clicked="OnBackToLibrary" />

                        <VerticalStackLayout Grid.Column="1"
                                             VerticalOptions="Center"
                                             Spacing="2">
                            <Label Text="{Binding Book.Title}"
                                   FontFamily="OpenSansSemibold"
                                   FontSize="17"
                                   TextColor="{StaticResource InkColor}"
                                   MaxLines="2"
                                   LineBreakMode="TailTruncation" />
                            <Label Text="{Binding ProgressText}"
                                   FontSize="13"
                                   TextColor="{StaticResource AccentDarkColor}" />
                            <Label Text="{Binding ChapterProgressText}"
                                   FontSize="12"
                                   TextColor="{StaticResource InkSoftColor}"
                                   MaxLines="1"
                                   LineBreakMode="TailTruncation" />
                        </VerticalStackLayout>

                        <Button Grid.Column="2"
                                Text="Скрыть"
                                Style="{StaticResource TonalButtonStyle}"
                                Command="{Binding HideMenuCommand}" />
                    </Grid>
                </Border>

                <Border Grid.Row="2"
                        BackgroundColor="#FFF8F0"
                        StrokeThickness="0"
                        StrokeShape="RoundRectangle 28"
                        Padding="18"
                        VerticalOptions="End">
                    <Border.GestureRecognizers>
                        <TapGestureRecognizer Tapped="OnMenuPanelTapped" />
                    </Border.GestureRecognizers>

                    <ScrollView HeightRequest="360">
                        <VerticalStackLayout Spacing="16">
                            <Label Text="Параметры чтения"
                                   FontFamily="OpenSansSemibold"
                                   FontSize="20"
                                   TextColor="{StaticResource InkColor}" />

                            <Grid ColumnDefinitions="*,*,*"
                                  ColumnSpacing="10">
                                <Button Grid.Column="0"
                                        Text="Тёплая"
                                        Style="{StaticResource TonalButtonStyle}"
                                        Clicked="OnSepiaThemeClicked" />
                                <Button Grid.Column="1"
                                        Text="Светлая"
                                        Style="{StaticResource TonalButtonStyle}"
                                        Clicked="OnLightThemeClicked" />
                                <Button Grid.Column="2"
                                        Text="Тёмная"
                                        Style="{StaticResource TonalButtonStyle}"
                                        Clicked="OnDarkThemeClicked" />
                            </Grid>

                            <VerticalStackLayout Spacing="8">
                                <Label Text="Размер шрифта"
                                       Style="{StaticResource CaptionStyle}" />
                                <Grid ColumnDefinitions="Auto,*,Auto"
                                      ColumnSpacing="12">
                                    <Button Grid.Column="0"
                                            Text="A-"
                                            Style="{StaticResource SecondaryButtonStyle}"
                                            WidthRequest="56"
                                            Clicked="OnDecreaseFontSize" />
                                    <Label Grid.Column="1"
                                           Text="{Binding FontSize, StringFormat='Текущее значение: {0}px'}"
                                           FontSize="14"
                                           TextColor="{StaticResource InkColor}"
                                           HorizontalOptions="Center"
                                           VerticalOptions="Center" />
                                    <Button Grid.Column="2"
                                            Text="A+"
                                            Style="{StaticResource SecondaryButtonStyle}"
                                            WidthRequest="56"
                                            Clicked="OnIncreaseFontSize" />
                                </Grid>
                            </VerticalStackLayout>

                            <VerticalStackLayout Spacing="8">
                                <Label Text="{Binding Brightness, StringFormat='Яркость: {0:F0}%'}"
                                       Style="{StaticResource CaptionStyle}" />
                                <Slider Minimum="70"
                                        Maximum="120"
                                        Value="{Binding Brightness}"
                                        ValueChanged="OnBrightnessChanged"
                                        Style="{StaticResource ReaderSliderStyle}" />
                            </VerticalStackLayout>

                            <VerticalStackLayout Spacing="8">
                                <Label Text="Гарнитура"
                                       Style="{StaticResource CaptionStyle}" />
                                <Picker x:Name="FontFamilyPicker"
                                        ItemsSource="{Binding AvailableFonts}"
                                        SelectedItem="{Binding FontFamily}"
                                        Style="{StaticResource AppPickerStyle}"
                                        SelectedIndexChanged="OnFontFamilyChanged" />
                            </VerticalStackLayout>

                            <Button Text="Оглавление"
                                    Style="{StaticResource PrimaryButtonStyle}"
                                    Command="{Binding ToggleChapterListCommand}" />

                            <CollectionView ItemsSource="{Binding Chapters}"
                                            IsVisible="{Binding IsChapterListVisible}"
                                            MaximumHeightRequest="190"
                                            SelectionMode="Single"
                                            SelectionChanged="OnChapterSelected">
                                <CollectionView.ItemTemplate>
                                    <DataTemplate x:DataType="x:String">
                                        <Border BackgroundColor="{StaticResource SurfaceMuted}"
                                                Stroke="{StaticResource BorderColor}"
                                                StrokeThickness="1"
                                                StrokeShape="RoundRectangle 16"
                                                Margin="0,0,0,10"
                                                Padding="12,10">
                                            <Label Text="{Binding .}"
                                                   FontSize="13"
                                                   TextColor="{StaticResource InkColor}"
                                                   LineBreakMode="TailTruncation" />
                                        </Border>
                                    </DataTemplate>
                                </CollectionView.ItemTemplate>
                            </CollectionView>
                        </VerticalStackLayout>
                    </ScrollView>
                </Border>
            </Grid>
        </Grid>

        <VerticalStackLayout VerticalOptions="End"
                             HorizontalOptions="Center"
                             Padding="12,0,12,16"
                             InputTransparent="True">
            <Border BackgroundColor="#B31F1612"
                    StrokeThickness="0"
                    StrokeShape="RoundRectangle 18"
                    Padding="12,6">
                <Label Text="{Binding ProgressText}"
                       TextColor="White"
                       FontSize="12"
                       HorizontalTextAlignment="Center" />
            </Border>
        </VerticalStackLayout>
    </Grid>
</ContentPage>
