<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="SeriesTracker.Views.DetailSeriesPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:controls="clr-namespace:SeriesTracker.Controls"
    xmlns:service="clr-namespace:SeriesTracker.Services.Converters"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    Title=""
    BackgroundColor="{AppThemeBinding Light={StaticResource White},
                                      Dark={StaticResource Black}}"
    Shell.FlyoutBehavior="Disabled"
    Shell.TabBarIsVisible="False">
    <Shell.BackButtonBehavior>
        <BackButtonBehavior IsEnabled="False" IsVisible="False" />
    </Shell.BackButtonBehavior>
    <ScrollView x:Name="baseContainer" VerticalScrollBarVisibility="Never">
        <toolkit:DockLayout>
            <Grid x:Name="gridContainer">
                <Grid.RowDefinitions>
                    <RowDefinition Height="25" />
                    <RowDefinition Height="340" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="10" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="40" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="260" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Grid
                    Grid.Row="0"
                    Grid.RowSpan="2"
                    Grid.Column="0"
                    Grid.ColumnSpan="3"
                    HeightRequest="440"
                    VerticalOptions="Start">
                    <Image Aspect="Fill" Source="{Binding Series.imagePath}">
                        <Image.Behaviors>
                            <controls:BlurBehavior Radius="10" />
                        </Image.Behaviors>
                    </Image>
                    <Grid BackgroundColor="Transparent">
                        <Grid.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Offset="0.3" Color="Transparent" />
                                <GradientStop Offset="0.8" Color="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
                            </LinearGradientBrush>
                        </Grid.Background>
                    </Grid>
                </Grid>
                <Border
                    Grid.Row="1"
                    Grid.Column="0"
                    Margin="0,15,0,0"
                    Padding="10"
                    Background="{StaticResource DarkDetailBorderStroke}"
                    HorizontalOptions="End"
                    Opacity="0.6"
                    Stroke="Transparent"
                    VerticalOptions="Start">
                    <Image
                        HeightRequest="15"
                        HorizontalOptions="Center"
                        Source="backarrow.png"
                        VerticalOptions="Start"
                        WidthRequest="15">
                        <Image.Behaviors>
                            <toolkit:IconTintColorBehavior TintColor="{StaticResource Gray300}" />
                        </Image.Behaviors>
                    </Image>
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="5" />
                    </Border.StrokeShape>
                    <Border.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding BackCommand}" NumberOfTapsRequired="1" />
                    </Border.GestureRecognizers>
                </Border>
                <Border
                    Grid.Row="1"
                    Grid.Column="2"
                    Margin="0,15,0,0"
                    Padding="10"
                    Background="{StaticResource DarkDetailBorderStroke}"
                    HorizontalOptions="Start"
                    Opacity="0.6"
                    Stroke="Transparent"
                    VerticalOptions="Start">
                    <HorizontalStackLayout>
                        <Label
                            x:Name="ratingLabel"
                            Margin="0,0,5,0"
                            FontFamily="NunitoItalic"
                            FontSize="12"
                            Text="{Binding Series.seriesRating}"
                            TextColor="White" />
                        <Image
                            x:Name="ratingImage"
                            HeightRequest="15"
                            Source="ratestar.png"
                            VerticalOptions="Center"
                            WidthRequest="15" />
                    </HorizontalStackLayout>
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="5" />
                    </Border.StrokeShape>
                    <Border.GestureRecognizers>
                        <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="EditWatchedEpisode_Tapped" />
                    </Border.GestureRecognizers>
                </Border>
                <Border
                    Grid.Row="1"
                    Grid.Column="1"
                    Margin="15"
                    BackgroundColor="Transparent"
                    HorizontalOptions="Fill"
                    Stroke="transparent"
                    VerticalOptions="Fill">
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="10" />
                    </Border.StrokeShape>
                    <Image Aspect="Fill" Source="{Binding Series.imagePath, TargetNullValue='noimage.png'}" />
                </Border>

                <VerticalStackLayout
                    Grid.Row="2"
                    Grid.ColumnSpan="3"
                    BackgroundColor="{AppThemeBinding Light={StaticResource White},
                                                      Dark={StaticResource Black}}"
                    HorizontalOptions="Fill"
                    VerticalOptions="StartAndExpand">
                    <Label
                        x:Name="labelSeriesName"
                        FontAttributes="Bold"
                        FontFamily="NunitoRegular"
                        FontSize="22"
                        HorizontalTextAlignment="Center"
                        Text="{Binding Series.seriesName}"
                        TextColor="{AppThemeBinding Light={StaticResource Gray900},
                                                    Dark={StaticResource Gray200}}" />

                    <toolkit:Expander x:Name="ratingExpander" BackgroundColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}">
                        <controls:RatingSlider
                            AcceptCommand="{Binding ChangeRatingCommand}"
                            ExpanderBehavior="{Binding Source={x:Reference ratingExpander}, Path=IsExpanded}"
                            OldValue="{Binding Series.seriesRating, Mode=OneTime}"
                            RatingLabel="{Binding Source={x:Reference ratingLabel}, Mode=TwoWay}"
                            RatingPicture="{Binding Source={x:Reference ratingImage}, Mode=TwoWay}"
                            Value="{Binding Series.seriesRating, Mode=TwoWay}" />
                    </toolkit:Expander>
                    <StackLayout Margin="10">
                        <Line BackgroundColor="{AppThemeBinding Light={StaticResource LineSeparatorColor}, Dark={StaticResource ActivePageDarkGradient}}" HorizontalOptions="Fill" />
                    </StackLayout>
                </VerticalStackLayout>

                <Grid
                    Grid.Row="3"
                    Grid.ColumnSpan="3"
                    Padding="15,0,15,0"
                    BackgroundColor="{AppThemeBinding Light={StaticResource White},
                                                      Dark={StaticResource Black}}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="40" />
                        <RowDefinition Height="30" />
                        <RowDefinition Height="30" />
                        <RowDefinition Height="30" />

                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <HorizontalStackLayout
                        Grid.Row="0"
                        Grid.Column="0"
                        Grid.ColumnSpan="2"
                        HorizontalOptions="FillAndExpand">
                        <Border
                            x:Name="favoriteBorder"
                            BackgroundColor="Transparent"
                            Stroke="{AppThemeBinding Light={StaticResource LightDetailBorderStroke},
                                                     Dark={StaticResource DarkDetailBorderStroke}}"
                            StrokeThickness="1">
                            <HorizontalStackLayout Padding="5,0,5,0" HorizontalOptions="Start">
                                <Label Text="Избранное" VerticalTextAlignment="Center" />
                                <Image
                                    x:Name="favoriteImage"
                                    HeightRequest="15"
                                    Source="bookmark.png"
                                    WidthRequest="15" />
                            </HorizontalStackLayout>
                            <Border.StrokeShape>
                                <RoundRectangle CornerRadius="5" />
                            </Border.StrokeShape>
                            <Border.GestureRecognizers>
                                <TapGestureRecognizer
                                    Command="{Binding ChangeFavoriteStatusCommand}"
                                    NumberOfTapsRequired="1"
                                    Tapped="ReloadPage_Tapped" />
                            </Border.GestureRecognizers>
                        </Border>
                        <Border
                            BackgroundColor="Transparent"
                            Stroke="{AppThemeBinding Light={StaticResource LightDetailBorderStroke},
                                                     Dark={StaticResource DarkDetailBorderStroke}}"
                            StrokeThickness="1.2">
                            <HorizontalStackLayout Padding="5,0,5,0">
                                <Label Text="Просмотрено:" VerticalTextAlignment="Center" />
                                <Label
                                    x:Name="placeHolder"
                                    Margin="2,0,0,0"
                                    Text="{Binding Series.currentEpisode, Mode=OneWay}"
                                    VerticalTextAlignment="Center" />
                                <Entry
                                    x:Name="editEpisodeEntry"
                                    Margin="0,0,0,-1"
                                    Completed="EpisodeEntry_Completed"
                                    HorizontalTextAlignment="Center"
                                    IsVisible="false"
                                    Keyboard="Numeric"
                                    MaxLength="4"
                                    ReturnCommand="{Binding EditEpisodeCommand}"
                                    ReturnCommandParameter="{Binding Text, Source={x:Reference editEpisodeEntry}}"
                                    Text="{Binding Series.currentEpisode, Mode=TwoWay}"
                                    Unfocused="EditEpisodeEntry_Unfocused"
                                    VerticalOptions="Center"
                                    VerticalTextAlignment="End" />
                                <Label Text=" из " VerticalTextAlignment="Center" />
                                <Label
                                    x:Name="lastEpisodeEntry"
                                    Text="{Binding Series.lastEpisode}"
                                    VerticalTextAlignment="Center" />
                                <Label Text=" эп." VerticalTextAlignment="Center" />
                            </HorizontalStackLayout>
                            <Border.StrokeShape>
                                <RoundRectangle CornerRadius="5" />
                            </Border.StrokeShape>
                            <Border.GestureRecognizers>
                                <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="EditEpisodeEntry_Tapped" />
                            </Border.GestureRecognizers>
                        </Border>
                    </HorizontalStackLayout>
                    <ImageButton
                        x:Name="menuButton"
                        Grid.Row="0"
                        Grid.Column="2"
                        Clicked="ShowBottomSheet_Clicked"
                        HeightRequest="20"
                        HorizontalOptions="End"
                        Rotation="90"
                        Source="dots.png"
                        WidthRequest="20">
                        <ImageButton.Behaviors>
                            <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" />
                        </ImageButton.Behaviors>
                    </ImageButton>
                    <Image
                        Grid.Row="1"
                        Grid.Column="0"
                        Source="episode.png"
                        StyleClass="imageCell">
                        <Image.Behaviors>
                            <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray100}}" />
                        </Image.Behaviors>
                    </Image>
                    <HorizontalStackLayout
                        Grid.Row="1"
                        Grid.Column="1"
                        Grid.ColumnSpan="2"
                        HorizontalOptions="Start">
                        <Label
                            Margin="0,5,3,0"
                            StyleClass="subText"
                            Text="всего эп." />
                        <Label StyleClass="labelCell" Text="{Binding Series.lastEpisode, Mode=OneWay}" />
                        <Label
                            Margin="5,5,3,0"
                            StyleClass="subText"
                            Text="ср. продолж." />
                        <Label StyleClass="labelCell" Text="{Binding Series.seriesDuration, Mode=OneWay, StringFormat='~{0} мин.'}" />
                    </HorizontalStackLayout>
                    <Image
                        Grid.Row="2"
                        Grid.Column="0"
                        Source="releasecalendar.png"
                        StyleClass="imageCell">
                        <Image.Behaviors>
                            <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray100}}" />
                        </Image.Behaviors>
                    </Image>
                    <HorizontalStackLayout
                        Grid.Row="2"
                        Grid.Column="1"
                        Grid.ColumnSpan="2"
                        HorizontalOptions="Start">
                        <Label
                            Margin="0,5,3,0"
                            StyleClass="subText"
                            Text="дата выхода:" />
                        <Label StyleClass="labelCell" Text="{Binding Series.GetReleaseDate, Mode=OneWay}" />
                    </HorizontalStackLayout>

                    <Image
                        Grid.Row="3"
                        Grid.Column="0"
                        Source="addedcalendar.png"
                        StyleClass="imageCell">
                        <Image.Behaviors>
                            <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray100}}" />
                        </Image.Behaviors>
                    </Image>
                    <HorizontalStackLayout
                        Grid.Row="3"
                        Grid.Column="1"
                        Grid.ColumnSpan="2"
                        HorizontalOptions="Start">
                        <Label
                            Margin="0,5,3,0"
                            StyleClass="subText"
                            Text="добавлено:" />
                        <Label StyleClass="labelCell" Text="{Binding Series.GetAddedDate, Mode=OneWay}" />
                        <Label
                            Margin="5,5,3,0"
                            StyleClass="subText"
                            Text="просмотрено:" />
                        <Label StyleClass="labelCell" Text="{Binding Series.GetOverDate, Mode=OneWay, TargetNullValue='смотрю'}" />
                        <Label
                            x:Name="percentLabel"
                            Margin="2,0,0,0"
                            IsVisible="{Binding Series.isOver, Converter={service:InverseBoolConverter}}"
                            StyleClass="subText" />
                    </HorizontalStackLayout>
                </Grid>

                <toolkit:Expander
                    x:Name="descriptionExpander"
                    Grid.Row="5"
                    Grid.RowSpan="2"
                    Grid.ColumnSpan="3"
                    ExpandedChanged="DescriptionAreaChanged">
                    <toolkit:Expander.Header>
                        <HorizontalStackLayout HorizontalOptions="CenterAndExpand">
                            <Label
                                x:Name="descriptionCaption"
                                FontFamily="NunitoItalic"
                                Text="Открыть описание"
                                TextColor="{StaticResource Gray600}" />
                            <Image
                                x:Name="descriptionImage"
                                HeightRequest="20"
                                Source="downarrow.png"
                                WidthRequest="20">
                                <Image.Behaviors>
                                    <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
                                </Image.Behaviors>
                            </Image>
                        </HorizontalStackLayout>
                    </toolkit:Expander.Header>
                    <Label
                        x:Name="descriptionText"
                        Margin="10"
                        FontSize="14"
                        HorizontalTextAlignment="Center"
                        Text="{Binding Series.seriesDescription, TargetNullValue='..Описание отсутсвует..'}"
                        TextColor="{AppThemeBinding Light={StaticResource Gray900},
                                                    Dark={StaticResource Gray200}}" />
                </toolkit:Expander>
            </Grid>

            <controls:BottomSheet
                x:Name="BottomSheet"
                toolkit:DockLayout.DockPosition="Bottom"
                CloseCommand="{Binding CloseCommand}"
                DeleteCommand="{Binding DeleteCommand}"
                DetachCommand="{Binding DetachCommand}"
                EditCommand="{Binding EditCommand}"
                IsVisible="false"
                VerticalOptions="End" />
        </toolkit:DockLayout>
    </ScrollView>
</ContentPage>