<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="SeriesTracker.Views.AnimeDetailPage"
    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"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:vModels="clr-namespace:SeriesTracker.ViewModels"
    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"
        Margin="0,0,0,40"
        VerticalScrollBarVisibility="Never">
        <VerticalStackLayout>
            <Grid x:Name="gridContainer">
                <Grid.RowDefinitions>
                    <RowDefinition Height="25" />
                    <RowDefinition Height="330" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="10" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="250" />
                    <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 Anime.PictureUrl}">
                        <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 Anime.Score}"
                            TextColor="White" />
                        <Image
                            x:Name="ratingImage"
                            HeightRequest="15"
                            Source="ratestar.png"
                            VerticalOptions="Center"
                            WidthRequest="15" />
                    </HorizontalStackLayout>
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="5" />
                    </Border.StrokeShape>
                </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 Anime.PictureUrl, 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 Anime.Title}"
                        TextColor="{AppThemeBinding Light={StaticResource Gray900},
                                                    Dark={StaticResource Gray200}}" />
                    <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="30" />
                        <RowDefinition Height="30" />
                        <RowDefinition Height="30" />
                        <RowDefinition Height="30" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="40" />
                    </Grid.ColumnDefinitions>
                    <Border
                        Grid.Row="0"
                        Grid.RowSpan="2"
                        Grid.Column="3"
                        Padding="5"
                        BackgroundColor="Transparent"
                        HeightRequest="40"
                        Stroke="{AppThemeBinding Light={StaticResource LightDetailBorderStroke},
                                                 Dark={StaticResource DarkDetailBorderStroke}}"
                        VerticalOptions="Start"
                        WidthRequest="40">
                        <Label
                            x:Name="addAnimeBtn"
                            Margin="0,-7,0,0"
                            BackgroundColor="Transparent"
                            FontSize="30"
                            HorizontalTextAlignment="Center"
                            Text="+"
                            TextColor="{AppThemeBinding Light={StaticResource Primary},
                                                        Dark={StaticResource PrimaryDark}}"
                            VerticalTextAlignment="Center">
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer
                                    Command="{Binding AddSeriesCommand}"
                                    CommandParameter="{Binding Anime}"
                                    NumberOfTapsRequired="1" />
                            </Label.GestureRecognizers>
                        </Label>
                        <Border.StrokeShape>
                            <RoundRectangle CornerRadius="5" />
                        </Border.StrokeShape>
                    </Border>
                    <Image
                        Grid.Row="1"
                        Grid.Column="0"
                        Source="boldgenre.png"
                        StyleClass="imageCell">
                        <Image.Behaviors>
                            <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray100}}" />
                        </Image.Behaviors>
                    </Image>
                    <Image
                        Grid.Row="0"
                        Grid.Column="0"
                        Source="info.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 Anime.Status, Mode=OneWay}" />
                        <Label
                            Margin="5,5,3,0"
                            StyleClass="subText"
                            Text="дата выхода" />
                        <Label StyleClass="labelCell" Text="{Binding Anime.StartDate, Mode=OneWay}" />
                    </HorizontalStackLayout>
                    <Image
                        Grid.Row="3"
                        Grid.Column="0"
                        Source="releasecalendar.png"
                        StyleClass="imageCell">
                        <Image.Behaviors>
                            <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray100}}" />
                        </Image.Behaviors>
                    </Image>
                    <Label
                        Grid.Row="1"
                        Grid.Column="1"
                        Grid.ColumnSpan="2"
                        LineBreakMode="TailTruncation"
                        MaxLines="1"
                        StyleClass="labelCell"
                        Text="{Binding Anime.Genres}" />
                    <HorizontalStackLayout
                        Grid.Row="0"
                        Grid.Column="1"
                        HorizontalOptions="Start">
                        <Label
                            FontSize="14"
                            StyleClass="labelCell"
                            Text="{Binding Anime.Kind}"
                            TextTransform="Uppercase" />
                        <Image
                            Margin="3,0,0,0"
                            HeightRequest="20"
                            Source="{Binding Anime.Rating, StringFormat='@ageLimit/{0}.png'}"
                            StyleClass="imageCell"
                            WidthRequest="20">
                            <Image.Behaviors>
                                <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray100}}" />
                            </Image.Behaviors>
                        </Image>
                    </HorizontalStackLayout>

                    <Label
                        Grid.Row="0"
                        Grid.Column="2"
                        FontSize="14"
                        LineBreakMode="TailTruncation"
                        MaxLines="1"
                        StyleClass="labelCell"
                        Text="{Binding Anime.SubTitle, StringFormat=', {0}'}" />

                    <Image
                        Grid.Row="2"
                        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="2"
                        Grid.Column="1"
                        Grid.ColumnSpan="2"
                        HorizontalOptions="Start">
                        <Label
                            Margin="0,5,3,0"
                            StyleClass="subText"
                            Text="всего эп." />
                        <Label StyleClass="labelCell" Text="{Binding Anime.Episodes, Mode=OneWay}" />
                        <Label
                            Margin="5,5,3,0"
                            StyleClass="subText"
                            Text="ср. продолжительность:" />
                        <Label StyleClass="labelCell" Text="{Binding Anime.Duration, Mode=OneWay, StringFormat='~{0} мин.'}" />
                    </HorizontalStackLayout>
                </Grid>

                <toolkit:Expander
                    x:Name="descriptionExpander"
                    Grid.Row="5"
                    Grid.ColumnSpan="3"
                    ExpandedChanged="DescriptionAreaChanged"
                    VerticalOptions="CenterAndExpand">
                    <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 Anime.Description, TargetNullValue='..Описание отсутсвует..'}"
                        TextColor="{AppThemeBinding Light={StaticResource Gray900},
                                                    Dark={StaticResource Gray200}}" />
                </toolkit:Expander>
            </Grid>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>