<UserControl x:Class="ModernFlyouts.Controls.DisplayMonitorPicker"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:ModernFlyouts.Controls"
             xmlns:ui="http://schemas.modernwpf.com/2019"
             xmlns:display="clr-namespace:ModernFlyouts.Core.Display;assembly=ModernFlyouts.Core"
             xmlns:converters="clr-namespace:ModernFlyouts.Converters"
             mc:Ignorable="d"
             d:DesignWidth="800" x:Name="_this" x:FieldModifier="private"
             MinHeight="200">
    <UserControl.Resources>
        <converters:DisplayMonitorPositionConverter x:Key="DisplayMonitorPositionConverter" />
        <converters:DisplayMonitorIsCheckedConverter x:Key="DisplayMonitorIsCheckedConverter" />
    </UserControl.Resources>
    <Grid>
        <Border Background="{DynamicResource SystemControlBackgroundBaseLowBrush}"
                Opacity="0.8" CornerRadius="8" />
        <ItemsControl Margin="20"
                      ItemsSource="{Binding Source={x:Static display:DisplayManager.Instance}, Path=DisplayMonitors}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <local:AutoScaleCanvas
                        RequiredSize="{Binding Source={x:Static display:DisplayManager.Instance}, Path=VirtualScreenBounds.Size}" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="local:AutoScaleCanvas.Left">
                        <Setter.Value>
                            <MultiBinding Converter="{StaticResource DisplayMonitorPositionConverter}">
                                <Binding Path="Bounds.Left" />
                                <Binding Source="{x:Static display:DisplayManager.Instance}" Path="VirtualScreenBounds.Left" />
                            </MultiBinding>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="local:AutoScaleCanvas.Top">
                        <Setter.Value>
                            <MultiBinding Converter="{StaticResource DisplayMonitorPositionConverter}">
                                <Binding Path="Bounds.Top" />
                                <Binding Source="{x:Static display:DisplayManager.Instance}" Path="VirtualScreenBounds.Top" />
                            </MultiBinding>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="local:AutoScaleCanvas.RequestedWidth" Value="{Binding Bounds.Width}" />
                    <Setter Property="local:AutoScaleCanvas.RequestedHeight" Value="{Binding Bounds.Height}" />
                </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.Resources>
                <DataTemplate DataType="{x:Type display:DisplayMonitor}">
                    <ui:ThemeShadowChrome Margin="2" Depth="10">
                        <Button Padding="0" BorderThickness="0"
                            CommandParameter="{Binding}"
                            Command="{Binding ElementName=_this, Path=SetPreferredDisplayMonitorCommand}"
                            VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                            VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
                            <Button.ToolTip>
                                <ui:SimpleStackPanel>
                                    <TextBlock Text="{Binding DisplayName}" />
                                </ui:SimpleStackPanel>
                            </Button.ToolTip>
                            <Border x:Name="border" BorderThickness="2" BorderBrush="{DynamicResource SystemControlBackgroundBaseHighBrush}"
                                    CornerRadius="{DynamicResource ControlCornerRadius}">
                                <Grid>
                                    <TextBlock Style="{DynamicResource BodyTextBlockStyle}"
                                               VerticalAlignment="Center" HorizontalAlignment="Center"
                                               Text="{Binding Index}" />
                                    <TextBlock Style="{DynamicResource CaptionTextBlockStyle}"
                                               Margin="5"
                                               VerticalAlignment="Bottom" HorizontalAlignment="Center">
                                        <Run Text="{Binding Bounds.Width}" />
                                        <Run Text="x" />
                                        <Run Text="{Binding Bounds.Height}" />
                                    </TextBlock>
                                </Grid>
                            </Border>
                        </Button>
                    </ui:ThemeShadowChrome>
                    <DataTemplate.Triggers>
                        <DataTrigger Value="True">
                            <DataTrigger.Binding>
                                <MultiBinding Mode="OneWay" Converter="{StaticResource DisplayMonitorIsCheckedConverter}">
                                    <Binding />
                                    <Binding ElementName="_this" Path="PreferredDisplayMonitor" />
                                </MultiBinding>
                            </DataTrigger.Binding>
                            <Setter TargetName="border" Property="Background" Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
                            <Setter TargetName="border" Property="TextBlock.Foreground" Value="White" />
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ItemsControl.Resources>
        </ItemsControl>
    </Grid>
</UserControl>
