<base:UserSpacePageBase
    x:Class="Bili.App.Pages.Desktop.Overlay.UserSpacePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:base="using:Bili.App.Pages.Base"
    xmlns:behaviors="using:Bili.App.Behaviors"
    xmlns:controls="using:Bili.App.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:loc="using:Bili.App.Resources.Extension"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:video="using:Bili.ViewModels.Interfaces.Video"
    xmlns:videos="using:Bili.App.Controls.Videos"
    mc:Ignorable="d">

    <base:UserSpacePageBase.Resources>
        <DataTemplate x:Key="VideoItemTemplate" x:DataType="video:IVideoItemViewModel">
            <videos:VideoItem ViewModel="{x:Bind}" />
        </DataTemplate>
    </base:UserSpacePageBase.Resources>

    <Grid RowSpacing="12">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="LayoutGroup">
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource MediumWindowThresholdWidth}" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="NarrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="InteractionContainer.(Grid.Row)" Value="1" />
                        <Setter Target="InteractionContainer.(Grid.Column)" Value="0" />
                        <Setter Target="VideoView.ItemOrientation" Value="Horizontal" />
                        <Setter Target="SearchView.ItemOrientation" Value="Horizontal" />
                        <Setter Target="SearchBox.HorizontalAlignment" Value="Stretch" />
                        <Setter Target="SearchBox.Width" Value="Auto" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid
            Margin="0,12,0,0"
            Padding="{x:Bind CoreViewModel.PageHorizontalPadding, Converter={StaticResource HorizontalThicknessConverter}, Mode=OneWay}"
            RowSpacing="8">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal" Spacing="12">
                <controls:UserAvatar
                    Width="64"
                    Height="64"
                    VerticalAlignment="Center"
                    Avatar="{x:Bind ViewModel.UserViewModel.User.Avatar.Uri, Mode=OneWay}"
                    AvatarRadius="32"
                    DecodeSize="100"
                    IsEnabled="False"
                    UserName="{x:Bind ViewModel.UserViewModel.User.Name, Mode=OneWay}" />
                <StackPanel VerticalAlignment="Center" Spacing="4">
                    <StackPanel
                        Grid.Row="1"
                        Margin="0,12,0,0"
                        Orientation="Horizontal"
                        Spacing="8">
                        <TextBlock
                            Style="{StaticResource BodyTextBlockStyle}"
                            MaxWidth="300"
                            VerticalAlignment="Center"
                            FontWeight="Bold"
                            IsTextSelectionEnabled="True"
                            MaxLines="1"
                            Text="{x:Bind ViewModel.UserViewModel.User.Name, Mode=OneWay}"
                            TextLineBounds="Tight"
                            TextTrimming="CharacterEllipsis" />
                        <Image
                            Height="12"
                            VerticalAlignment="Center"
                            Source="{x:Bind ViewModel.UserViewModel.Level, Mode=OneWay, Converter={StaticResource UserLevelConverter}}" />
                    </StackPanel>
                    <TextBlock
                        Style="{StaticResource CaptionTextBlockStyle}"
                        MaxWidth="380"
                        HorizontalAlignment="Left"
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        MaxLines="3"
                        Text="{x:Bind ViewModel.UserViewModel.Introduce, Mode=OneWay}"
                        TextTrimming="CharacterEllipsis"
                        TextWrapping="Wrap" />
                    <Border
                        Padding="8,4"
                        HorizontalAlignment="Left"
                        Background="{ThemeResource LayerFillColorDefaultBrush}"
                        CornerRadius="{StaticResource ControlCornerRadius}">
                        <TextBlock Style="{StaticResource CaptionTextBlockStyle}" IsTextSelectionEnabled="True">
                            <Run Text="uid:" />
                            <Run Text="{x:Bind ViewModel.UserViewModel.User.Id, Mode=OneWay}" />
                        </TextBlock>
                    </Border>
                </StackPanel>
            </StackPanel>

            <Grid
                x:Name="InteractionContainer"
                Grid.Column="1"
                VerticalAlignment="Center"
                RowSpacing="8">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid Grid.ColumnSpan="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <controls:TwoLineButton FirstLineText="{x:Bind ViewModel.UserViewModel.FansCountText, Mode=OneWay}" SecondLineText="{loc:Locale Name=FansCount}" />
                    <controls:TwoLineButton
                        Grid.Column="1"
                        Command="{x:Bind ViewModel.GotoFollowsPageCommand}"
                        FirstLineText="{x:Bind ViewModel.UserViewModel.FollowCountText, Mode=OneWay}"
                        SecondLineText="{loc:Locale Name=FollowCount}" />
                    <StackPanel
                        Grid.Column="2"
                        Padding="0,4"
                        HorizontalAlignment="Stretch"
                        Spacing="2">
                        <TextBlock
                            Style="{StaticResource BodyTextBlockStyle}"
                            HorizontalAlignment="Center"
                            Text="{x:Bind ViewModel.UserViewModel.LikeCountText, Mode=OneWay}" />
                        <TextBlock
                            Style="{StaticResource CaptionTextBlockStyle}"
                            HorizontalAlignment="Center"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                            Text="{loc:Locale Name=BeLikeCount}" />
                    </StackPanel>
                </Grid>
                <Button
                    Style="{x:Bind ViewModel.UserViewModel.Relation, Mode=OneWay, Converter={StaticResource RelationButtonStyleConverter}}"
                    Grid.Row="1"
                    HorizontalAlignment="Stretch"
                    Command="{x:Bind ViewModel.UserViewModel.ToggleRelationCommand, Mode=OneWay}"
                    Content="{x:Bind ViewModel.UserViewModel.Relation, Mode=OneWay, Converter={StaticResource RelationTextConverter}}"
                    Visibility="{x:Bind ViewModel.IsMe, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}" />
                <Button
                    Grid.Row="1"
                    Grid.Column="1"
                    MinWidth="120"
                    Margin="8,0,0,0"
                    Command="{x:Bind ViewModel.FixedCommand, Mode=OneWay}"
                    Content="{x:Bind ViewModel.IsFixed, Mode=OneWay, Converter={StaticResource FixedContentConverter}}" />
            </Grid>
        </Grid>

        <AutoSuggestBox
            x:Name="SearchBox"
            Grid.Row="1"
            Width="300"
            Margin="{x:Bind CoreViewModel.PageHorizontalPadding, Converter={StaticResource HorizontalThicknessConverter}, Mode=OneWay}"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            PlaceholderText="{loc:Locale Name=SearchTipSlim}"
            QueryIcon="Find"
            QuerySubmitted="OnSearchBoxQuerySubmitted"
            Text="{x:Bind ViewModel.Keyword, Mode=TwoWay}" />

        <Grid Grid.Row="2">
            <ScrollViewer
                x:Name="SpaceVideoContainer"
                Padding="{x:Bind CoreViewModel.PageHorizontalPadding, Converter={StaticResource HorizontalThicknessConverter}, Mode=OneWay}"
                HorizontalScrollMode="Disabled"
                VerticalScrollBarVisibility="Auto"
                Visibility="{x:Bind ViewModel.IsSearchMode, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
                <controls:VerticalRepeaterView
                    x:Name="VideoView"
                    Margin="0,0,0,24"
                    Background="Transparent"
                    HeaderText="{loc:Locale Name=Videos}"
                    IsTabStop="False"
                    ItemTemplate="{StaticResource VideoItemTemplate}"
                    ItemsSource="{x:Bind ViewModel.Items}">
                    <interactivity:Interaction.Behaviors>
                        <behaviors:IncrementalBehavior />
                    </interactivity:Interaction.Behaviors>
                </controls:VerticalRepeaterView>
            </ScrollViewer>

            <ScrollViewer
                x:Name="SearchScrollViewer"
                Padding="{x:Bind CoreViewModel.PageHorizontalPadding, Converter={StaticResource HorizontalThicknessConverter}, Mode=OneWay}"
                HorizontalScrollMode="Disabled"
                VerticalScrollBarVisibility="Hidden"
                Visibility="{x:Bind ViewModel.IsSearchMode, Mode=OneWay}">
                <controls:VerticalRepeaterView
                    x:Name="SearchView"
                    Margin="0,0,0,24"
                    Background="Transparent"
                    HeaderVisibility="Collapsed"
                    ItemTemplate="{StaticResource VideoItemTemplate}"
                    ItemsSource="{x:Bind ViewModel.SearchVideos}">
                    <interactivity:Interaction.Behaviors>
                        <behaviors:IncrementalBehavior />
                    </interactivity:Interaction.Behaviors>
                </controls:VerticalRepeaterView>
            </ScrollViewer>

            <controls:OverlayLoadingPanel
                IsBarActive="{x:Bind ViewModel.IsIncrementalLoading, Mode=OneWay}"
                IsRingActive="{x:Bind ViewModel.IsReloading, Mode=OneWay}"
                Visibility="{x:Bind ViewModel.IsSearchMode, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}" />

            <controls:OverlayLoadingPanel
                IsBarActive="{x:Bind ViewModel.IsIncrementalLoading, Mode=OneWay}"
                IsRingActive="{x:Bind ViewModel.IsSearching, Mode=OneWay}"
                Visibility="{x:Bind ViewModel.IsSearchMode, Mode=OneWay}" />

            <Grid VerticalAlignment="Center">
                <StackPanel Visibility="{x:Bind ViewModel.IsSearchMode, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
                    <controls:ErrorPanel Text="{loc:Locale Name=UserHaveNoVideos}" Visibility="{x:Bind ViewModel.IsSpaceVideoEmpty, Mode=OneWay}" />
                </StackPanel>
                <StackPanel Visibility="{x:Bind ViewModel.IsSearchMode, Mode=OneWay}">
                    <controls:ErrorPanel Text="{loc:Locale Name=NoUserVideoSearchResult}" Visibility="{x:Bind ViewModel.IsSearchVideoEmpty, Mode=OneWay}" />
                </StackPanel>
            </Grid>
        </Grid>
    </Grid>
</base:UserSpacePageBase>
