<?xml version="1.0" encoding="utf-8" ?>
<local:HomePageBase
    x:Class="Bili.Workspace.Pages.HomePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:community="using:Bili.Models.Data.Community"
    xmlns:communityControls="using:Bili.Workspace.Controls.Community"
    xmlns:controls="using:Bili.Workspace.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:ext="using:Bili.Workspace.Resources.Extension"
    xmlns:local="using:Bili.Workspace.Pages"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:search="using:Bili.Models.Data.Search"
    xmlns:workspace="using:Bili.ViewModels.Interfaces.Workspace"
    xmlns:workspace1="using:Models.Workspace"
    mc:Ignorable="d">

    <Page.Resources>
        <DataTemplate x:Key="PinPartitionItemTemplate" x:DataType="workspace:IVideoPartitionViewModel">
            <controls:CardPanel
                Background="Transparent"
                Click="OnVideoPartitionClick"
                DataContext="{x:Bind}"
                PointerOverBackground="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                StrokeThickness="0">
                <Grid
                    Width="172"
                    Padding="12,8"
                    ColumnSpacing="8">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Image
                        Width="24"
                        Height="24"
                        VerticalAlignment="Center"
                        Source="{x:Bind Data.Image.Uri, Mode=OneWay}" />
                    <TextBlock
                        Grid.Column="1"
                        VerticalAlignment="Center"
                        Text="{x:Bind Data.Name, Mode=OneWay}" />
                    <Button
                        Grid.Column="2"
                        VerticalAlignment="Center"
                        Command="{x:Bind ToggleCommand}">
                        <Grid>
                            <controls:FluentIcon
                                FontSize="16"
                                Symbol="Pin"
                                Visibility="{x:Bind IsFixed, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}" />
                            <controls:FluentIcon
                                FontSize="16"
                                Symbol="PinOff"
                                Visibility="{x:Bind IsFixed, Mode=OneWay}" />
                        </Grid>
                    </Button>
                </Grid>
            </controls:CardPanel>
        </DataTemplate>
        <DataTemplate x:Key="QuickTopicItemTemplate" x:DataType="workspace1:QuickTopic">
            <controls:CardPanel
                Click="OnQuickTopicClickAsync"
                DataContext="{x:Bind}"
                ToolTipService.ToolTip="{x:Bind Title}">
                <Image
                    Width="28"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Source="{x:Bind Icon}" />
            </controls:CardPanel>
        </DataTemplate>
        <DataTemplate x:Key="HotSearchItemTemplate" x:DataType="search:SearchSuggest">
            <controls:CardPanel
                AutomationProperties.Name="{x:Bind DisplayText}"
                Height="44"
                HorizontalAlignment="Stretch"
                Background="Transparent"
                Click="OnHotSearchClick"
                DataContext="{x:Bind}"
                StrokeThickness="0">
                <Grid Margin="12,0" VerticalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="28" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <TextBlock
                        VerticalAlignment="Center"
                        FontSize="12"
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        Text="{x:Bind Position}" />
                    <Image
                        Grid.Column="1"
                        Width="16"
                        Margin="0,0,12,0"
                        VerticalAlignment="Center"
                        Source="{Binding Icon}"
                        Stretch="Uniform"
                        Visibility="{x:Bind Icon, Converter={StaticResource ObjectToVisibilityConverter}}" />
                    <TextBlock
                        Style="{StaticResource BodyTextBlockStyle}"
                        Grid.Column="2"
                        VerticalAlignment="Center"
                        MaxLines="1"
                        Text="{x:Bind DisplayText}"
                        TextLineBounds="Tight"
                        TextTrimming="CharacterEllipsis"
                        ToolTipService.ToolTip="{x:Bind Keyword}" />
                </Grid>
            </controls:CardPanel>
        </DataTemplate>
        <Flyout
            x:Name="PartitionFlyout"
            Placement="Bottom"
            ShouldConstrainToRootBounds="False">
            <Flyout.FlyoutPresenterStyle>
                <Style BasedOn="{StaticResource DefaultFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
                    <Setter Property="Padding" Value="12" />
                </Style>
            </Flyout.FlyoutPresenterStyle>
            <Grid>
                <ItemsRepeater ItemTemplate="{StaticResource PinPartitionItemTemplate}" ItemsSource="{x:Bind ViewModel.VideoPartitions}">
                    <ItemsRepeater.Layout>
                        <StackLayout Spacing="4" />
                    </ItemsRepeater.Layout>
                </ItemsRepeater>
            </Grid>
        </Flyout>
    </Page.Resources>

    <ScrollViewer Style="{StaticResource PageScrollViewerStyle}">
        <Grid Margin="{StaticResource PageMargin}" RowSpacing="16">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <!-- User -->
            <StackPanel Spacing="16">
                <communityControls:AccountPanel ViewModel="{x:Bind _accountViewModel}" />
                <communityControls:SearchSuggestBox ViewModel="{x:Bind _searchBoxViewModel}" />
            </StackPanel>


            <!-- Video partitions -->
            <Grid Grid.Row="1" RowSpacing="12">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <RelativePanel Padding="2,0">
                    <TextBlock
                        Style="{StaticResource BodyStrongTextBlockStyle}"
                        RelativePanel.AlignLeftWithPanel="True"
                        RelativePanel.AlignVerticalCenterWithPanel="True"
                        Text="{ext:Locale Name=Partition}" />
                    <Button
                        RelativePanel.AlignRightWithPanel="True"
                        RelativePanel.AlignVerticalCenterWithPanel="True"
                        Padding="8,4"
                        Flyout="{StaticResource PartitionFlyout}">
                        <StackPanel Orientation="Horizontal" Spacing="8">
                            <TextBlock
                                Style="{StaticResource CaptionTextBlockStyle}"
                                VerticalAlignment="Center"
                                Text="{ext:Locale Name=SeeAll}" />
                            <controls:FluentIcon
                                VerticalAlignment="Center"
                                FontSize="12"
                                Symbol="ChevronDown" />
                        </StackPanel>
                    </Button>
                </RelativePanel>

                <ProgressBar
                    Grid.Row="1"
                    HorizontalAlignment="Stretch"
                    IsIndeterminate="True"
                    Visibility="{x:Bind ViewModel.IsVideoPartitionLoading, Mode=OneWay}" />

                <ItemsRepeater
                    Grid.Row="1"
                    ItemsSource="{x:Bind ViewModel.FixedVideoPartitions}"
                    Visibility="{x:Bind ViewModel.IsVideoPartitionLoading, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
                    <ItemsRepeater.Layout>
                        <UniformGridLayout
                            ItemsStretch="Fill"
                            MinColumnSpacing="4"
                            MinItemHeight="112"
                            MinItemWidth="100"
                            MinRowSpacing="4"
                            Orientation="Horizontal" />
                    </ItemsRepeater.Layout>
                    <ItemsRepeater.ItemTemplate>
                        <DataTemplate x:DataType="community:Partition">
                            <communityControls:PartitionItem
                                Click="OnVideoPartitionClick"
                                DataContext="{x:Bind}"
                                ViewModel="{x:Bind}" />
                        </DataTemplate>
                    </ItemsRepeater.ItemTemplate>
                </ItemsRepeater>
            </Grid>

            <!-- Quick topics -->
            <StackPanel Grid.Row="2" Spacing="12">
                <TextBlock
                    Style="{StaticResource BodyStrongTextBlockStyle}"
                    Margin="2,0,0,0"
                    Text="{ext:Locale Name=Topic}" />
                <ItemsRepeater ItemTemplate="{StaticResource QuickTopicItemTemplate}" ItemsSource="{x:Bind ViewModel.Topics}">
                    <ItemsRepeater.Layout>
                        <UniformGridLayout
                            ItemsStretch="Fill"
                            MinColumnSpacing="4"
                            MinItemHeight="56"
                            MinItemWidth="56"
                            Orientation="Horizontal" />
                    </ItemsRepeater.Layout>
                </ItemsRepeater>
            </StackPanel>

            <!-- Hot search -->
            <StackPanel Grid.Row="3" Spacing="12">
                <TextBlock
                    Style="{StaticResource BodyStrongTextBlockStyle}"
                    Margin="2,0,0,0"
                    Text="{ext:Locale Name=HotSearch}" />
                <ItemsRepeater ItemTemplate="{StaticResource HotSearchItemTemplate}" ItemsSource="{x:Bind _searchBoxViewModel.HotSearchCollection}">
                    <ItemsRepeater.Layout>
                        <StackLayout Spacing="2" />
                    </ItemsRepeater.Layout>
                </ItemsRepeater>
            </StackPanel>
        </Grid>
    </ScrollViewer>
</local:HomePageBase>
