<UserControl x:Class="EarTrumpet.UI.Views.DeviceView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:Theme="clr-namespace:EarTrumpet.UI.Themes"
             xmlns:ctl="clr-namespace:EarTrumpet.UI.Controls"
             xmlns:local="clr-namespace:EarTrumpet"
             xmlns:resx="clr-namespace:EarTrumpet.Properties"
             xmlns:views="clr-namespace:EarTrumpet.UI.Views"
             IsTabStop="False">
    <Grid Name="GridRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <ListViewItem Name="DeviceListItem"
                      AutomationProperties.Name="{Binding Device.AccessibleName}"
                      Tag="{x:Static views:DeviceView.DeviceListItemKey}">
            <Border Theme:Brush.Background=":=Transparent, Flyout:FlyoutBackground, Flyout:HighContrast=Window" Theme:Brush.BorderBrush="Theme=Transparent, HighContrast=Text">
                <Border.Style>
                    <Style TargetType="Border">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Source={StaticResource ThemeManager}, Path=IsHighContrast}" Value="True">
                                <Setter Property="BorderThickness" Value="0,0,0,1" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
                <Grid Theme:Brush.Background=":=Transparent, Flyout:Theme=SystemAccent/0.3/0.5, :HighContrast=Transparent, Flyout:HighContrast=Transparent">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <Border Height="{DynamicResource Mutable_DeviceTitleCellHeight}" Margin="{StaticResource WindowMargin}">
                        <TextBlock Text="{Binding Device.DisplayName}" TextTrimming="CharacterEllipsis">
                            <TextBlock.Style>
                                <Style BasedOn="{StaticResource DeviceTitleTextStyle}" TargetType="TextBlock">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsDisplayNameVisible}" Value="False">
                                            <Setter Property="Visibility" Value="Collapsed" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                    </Border>

                    <Grid Grid.Row="1" Height="{DynamicResource Mutable_DeviceItemCellHeight}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{DynamicResource Mutable_IconCellWidth}" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="{DynamicResource Mutable_VolumeCellWidth}" />
                        </Grid.ColumnDefinitions>

                        <Button Name="MuteButton"
                                Width="{DynamicResource Mutable_AppIconSize}"
                                Height="{DynamicResource Mutable_AppIconSize}"
                                Margin="{StaticResource DeviceOrAppIconMargin}"
                                HorizontalAlignment="Center"
                                Background="Transparent"
                                Command="{Binding Device.ToggleMute}"
                                IsTabStop="False"
                                Opacity="1"
                                ToolTipService.ToolTip="{x:Static resx:Resources.ToggleMuteToolTip}">
                            <Button.Style>
                                <Style BasedOn="{StaticResource MuteButton}" TargetType="{x:Type Button}" />
                            </Button.Style>
                            <Button.Content>
                                <Grid>
                                    <TextBlock Theme:Brush.Foreground="{Binding (Theme:Brush.Foreground), RelativeSource={RelativeSource AncestorType=Button}}"
                                               FontSize="{DynamicResource Mutable_DeviceVolumeTextFontSize}"
                                               Opacity="0.4">
                                        <TextBlock.Style>
                                            <Style BasedOn="{StaticResource GlyphTextBlockStyle}" TargetType="{x:Type TextBlock}">
                                                <Setter Property="Text" Value="&#xE995;" />
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding Device.IconKind}" Value="Mute">
                                                        <Setter Property="Text" Value="&#xE74F;" />
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding Device.IconKind}" Value="Microphone">
                                                        <Setter Property="Text" Value="&#xE720;" />
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </TextBlock.Style>
                                    </TextBlock>
                                    <TextBlock Theme:Brush.Foreground="{Binding (Theme:Brush.Foreground), RelativeSource={RelativeSource AncestorType=Button}}" FontSize="{DynamicResource Mutable_DeviceVolumeTextFontSize}">
                                        <TextBlock.Style>
                                            <Style BasedOn="{StaticResource GlyphTextBlockStyle}" TargetType="{x:Type TextBlock}">
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding Device.IconKind}" Value="Mute">
                                                        <Setter Property="Text" Value="&#xE74F;" />
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding Device.IconKind}" Value="Microphone">
                                                        <Setter Property="Text" Value="&#xE720;" />
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding Device.IconKind}" Value="Bar0">
                                                        <Setter Property="Text" Value="&#xE992;" />
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding Device.IconKind}" Value="Bar1">
                                                        <Setter Property="Text" Value="&#xE993;" />
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding Device.IconKind}" Value="Bar2">
                                                        <Setter Property="Text" Value="&#xE994;" />
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding Device.IconKind}" Value="Bar3">
                                                        <Setter Property="Text" Value="&#xE995;" />
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </TextBlock.Style>
                                    </TextBlock>
                                </Grid>
                            </Button.Content>
                        </Button>

                        <ctl:VolumeSlider Grid.Column="1"
                                          PeakValue1="{Binding Device.PeakValue1}"
                                          PeakValue2="{Binding Device.PeakValue2}"
                                          PreviewMouseUp="TouchSlider_MouseUp"
                                          PreviewTouchUp="TouchSlider_TouchUp"
                                          Style="{StaticResource {x:Type Slider}}"
                                          Value="{Binding Device.Volume, Mode=TwoWay}" />
                        <TextBlock Grid.Column="2"
                                   Style="{StaticResource DeviceVolumeTextStyle}"
                                   Text="{Binding Device.Volume, Mode=OneWay}" />
                    </Grid>
                </Grid>
            </Border>
        </ListViewItem>

        <Border Grid.Row="1" Theme:Brush.Background=":=Background, Flyout:FlyoutBackground">
            <Border.Style>
                <Style TargetType="Border">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsAppListVisible}" Value="False">
                            <Setter Property="Visibility" Value="Collapsed" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
            <ListView Name="AppList"
                      Margin="{StaticResource VolumeAppListMargin}"
                      AutomationProperties.Name="{x:Static resx:Resources.AppsListAccessibleText}"
                      ItemsSource="{Binding Device.Apps, Mode=OneWay}" />
        </Border>
    </Grid>
</UserControl>
