<UserControl
    x:Class="Cerberus.MVVM.View.ShowsView"
    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: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:ShowsViewModel />
    </UserControl.DataContext>

    <Grid>
        <!--  Define Rows and Columns  -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <!--  Top section for Selected Show details  -->
        <StackPanel
            Grid.Row="0"
            Grid.Column="0"
            Margin="18,95,0,24"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Orientation="Vertical">
            <Border
                Width="200"
                Height="300"
                Background="White"
                CornerRadius="10">
                <Border.Clip>
                    <RectangleGeometry
                        RadiusX="10"
                        RadiusY="10"
                        Rect="0,0,200,300" />
                </Border.Clip>
                <Image Source="{Binding SelectedShow.Poster}" Stretch="UniformToFill" />
            </Border>

            <!--  TextBox for Selected Show Name  -->
            <TextBox
                Name="ShowNameTextBox"
                Width="200"
                Height="34"
                Padding="5"
                Margin="5"
                IsReadOnly="True"
                Style="{StaticResource TitleTextboxForMoviesView}"
                Text="{Binding SelectedShow.Title}" />

            <!--  TextBox for Selected Show Overview  -->
            <TextBox
                Name="ShowOverviewTextBox"
                Width="200"
                Height="200"
                Padding="5"
                Margin="5"
                AcceptsReturn="True"
                IsReadOnly="True"
                Style="{StaticResource SlideShowTextBoxForOverview}"
                Text="{Binding SelectedShow.Plot}"
                TextWrapping="Wrap" />
        </StackPanel>

        <!--  Center section for Search Shows  -->
        <StackPanel
            Grid.Row="0"
            Grid.Column="1"
            Margin="0,20,0,0"
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Orientation="Vertical">
            <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                <TextBox
                    x:Name="ShowSearchBox"
                    Width="450"
                    Padding="5"
                    Margin="5"
                    KeyDown="ShowSearchBox_KeyDown"
                    Style="{StaticResource ModernTextbox}"
                    Text="{Binding SearchQuery, UpdateSourceTrigger=PropertyChanged}" />
                <Button
                    Margin="5"
                    Command="{Binding SearchCommand}"
                    Content="Search"
                    Style="{StaticResource ModernButton}" />
            </StackPanel>

            <!--  ListBox for Search Results  -->
            <ListBox
                Width="500"
                Height="230"
                Margin="5"
                Background="#778899"
                ItemsSource="{Binding SearchResults}"
                SelectedItem="{Binding SelectedShow}"
                Visibility="{Binding ListBoxVisibility}">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListBoxItem">
                                    <Border
                                        Margin="5"
                                        Background="#778899"
                                        BorderBrush="#F0FFF0"
                                        BorderThickness="5"
                                        CornerRadius="5">
                                        <ContentPresenter />
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="5" Orientation="Horizontal">
                            <Image
                                Width="50"
                                Height="70"
                                Margin="5"
                                Source="{Binding Poster}"
                                Stretch="UniformToFill">
                                <Image.Clip>
                                    <RectangleGeometry
                                        RadiusX="5"
                                        RadiusY="5"
                                        Rect="0,0,50,70" />
                                </Image.Clip>
                            </Image>
                            <TextBlock
                                Margin="5"
                                VerticalAlignment="Center"
                                FontWeight="Bold"
                                Text="{Binding Title}" />
                            <TextBlock
                                Margin="5"
                                VerticalAlignment="Center"
                                FontWeight="Bold"
                                Text="{Binding Decade}"  HorizontalAlignment="Right"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>

        <StackPanel
            Grid.Row="0"
            Grid.Column="1"
            Width="51"
            Margin="10,100,0,298"
            HorizontalAlignment="Left">
            <!--  Databse Saving  -->
            <Button
                Width="45"
                Height="45"
                HorizontalAlignment="Center"
                Command="{Binding SaveToDatabaseCommand}"
                Content="Save"
                Style="{StaticResource CircleButtonStyles}"
                ToolTip="Add To Watchlist" />
            <Button
                Width="35"
                Height="35"
                Command="{Binding SaveToLikedTableCommand}"
                Style="{StaticResource HeartButtonStyle}"
                ToolTip="Like">
                <TextBlock
                    HorizontalAlignment="Left"
                    VerticalAlignment="Center"
                    FontSize="24"
                    Foreground="White"
                    Text="❤️" />
            </Button>

            <Button
                Width="35"
                Height="35"
                Margin="5"
                Command="{Binding ToggleInfoVisibilityCommand}"
                Style="{StaticResource EllipseButtonStyle}"
                ToolTip="Information">
                <fa:ImageAwesome
                    Width="24"
                    Height="24"
                    Foreground="White"
                    Icon="InfoCircle" />
            </Button>

        </StackPanel>

        <Border
            Grid.Row="0"
            Grid.Column="1"
            Width="auto"
            Height="250"
            Margin="10,10,10,30"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Bottom"
            Background="#F0FFF0"
            BorderBrush="#DDD"
            BorderThickness="1"
            CornerRadius="5"
            Visibility="{Binding InfoVisibility}">
            <ListBox
                Width="Auto"
                Height="Auto"
                VerticalAlignment="Bottom"
                ItemsSource="{Binding Episodes}">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListBoxItem">
                                    <Border
                                        Margin="5"
                                        Background="#778899"
                                        BorderBrush="#4CAF50"
                                        BorderThickness="5"
                                        CornerRadius="5">
                                        <ContentPresenter />
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <!--  Season and Episode with IMDb Rating  -->
                            <StackPanel
                                Grid.Row="0"
                                Margin="5"
                                Orientation="Vertical">
                                <TextBlock
                                    Margin="5"
                                    FontWeight="Bold"
                                    Text="{Binding Title}" />
                                <StackPanel Margin="5" Orientation="Horizontal">
                                    <TextBlock Margin="5" Text="{Binding Season, StringFormat='Season {0}  Episode '}" />
                                    <TextBlock
                                        Margin="5"
                                        FontWeight="Bold"
                                        Text="{Binding Number}" />
                                    <StackPanel Margin="5" Orientation="Horizontal">
                                        <fa:FontAwesome
                                            Margin="0"
                                            VerticalAlignment="Center"
                                            FontSize="15"
                                            Foreground="Yellow"
                                            Icon="Star" />
                                        <TextBlock
                                            Margin="5,0,0,0"
                                            VerticalAlignment="Center"
                                            Text="{Binding ImdbRating}" />
                                    </StackPanel>
                                </StackPanel>
                            </StackPanel>
                            <!--  Summary  -->
                            <TextBlock
                                Grid.Row="1"
                                Margin="5"
                                Text="{Binding Summary}"
                                TextWrapping="Wrap" />
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Border>


    </Grid>
</UserControl>
