<UserControl
    x:Class="Cerberus.MVVM.View.WatchListView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:fa="http://schemas.fontawesome.io/icons/"
    xmlns:local="clr-namespace:Cerberus.MVVM.View"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewModel="clr-namespace:Cerberus.MVVM.ViewModel"
    d:DesignHeight="675"
    d:DesignWidth="1100"
    mc:Ignorable="d">

    <UserControl.DataContext>
        <viewModel:WatchListViewModel />
    </UserControl.DataContext>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="20" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  Top Filters Border  -->
        <Border
            Grid.Row="0"
            Width="1000"
            Height="100"
            Margin="10"
            Padding="10"
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Background="#434C59"
            CornerRadius="10">
            <StackPanel
                Margin="20"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                Orientation="Horizontal">
                <!--  Genre ComboBox  -->
                <StackPanel>
                    <TextBlock
                        Margin="0,0,0,5"
                        FontWeight="Bold"
                        Foreground="White"
                        Text="Genre" />
                    <ComboBox
                        Width="200"
                        Height="30"
                        Background="#FF3E3E3E"
                        Foreground="Black"
                        SelectedItem="{Binding SelectedGenre, Mode=TwoWay}">
                        <ComboBoxItem Content="All" />
                        <ComboBoxItem Content="Action" />
                        <ComboBoxItem Content="Drama" />
                        <ComboBoxItem Content="Comedy" />
                        <ComboBoxItem Content="Adventure" />
                        <ComboBoxItem Content="Crime" />
                        <ComboBoxItem Content="Animation" />
                        <ComboBoxItem Content="Documentary" />
                        <ComboBoxItem Content="Fantasy" />
                        <ComboBoxItem Content="Family" />
                        <ComboBoxItem Content="History" />
                        <ComboBoxItem Content="Horror" />
                        <ComboBoxItem Content="Romance" />
                        <ComboBoxItem Content="Sci-Fi" />
                        <ComboBoxItem Content="Thriller" />
                    </ComboBox>
                </StackPanel>

                <!--  Decade ComboBox  -->
                <StackPanel>
                    <TextBlock
                        Margin="0,0,0,5"
                        FontWeight="Bold"
                        Foreground="White"
                        Text="Decade" />
                    <ComboBox
                        Width="200"
                        Height="30"
                        Background="#FF3E3E3E"
                        Foreground="Black"
                        SelectedItem="{Binding SelectedDecade, Mode=TwoWay}">
                        <ComboBoxItem Content="All" />
                        <ComboBoxItem Content="2020s" />
                        <ComboBoxItem Content="2010s" />
                        <ComboBoxItem Content="2000s" />
                        <ComboBoxItem Content="1990s" />
                        <ComboBoxItem Content="1980s" />
                        <ComboBoxItem Content="1970s" />
                        <ComboBoxItem Content="1960s" />
                        <ComboBoxItem Content="1950s" />
                        <ComboBoxItem Content="1940s" />
                        <ComboBoxItem Content="1930s" />
                        <ComboBoxItem Content="1920s" />
                        <ComboBoxItem Content="1910s" />
                        <ComboBoxItem Content="1900s" />
                    </ComboBox>
                </StackPanel>

                <!--  Average Rating ComboBox  -->
                <StackPanel>
                    <TextBlock
                        Margin="0,0,0,5"
                        FontWeight="Bold"
                        Foreground="White"
                        Text="Average Rating" />
                    <ComboBox
                        Width="200"
                        Height="30"
                        Background="#FF3E3E3E"
                        Foreground="Black"
                        SelectedItem="{Binding SelectedRating, Mode=TwoWay}">
                        <ComboBoxItem Content="All" />
                        <ComboBoxItem Content="1-2" />
                        <ComboBoxItem Content="3-4" />
                        <ComboBoxItem Content="5-6" />
                        <ComboBoxItem Content="7-8" />
                        <ComboBoxItem Content="9-10" />
                    </ComboBox>
                </StackPanel>
                <Grid Margin="30,0,0,0" VerticalAlignment="Center">
                    <TextBox
                        x:Name="SearchTextBox"
                        Padding="25,5,5,5"
                        KeyDown="SearchTextBox_KeyDown"
                        Style="{StaticResource ModernTextboxForWatch}"
                        Text="{Binding SearchText, UpdateSourceTrigger=PropertyChanged}" />

                    <TextBlock
                        Margin="25,0,0,0"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Foreground="Gray"
                        IsHitTestVisible="False"
                        Text="Search...">
                        <TextBlock.Style>
                            <Style TargetType="{x:Type TextBlock}">
                                <Setter Property="Visibility" Value="Collapsed" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Text, ElementName=SearchTextBox}" Value="">
                                        <Setter Property="Visibility" Value="Visible" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Style>
                    </TextBlock>

                    <fa:FontAwesome
                        Width="12"
                        Height="12"
                        Margin="5,0,0,0"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Foreground="Gray"
                        Icon="Search" />
                </Grid>
            </StackPanel>

        </Border>

        <!--  Space between border and ListView  -->
        <Grid Grid.Row="1" />


        <!--  WatchList GridView  -->
        <Grid Grid.Row="2">
            <Border
                Margin="20"
                Padding="10"
                Background="#434C59"
                CornerRadius="10">
                <ScrollViewer>
                    <ListView
                        Background="#434C59"
                        BorderThickness="0"
                        ItemsSource="{Binding FilteredWatchList}"
                        ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel />
                            </ItemsPanelTemplate>
                        </ListView.ItemsPanel>
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <Border
                                    Width="140"
                                    Height="210"
                                    Margin="5"
                                    Background="#FF2E2E2E"
                                    CornerRadius="10">
                                    <Border.Style>
                                        <Style TargetType="Border">
                                            <Setter Property="BorderBrush" Value="Transparent" />
                                            <Setter Property="BorderThickness" Value="0" />
                                            <Style.Triggers>
                                                <Trigger Property="IsMouseOver" Value="True">
                                                    <Setter Property="BorderBrush" Value="Green" />
                                                    <Setter Property="BorderThickness" Value="3" />
                                                </Trigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Border.Style>
                                    <StackPanel>
                                        <Image
                                            Width="140"
                                            Height="190"
                                            Margin="0,0,0,5"
                                            Source="{Binding Poster}"
                                            Stretch="UniformToFill">
                                            <Image.Clip>
                                                <RectangleGeometry
                                                    RadiusX="10"
                                                    RadiusY="10"
                                                    Rect="0,0,140,190" />
                                            </Image.Clip>
                                        </Image>
                                        <TextBlock
                                            Margin="5,0,0,0"
                                            Padding="-5"
                                            VerticalAlignment="Center"
                                            FontSize="12"
                                            FontWeight="Bold"
                                            Foreground="White"
                                            Text="{Binding Title}"
                                            TextAlignment="Center"
                                            TextTrimming="CharacterEllipsis" />
                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </ScrollViewer>
            </Border>
        </Grid>
    </Grid>
</UserControl>
