<?xml version="1.0" encoding="utf-8" ?>
<UserControl
    x:Class="Microsoft.CmdPal.UI.Dock.DockControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:converters="using:CommunityToolkit.WinUI.Converters"
    xmlns:coreVm="using:Microsoft.CmdPal.Core.ViewModels"
    xmlns:cpcontrols="using:Microsoft.CmdPal.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:dockVm="using:Microsoft.CmdPal.UI.ViewModels.Dock"
    xmlns:help="using:Microsoft.CmdPal.UI.Helpers"
    xmlns:local="using:Microsoft.CmdPal.UI.Dock"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="using:CommunityToolkit.WinUI"
    xmlns:vm="using:Microsoft.CmdPal.UI.ViewModels"
    mc:Ignorable="d">

    <UserControl.Resources>
        <ResourceDictionary>
            <StackLayout x:Key="ItemsOrientationLayout" Orientation="{x:Bind ItemsOrientation, Mode=OneWay}" />
            <ItemsPanelTemplate x:Key="HorizontalItemsPanel">
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
            <ItemsPanelTemplate x:Key="VerticalItemsPanel">
                <StackPanel Orientation="Vertical" Spacing="4" />
            </ItemsPanelTemplate>

            <DataTemplate x:Key="DockBandTemplate" x:DataType="dockVm:DockBandViewModel">
                <ItemsRepeater
                    ItemsSource="{x:Bind Items, Mode=OneWay}"
                    Layout="{StaticResource ItemsOrientationLayout}"
                    TabFocusNavigation="Local">
                    <ItemsRepeater.Transitions>
                        <TransitionCollection />
                    </ItemsRepeater.Transitions>
                    <ItemsRepeater.ItemTemplate>
                        <DataTemplate x:DataType="dockVm:DockItemViewModel">
                            <local:DockItemControl
                                Title="{x:Bind Title, Mode=OneWay}"
                                RightTapped="BandItem_RightTapped"
                                Subtitle="{x:Bind Subtitle, Mode=OneWay}"
                                Tag="{x:Bind}"
                                Tapped="BandItem_Tapped"
                                ToolTip="{x:Bind Tooltip, Mode=OneWay}">
                                <local:DockItemControl.Icon>
                                    <cpcontrols:IconBox
                                        x:Name="IconBorder"
                                        Width="16"
                                        VerticalAlignment="Center"
                                        AutomationProperties.AccessibilityView="Raw"
                                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                        SourceKey="{x:Bind Icon, Mode=OneWay}"
                                        SourceRequested="{x:Bind help:IconProvider.SourceRequested16}" />
                                </local:DockItemControl.Icon>
                            </local:DockItemControl>
                        </DataTemplate>
                    </ItemsRepeater.ItemTemplate>
                </ItemsRepeater>
            </DataTemplate>

            <Style x:Key="DockBandListViewStyle" TargetType="ListView">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Padding" Value="0" />
                <Setter Property="IsItemClickEnabled" Value="False" />
                <Setter Property="SelectionMode" Value="None" />
                <Setter Property="IsTabStop" Value="False" />
                <!--  Drag properties controlled by code-behind based on IsEditMode  -->
                <Setter Property="CanDragItems" Value="False" />
                <Setter Property="CanReorderItems" Value="False" />
                <Setter Property="AllowDrop" Value="False" />
                <Setter Property="TabFocusNavigation" Value="Local" />
            </Style>

            <Style x:Key="DockBandListViewItemStyle" TargetType="ListViewItem">
                <Setter Property="Padding" Value="0" />
                <Setter Property="Margin" Value="0" />
                <Setter Property="MinHeight" Value="0" />
                <Setter Property="MinWidth" Value="0" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="VerticalContentAlignment" Value="Stretch" />
                <Setter Property="IsTabStop" Value="False" />
            </Style>

            <Style
                x:Name="ContextMenuFlyoutStyle"
                BasedOn="{StaticResource DefaultFlyoutPresenterStyle}"
                TargetType="FlyoutPresenter">
                <Style.Setters>
                    <Setter Property="Margin" Value="0" />
                    <Setter Property="Padding" Value="0" />
                    <Setter Property="Background" Value="{ThemeResource DesktopAcrylicTransparentBrush}" />
                    <Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
                </Style.Setters>
            </Style>

            <!--  Backdrop requires ShouldConstrainToRootBounds="False"  -->
            <Flyout
                x:Name="ContextMenuFlyout"
                FlyoutPresenterStyle="{StaticResource ContextMenuFlyoutStyle}"
                Opened="ContextMenuFlyout_Opened"
                ShouldConstrainToRootBounds="False"
                SystemBackdrop="{ThemeResource AcrylicBackgroundFillColorDefaultBackdrop}">
                <cpcontrols:ContextMenu x:Name="ContextControl" SubscribeToCommandBar="False" />
            </Flyout>

            <!--  Edit mode context menu for dock bands  -->
            <MenuFlyout x:Name="EditModeContextMenu" ShouldConstrainToRootBounds="False">
                <MenuFlyoutSubItem x:Name="LabelsSubMenu" x:Uid="Dock_EditMode_Labels">
                    <MenuFlyoutSubItem.Icon>
                        <FontIcon Glyph="&#xE8EC;" />
                    </MenuFlyoutSubItem.Icon>
                    <ToggleMenuFlyoutItem
                        x:Name="ShowTitlesMenuItem"
                        x:Uid="Dock_EditMode_ShowTitles"
                        Click="ShowTitlesMenuItem_Click" />
                    <ToggleMenuFlyoutItem
                        x:Name="ShowSubtitlesMenuItem"
                        x:Uid="Dock_EditMode_ShowSubtitles"
                        Click="ShowSubtitlesMenuItem_Click" />
                </MenuFlyoutSubItem>
                <MenuFlyoutSeparator />
                <MenuFlyoutItem
                    x:Name="UnpinBandMenuItem"
                    x:Uid="Dock_EditMode_Unpin"
                    Click="UnpinBandMenuItem_Click">
                    <MenuFlyoutItem.Icon>
                        <FontIcon Glyph="&#xE77A;" />
                    </MenuFlyoutItem.Icon>
                </MenuFlyoutItem>
            </MenuFlyout>

            <!--  Add band flyout - used in edit mode to add bands to dock sections  -->
            <Flyout
                x:Name="AddBandFlyout"
                Placement="Bottom"
                ShouldConstrainToRootBounds="False">
                <StackPanel Width="320">
                    <TextBlock
                        x:Uid="Dock_Bands_Header"
                        Margin="8,8,8,12"
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                    <TextBlock
                        x:Name="NoAvailableBandsText"
                        x:Uid="Dock_AddBand_NoCommandsAvailable"
                        Margin="8,0,0,0"
                        Visibility="Collapsed" />
                    <ListView
                        x:Name="AddBandListView"
                        MaxHeight="300"
                        Margin="-12,0,-12,0"
                        HorizontalAlignment="Stretch"
                        IsItemClickEnabled="True"
                        ItemClick="AddBandListView_ItemClick"
                        SelectionMode="None">
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="vm:TopLevelViewModel">
                                <Grid Padding="4" ColumnSpacing="8">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <cpcontrols:IconBox
                                        Width="20"
                                        Height="20"
                                        VerticalAlignment="Center"
                                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                        SourceKey="{x:Bind IconViewModel, Mode=OneWay}"
                                        SourceRequested="{x:Bind help:IconProvider.SourceRequested20}" />
                                    <TextBlock
                                        Grid.Column="1"
                                        VerticalAlignment="Center"
                                        Text="{x:Bind Title, Mode=OneWay}"
                                        TextTrimming="CharacterEllipsis" />
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                    <Rectangle
                        Height="1"
                        Margin="-16,24,-16,0"
                        HorizontalAlignment="Stretch"
                        Fill="{ThemeResource DividerStrokeColorDefaultBrush}" />
                    <Grid Margin="8,24,0,0" ColumnSpacing="8">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <FontIcon
                            Margin="0,4,0,0"
                            VerticalAlignment="Top"
                            AutomationProperties.AccessibilityView="Raw"
                            FontSize="11"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                            Glyph="&#xE946;" />
                        <TextBlock
                            x:Uid="Dock_Pin_Instruction"
                            Grid.Column="1"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                            Style="{ThemeResource CaptionTextBlockStyle}"
                            TextWrapping="Wrap" />
                    </Grid>
                </StackPanel>
            </Flyout>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid
        x:Name="RootGrid"
        Background="Transparent"
        BorderBrush="{ThemeResource SurfaceStrokeColorDefaultBrush}"
        BorderThickness="0,0,0,1"
        RightTapped="RootGrid_RightTapped">
        <!--  Dock content with Start / Center / End sections  -->
        <local:DockContentControl
            x:Name="ContentGrid"
            IsEditMode="{x:Bind IsEditMode, Mode=OneWay}"
            RightTapped="RootGrid_RightTapped">
            <local:DockContentControl.StartSource>
                <ListView
                    x:Name="StartListView"
                    MinWidth="48"
                    HorizontalAlignment="Stretch"
                    DragEnter="BandListView_DragEnter"
                    DragItemsCompleted="BandListView_DragItemsCompleted"
                    DragItemsStarting="BandListView_DragItemsStarting"
                    DragLeave="BandListView_DragLeave"
                    DragOver="BandListView_DragOver"
                    Drop="StartListView_Drop"
                    ItemContainerStyle="{StaticResource DockBandListViewItemStyle}"
                    ItemTemplate="{StaticResource DockBandTemplate}"
                    ItemsPanel="{StaticResource HorizontalItemsPanel}"
                    ItemsSource="{x:Bind ViewModel.StartItems, Mode=OneWay}"
                    SelectionMode="None"
                    Style="{StaticResource DockBandListViewStyle}" />
            </local:DockContentControl.StartSource>
            <local:DockContentControl.StartActionButton>
                <Button
                    x:Name="StartAddButton"
                    x:Uid="Dock_AddBand_StartTooltip"
                    MinHeight="30"
                    Click="AddBandButton_Click"
                    Style="{StaticResource SubtleButtonStyle}"
                    Tag="Start">
                    <FontIcon FontSize="12" Glyph="&#xE710;" />
                </Button>
            </local:DockContentControl.StartActionButton>
            <local:DockContentControl.CenterSource>
                <ListView
                    x:Name="CenterListView"
                    MinWidth="48"
                    HorizontalAlignment="Stretch"
                    DragEnter="BandListView_DragEnter"
                    DragItemsCompleted="BandListView_DragItemsCompleted"
                    DragItemsStarting="BandListView_DragItemsStarting"
                    DragLeave="BandListView_DragLeave"
                    DragOver="BandListView_DragOver"
                    Drop="CenterListView_Drop"
                    ItemContainerStyle="{StaticResource DockBandListViewItemStyle}"
                    ItemTemplate="{StaticResource DockBandTemplate}"
                    ItemsPanel="{StaticResource HorizontalItemsPanel}"
                    ItemsSource="{x:Bind ViewModel.CenterItems, Mode=OneWay}"
                    SelectionMode="None"
                    Style="{StaticResource DockBandListViewStyle}" />
            </local:DockContentControl.CenterSource>
            <local:DockContentControl.CenterActionButton>
                <Button
                    x:Name="CenterAddButton"
                    x:Uid="Dock_AddBand_CenterTooltip"
                    MinHeight="30"
                    Click="AddBandButton_Click"
                    Style="{StaticResource SubtleButtonStyle}"
                    Tag="Center">
                    <FontIcon FontSize="12" Glyph="&#xE710;" />
                </Button>
            </local:DockContentControl.CenterActionButton>

            <local:DockContentControl.EndSource>
                <ListView
                    x:Name="EndListView"
                    MinWidth="48"
                    MinHeight="0"
                    HorizontalContentAlignment="Stretch"
                    DragEnter="BandListView_DragEnter"
                    DragItemsCompleted="BandListView_DragItemsCompleted"
                    DragItemsStarting="BandListView_DragItemsStarting"
                    DragLeave="BandListView_DragLeave"
                    DragOver="BandListView_DragOver"
                    Drop="EndListView_Drop"
                    ItemContainerStyle="{StaticResource DockBandListViewItemStyle}"
                    ItemTemplate="{StaticResource DockBandTemplate}"
                    ItemsPanel="{StaticResource HorizontalItemsPanel}"
                    ItemsSource="{x:Bind ViewModel.EndItems, Mode=OneWay}"
                    SelectionMode="None"
                    Style="{StaticResource DockBandListViewStyle}">
                    <ListView.ItemContainerTransitions>
                        <TransitionCollection />
                    </ListView.ItemContainerTransitions>
                </ListView>
            </local:DockContentControl.EndSource>
            <local:DockContentControl.EndActionButton>
                <Button
                    x:Name="EndAddButton"
                    x:Uid="Dock_AddBand_EndTooltip"
                    MinHeight="30"
                    Click="AddBandButton_Click"
                    Style="{StaticResource SubtleButtonStyle}"
                    Tag="End">
                    <FontIcon FontSize="12" Glyph="&#xE710;" />
                </Button>
            </local:DockContentControl.EndActionButton>
        </local:DockContentControl>
        <TeachingTip
            x:Name="EditButtonsTeachingTip"
            MinWidth="0"
            PreferredPlacement="Bottom"
            ShouldConstrainToRootBounds="False"
            Style="{StaticResource TeachingTipWithoutCloseButtonStyle}"
            Target="{x:Bind ContentGrid}">
            <TeachingTip.Content>
                <StackPanel
                    x:Name="EditButtonsPanel"
                    HorizontalAlignment="Stretch"
                    Orientation="Vertical"
                    Spacing="4">
                    <Button
                        x:Uid="Dock_EditMode_Save"
                        HorizontalAlignment="Stretch"
                        Click="DoneEditingButton_Click"
                        Style="{StaticResource AccentButtonStyle}" />
                    <Button
                        x:Uid="Dock_EditMode_Discard"
                        HorizontalAlignment="Stretch"
                        Click="DiscardEditingButton_Click" />
                </StackPanel>
            </TeachingTip.Content>
        </TeachingTip>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="DockOrientation">
                <VisualState x:Name="DockOnTop">
                    <VisualState.StateTriggers>
                        <ui:IsEqualStateTrigger Value="{x:Bind DockSide, Mode=OneWay}" To="Top" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ContentGrid.Margin" Value="4,0,4,0" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="DockOnBottom">
                    <VisualState.StateTriggers>
                        <ui:IsEqualStateTrigger Value="{x:Bind DockSide, Mode=OneWay}" To="Bottom" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ContentGrid.Margin" Value="4,4,4,0" />
                        <Setter Target="RootGrid.BorderThickness" Value="0,1,0,0" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="DockOnLeft">
                    <VisualState.StateTriggers>
                        <ui:IsEqualStateTrigger Value="{x:Bind DockSide, Mode=OneWay}" To="Left" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ContentGrid.Orientation" Value="Vertical" />
                        <Setter Target="ContentGrid.Margin" Value="0,0,4,4" />
                        <Setter Target="ContentGrid.Padding" Value="0,0,4,8" />
                        <Setter Target="RootGrid.BorderThickness" Value="0,0,1,0" />
                        <Setter Target="StartListView.MinHeight" Value="48" />
                        <Setter Target="CenterListView.MinHeight" Value="48" />
                        <Setter Target="EndListView.MinHeight" Value="48" />
                        <Setter Target="StartListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
                        <Setter Target="CenterListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
                        <Setter Target="EndListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="DockOnRight">
                    <VisualState.StateTriggers>
                        <ui:IsEqualStateTrigger Value="{x:Bind DockSide, Mode=OneWay}" To="Right" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ContentGrid.Orientation" Value="Vertical" />
                        <Setter Target="ContentGrid.Margin" Value="4,0,0,4" />
                        <Setter Target="ContentGrid.Padding" Value="4,0,0,8" />
                        <Setter Target="RootGrid.BorderThickness" Value="1,0,0,0" />
                        <Setter Target="StartListView.MinHeight" Value="48" />
                        <Setter Target="CenterListView.MinHeight" Value="48" />
                        <Setter Target="EndListView.MinHeight" Value="48" />
                        <Setter Target="StartListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
                        <Setter Target="CenterListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
                        <Setter Target="EndListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>

            <!--
                Compact overrides: zeroes margins/borders set by DockOrientation.
                Declared after DockOrientation so its setters win when both groups
                target the same property.
            -->
            <VisualStateGroup x:Name="DockSizeStates">
                <VisualState x:Name="DefaultSize" />
                <VisualState x:Name="CompactSize">
                    <VisualState.StateTriggers>
                        <ui:IsEqualStateTrigger Value="{x:Bind DockSize, Mode=OneWay}" To="Compact" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ContentGrid.Margin" Value="0" />
                        <Setter Target="ContentGrid.Padding" Value="0" />
                        <Setter Target="RootGrid.BorderThickness" Value="0" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</UserControl>