<?xml version="1.0" encoding="utf-8" ?>
<local:LivePlayerPageBase
    x:Class="BiliCopilot.UI.Pages.Overlay.LivePlayerPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:animations="using:CommunityToolkit.WinUI.Animations"
    xmlns:base="using:Richasy.WinUIKernel.Share.Base"
    xmlns:components="using:BiliCopilot.UI.Controls.Components"
    xmlns:core="using:BiliCopilot.UI.Controls.Core"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:danmaku="using:BiliCopilot.UI.Controls.Danmaku"
    xmlns:ext="using:BiliCopilot.UI.Extensions"
    xmlns:local="using:BiliCopilot.UI.Pages.Overlay"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:player="using:BiliCopilot.UI.Controls.Player"
    mc:Ignorable="d">

    <Grid>
        <components:ShimmerLayout
            IsActive="{x:Bind ViewModel.IsPageLoading, Mode=OneWay}"
            Style="{StaticResource PlayerShimmerStyle}"
            Visibility="{x:Bind ViewModel.IsPageLoading, Mode=OneWay}">
            <animations:Implicit.HideAnimations>
                <animations:OpacityAnimation
                    From="1"
                    To="0"
                    Duration="0:0:0.26" />
            </animations:Implicit.HideAnimations>
        </components:ShimmerLayout>
        <Grid Visibility="{x:Bind ViewModel.IsPageLoadFailed, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
            <Grid Visibility="{x:Bind ViewModel.IsPageLoading, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
                <Grid.RowDefinitions>
                    <RowDefinition x:Name="HeaderRow" Height="56" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="{x:Bind ViewModel.NavColumnWidth, Mode=OneWay, Converter={StaticResource GridLengthConverter}}" />
                </Grid.ColumnDefinitions>
                <Grid.ChildrenTransitions>
                    <RepositionThemeTransition IsStaggeringEnabled="False" />
                </Grid.ChildrenTransitions>

                <Border
                    x:Name="HeaderDivider"
                    Grid.Row="1"
                    Grid.ColumnSpan="3"
                    Height="1"
                    HorizontalAlignment="Stretch"
                    Background="{ThemeResource DividerStrokeColorDefaultBrush}" />

                <player:LivePlayerMainHeader x:Name="MainHeader" ViewModel="{x:Bind ViewModel, Mode=OneWay}" />

                <Grid
                    x:Name="VerticalHolderContainer"
                    Grid.Row="2"
                    Grid.Column="1" />

                <Grid
                    x:Name="VideoContainer"
                    Grid.Row="2"
                    Margin="0,0,-6,0">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid
                        x:Name="PlayerContainer"
                        MinHeight="200"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch">
                        <core:BiliPlayer x:Name="BiliPlayer" ViewModel="{x:Bind ViewModel.Player, Mode=OneWay}" />
                    </Grid>
                    <core:ExternalTransportControl
                        Grid.Row="1"
                        Margin="0,12,0,0"
                        ViewModel="{x:Bind ViewModel.Player, Mode=OneWay}"
                        Visibility="{x:Bind ViewModel.Player.IsExternalPlayer, Mode=OneWay}">
                        <core:ExternalTransportControl.LeftContent>
                            <!--  直播计时  -->
                            <StackPanel
                                Margin="8,0,0,0"
                                Orientation="Horizontal"
                                Spacing="8">
                                <Ellipse
                                    Width="8"
                                    Height="8"
                                    VerticalAlignment="Center"
                                    Fill="{ThemeResource SystemFillColorCriticalBrush}" />
                                <TextBlock
                                    VerticalAlignment="Center"
                                    Style="{StaticResource CaptionTextBlockStyle}"
                                    Text="{x:Bind ViewModel.Duration, Mode=OneWay, Converter={StaticResource DurationConverter}}"
                                    TextLineBounds="Tight" />
                            </StackPanel>
                        </core:ExternalTransportControl.LeftContent>
                        <core:ExternalTransportControl.RightContent>
                            <player:LivePlayerFormatButton ViewModel="{x:Bind ViewModel, Mode=OneWay}" />
                        </core:ExternalTransportControl.RightContent>
                    </core:ExternalTransportControl>
                </Grid>

                <Grid
                    x:Name="SideHeader"
                    Grid.Column="2"
                    Margin="-6,0,0,0"
                    Visibility="{x:Bind ViewModel.IsNavColumnManualHide, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
                    <TextBlock
                        Margin="16,0"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Style="{StaticResource BodyStrongTextBlockStyle}"
                        Text="{ext:Locale Name=Danmaku}" />
                </Grid>

                <Grid
                    x:Name="SideBody"
                    Grid.Row="2"
                    Grid.Column="2"
                    Margin="-6,0,0,0"
                    Visibility="{x:Bind ViewModel.IsNavColumnManualHide, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
                    <player:LiveChatSection ViewModel="{x:Bind ViewModel.Chat, Mode=OneWay}" />
                </Grid>

                <!--  右侧分栏大小控制器  -->
                <base:ColumnSplitter
                    x:Name="SideSplitter"
                    Grid.RowSpan="3"
                    Grid.Column="1"
                    ColumnWidth="{x:Bind ViewModel.NavColumnWidth, Mode=TwoWay}"
                    HideTip="{ext:Locale Name=Show}"
                    IsHide="{x:Bind ViewModel.IsNavColumnManualHide, Mode=OneWay}"
                    IsHideButtonEnabled="False"
                    IsInvertDirection="True"
                    MaxColumnWidth="500"
                    MinColumnWidth="300"
                    ShowTip="{ext:Locale Name=Hide}" />
            </Grid>
        </Grid>

        <base:EmptyHolder
            Description="{ext:Locale Name=RequestLiveFailed}"
            Emoji="&#x1F635;"
            Visibility="{x:Bind ViewModel.IsPageLoadFailed, Mode=OneWay}" />
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="DefaultState" />
                <VisualState x:Name="PlayerHostState">
                    <VisualState.Setters>
                        <Setter Target="HeaderRow.Height" Value="Auto" />
                        <Setter Target="HeaderDivider.Visibility" Value="Collapsed" />
                        <Setter Target="MainHeader.Visibility" Value="Collapsed" />
                        <Setter Target="SideSplitter.Visibility" Value="Collapsed" />
                        <Setter Target="SideHeader.Visibility" Value="Collapsed" />
                        <Setter Target="SideBody.Visibility" Value="Collapsed" />
                        <Setter Target="VideoContainer.(Grid.ColumnSpan)" Value="3" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</local:LivePlayerPageBase>
