<UserControl
    x:Class="Cerberus.MVVM.View.MoviesView"
    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.ViewModel"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="675"
    d:DesignWidth="1100"
    mc:Ignorable="d">

    <UserControl.DataContext>
        <local:MoviesViewModel />
    </UserControl.DataContext>

    <Grid>
        <StackPanel
            Margin="0,20,0,0"
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Orientation="Vertical">

            <!--  Search Panel  -->
            <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                <TextBox
                    x:Name="MovieSearchBox"
                    Width="450"
                    Margin="5"
                    Padding="5"
                    KeyDown="MoviesSearchBox_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="220"
                Margin="5"
                Background="#778899"
                ItemsSource="{Binding SearchResults}"
                SelectedItem="{Binding SelectedMovie}"
                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}" />
                            <StackPanel
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center"
                                Orientation="Horizontal">
                                <fa:ImageAwesome
                                    Width="20"
                                    Height="20"
                                    Margin="5"
                                    HorizontalAlignment="Right"
                                    Foreground="Gold"
                                    Icon="Imdb" />
                                <TextBlock
                                    Width="20"
                                    Height="20"
                                    FontWeight="Bold"
                                    Foreground="Black"
                                    Text="{Binding ImdbRating}" />
                            </StackPanel>
                            <TextBlock
                                Width="30"
                                Height="20"
                                Margin="20,10,10,10"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center"
                                FontWeight="Bold"
                                Text="{Binding ReleaseYear}" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>

        <!--  Main Layout Grid  -->
        <Grid
            Width="1087"
            Height="480"
            Margin="0,185,0,0"
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Visibility="{Binding MainGridVisibility}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <!--  Movie Poster with Border  -->
            <Border
                Grid.Column="0"
                Width="200"
                Height="300"
                Margin="20,10,10,10"
                VerticalAlignment="Top"
                BorderBrush="Violet"
                BorderThickness="5">
                <Border.Clip>
                    <RectangleGeometry
                        RadiusX="5"
                        RadiusY="5"
                        Rect="0,0,200,300" />
                </Border.Clip>

                <Image
                    Width="200"
                    Height="300"
                    Source="{Binding SelectedMovie.Poster}"
                    Stretch="UniformToFill" />

            </Border>



            <!--  Movie Title  -->
            <TextBox
                Grid.Column="0"
                Width="Auto"
                Margin="20,330,10,0"
                VerticalAlignment="Top"
                HorizontalContentAlignment="Center"
                VerticalContentAlignment="Center"
                FontSize="18"
                IsReadOnly="True"
                Style="{StaticResource TitleTextboxForMoviesView}"
                Text="{Binding SelectedMovie.Title}" />
            <StackPanel
                Grid.Column="1"
                Width="49"
                Height="45"
                Margin="20,35,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top">
                <!--  For CRUD operation buttons  -->
                <Button
                    Width="35"
                    Height="35"
                    Margin="5"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Center"
                    Command="{Binding SaveToLikedTableCommand}"
                    Style="{StaticResource HeartButtonStyle}"
                    ToolTip="Like">
                    <TextBlock
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        FontSize="24"
                        Foreground="White"
                        Text="❤️" />
                </Button>
            </StackPanel>
            <StackPanel
                Grid.Column="1"
                Width="50"
                Height="50"
                Margin="70,35,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="top">
                <Button
                    Width="35"
                    Height="35"
                    Margin="5"
                    Command="{Binding SaveToDatabaseCommand}"
                    Style="{StaticResource CircleButtonStylesForMovie}"
                    ToolTip="Add movie to watchlist" />
            </StackPanel>

            <!--  Movie Details  -->
            <StackPanel
                Grid.Column="1"
                Margin="20,-25,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Center">
                <StackPanel
                    Margin="10,0,0,0"
                    VerticalAlignment="Center"
                    Orientation="Horizontal">
                    <fa:ImageAwesome
                        Width="30"
                        Height="30"
                        Margin="0,0,5,0"
                        Foreground="Gold"
                        Icon="Imdb" />
                    <TextBlock
                        Width="30"
                        Height="30"
                        Padding="5"
                        Background="Transparent"
                        FontSize="16"
                        Foreground="#CFCFCF"
                        Text="{Binding SelectedMovie.ImdbRating}" />

                    <StackPanel
                        Width="325"
                        Height="35"
                        Margin="10,0,0,0"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Center"
                        Background="Transparent"
                        Orientation="Horizontal">
                        <fa:ImageAwesome
                            Width="30"
                            Height="30"
                            VerticalAlignment="Center"
                            Foreground="#CFCFCF"
                            Icon="ClockOutline" />
                        <TextBlock
                            Width="70"
                            Height="30"
                            Padding="5"
                            FontSize="16"
                            Foreground="#CFCFCF"
                            Text="{Binding SelectedMovie.Runtime}" />

                        <fa:FontAwesome
                            Width="30"
                            Height="30"
                            Margin="5,0,0,0"
                            VerticalAlignment="Center"
                            FontSize="30"
                            Foreground="#CFCFCF"
                            Icon="Globe" />
                        <TextBlock
                            Width="189"
                            Height="30"
                            Padding="5"
                            VerticalAlignment="Center"
                            FontSize="16"
                            Foreground="#CFCFCF"
                            Text="{Binding SelectedMovie.Language}" />
                    </StackPanel>


                </StackPanel>
                <TextBox
                    Margin="10"
                    Padding="10"
                    VerticalContentAlignment="Center"
                    IsReadOnly="True"
                    Style="{StaticResource GenreTextBox}"
                    Text="{Binding SelectedMovie.Director}" />
                <TextBox
                    Margin="0,0,0,10"
                    Padding="10"
                    FontSize="16"
                    IsReadOnly="True"
                    Style="{StaticResource GenreTextBox}"
                    Text="{Binding SelectedMovie.Genre}" />
                <TextBox
                    Width="Auto"
                    Height="Auto"
                    Padding="10"
                    FontSize="14"
                    IsReadOnly="True"
                    Style="{StaticResource SlideShowTextBox}"
                    Text="{Binding SelectedMovie.Plot}"
                    TextWrapping="Wrap" />

            </StackPanel>
        </Grid>
    </Grid>
</UserControl>
