<?xml version="1.0" encoding="utf-8"?>
<UserControl
    x:Class="MangaReader.WinUI.Views.SearchView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MangaReader.WinUI.Views"
    xmlns:vm="using:MangaReader.WinUI.ViewModels"
    xmlns:search="using:MangaReader.Core.Search"
    xmlns:UI="using:CommunityToolkit.WinUI"
    xmlns:Controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:Media="using:CommunityToolkit.WinUI.Media"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    DataContext="{Binding Source={StaticResource Locator}, Path=SearchViewModel}"
    d:DataContext="{d:DesignInstance Type=vm:SearchViewModel, IsDesignTimeCreatable=True}"
    mc:Ignorable="d">
    <UserControl.Resources>
        <Media:AttachedCardShadow x:Key="CommonShadow" Offset="5" BlurRadius="10" Opacity=".4" />
        
        <DataTemplate x:Key="MangaSearchResultTemplate" x:DataType="search:MangaSearchResult">
            <Grid Padding="20" ColumnSpacing="20"  MaxHeight="400" VerticalAlignment="Stretch" Background="{StaticResource CardBackgroundFillColorDefault}" CornerRadius="8">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Border Grid.Column="0" MaxWidth="300" UI:Effects.Shadow="{StaticResource CommonShadow}" VerticalAlignment="Top" HorizontalAlignment="Left">
                    <Grid VerticalAlignment="Top" HorizontalAlignment="Left" CornerRadius="8">
                        <Image Source="{x:Bind Thumbnail, Mode=OneWay}" MaxWidth="300"></Image>
                        <Canvas Background="#19000000"></Canvas>
                    </Grid>
                </Border>
                <Grid Grid.Column="1" RowSpacing="20">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="0" Text="{x:Bind Title}" FontSize="24" FontFamily="{StaticResource PoppinsSemiBold}" TextWrapping="Wrap"></TextBlock>
                    <ItemsControl Grid.Row="1" ItemsSource="{x:Bind Genres, Mode=OneWay}" ItemTemplate="{StaticResource GenreTemplate}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <Controls:WrapPanel Orientation="Horizontal" HorizontalSpacing="10" VerticalSpacing="10" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                    </ItemsControl>
                    <ScrollViewer Grid.Row="3">
                        <TextBlock Text="{x:Bind Description}" Foreground="{StaticResource TextFillColorSecondaryBrush}" FontSize="16" TextWrapping="Wrap" LineStackingStrategy="BlockLineHeight" LineHeight="22"></TextBlock>
                    </ScrollViewer>
                    
                </Grid>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="GenreTemplate" x:DataType="x:String">
            <Border>
                <TextBlock FontSize="12" Foreground="{StaticResource TextFillColorTertiary}" Text="{x:Bind Mode=OneWay, Converter={StaticResource UppercaseConverter}}" FontFamily="{StaticResource PoppinsSemiBold}"></TextBlock>
            </Border>
        </DataTemplate>

    </UserControl.Resources>
    <Grid Padding="0" RowSpacing="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Border HorizontalAlignment="Stretch">
            <StackPanel Orientation="Horizontal" Spacing="10" HorizontalAlignment="Center" Padding="10">
                <TextBox Text="{Binding Keyword, Mode=TwoWay}" Width="300"></TextBox>
                <Button Content="Search" Command="{Binding SearchCommand}"></Button>
            </StackPanel>
        </Border>

        <ScrollViewer Grid.Row="1" RenderTransformOrigin=".5,.5" Padding="50">
            <ScrollViewer.RenderTransform>
                <ScaleTransform ScaleX="1" ScaleY="1" />
            </ScrollViewer.RenderTransform>
            <ItemsRepeater ItemsSource="{Binding SearchResults, Mode=OneWay}" ItemTemplate="{StaticResource MangaSearchResultTemplate}">
                <ItemsRepeater.Layout>
                    <UniformGridLayout MinRowSpacing="50" MinColumnSpacing="50" ItemsStretch="Fill" MinItemWidth="800"></UniformGridLayout>
                </ItemsRepeater.Layout>
            </ItemsRepeater>
        </ScrollViewer>
        
    </Grid>
</UserControl>
