<UserControl x:Class="Ion.Sdk.DemoApp.Views.AutoSequences"
             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:Ion.Sdk.DemoApp.Views"
             xmlns:system="clr-namespace:System;assembly=mscorlib"
             mc:Ignorable="d"
             d:DesignHeight="450"
             d:DesignWidth="800"
             x:Name="View">
    <Grid x:Name="Root"
          d:DataContext="{d:DesignData Type={x:Type local:AutoSequences+ViewModel}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid x:Name="ToolbarGrid"
              ZIndex="100">
            <Border BorderBrush="{StaticResource Brush.Separator}"
                    Background="{StaticResource Brush.White}"
                    BorderThickness="0 0 0 0">
                <Border.Effect>
                    <DropShadowEffect RenderingBias="Quality"
                                      BlurRadius="10"
                                      ShadowDepth="0"
                                      Opacity="0.5" />
                </Border.Effect>
            </Border>
            <StackPanel Orientation="Horizontal"
                        Margin="2 0">
                <ToggleButton x:Name="BaudRateToggleButton"
                              IsChecked="False"
                              Style="{StaticResource ToggleButton.ToolBar}"
                              Width="auto"
                              Content="{Binding ElementName=View, Path=SelectedBaudRate}">
                    <ToggleButton.ContentTemplate>
                        <DataTemplate>
                            <Grid>
                                <TextBlock x:Name="ContentText"
                                           Style="{StaticResource TextBlock.Content}"
                                           FontSize="{StaticResource Font.Size.Small}"
                                           Text="{Binding StringFormat={}{0} Baud}"
                                           Foreground="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton}, Path=Foreground}" />
                            </Grid>
                            <DataTemplate.Triggers>
                                <DataTrigger Binding="{Binding}"
                                             Value="{x:Null}">
                                    <Setter TargetName="ContentText"
                                            Property="Text"
                                            Value="Select transfer speed" />
                                </DataTrigger>
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </ToggleButton.ContentTemplate>
                </ToggleButton>
                <Popup Placement="Bottom"
                       IsOpen="{Binding ElementName=BaudRateToggleButton, Path=IsChecked, Mode=TwoWay}"
                       PlacementTarget="{Binding ElementName=BaudRateToggleButton}"
                       StaysOpen="False"
                       VerticalOffset="5"
                       AllowsTransparency="True">
                    <Grid Margin="{StaticResource Margin.Content}"
                          MinWidth="100">
                        <Border Background="{StaticResource Brush.White}"
                                BorderThickness="1"
                                BorderBrush="{StaticResource Brush.Separator}"
                                Effect="{StaticResource Shadow.Popup}" />
                        <Grid Margin="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto" />
                                <RowDefinition Height="auto" />
                            </Grid.RowDefinitions>
                            <Border BorderThickness="0 0 0 0"
                                    Background="{StaticResource Brush.Background}"
                                    BorderBrush="{StaticResource Brush.Separator}">
                                <TextBlock Text="Select transfer speed"
                                           Margin="{StaticResource Margin.Text}"
                                           FontSize="{StaticResource Font.Size.Tiny}"
                                           Foreground="{StaticResource Brush.Accent.Strong}" />
                            </Border>
                            <ListBox Grid.Row="1"
                                     ItemsSource="{Binding ElementName=View, Path=AvailableBaudRates}"
                                     SelectedItem="{Binding ElementName=View, Path=SelectedBaudRate, Mode=TwoWay}">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <Grid Background="Transparent"
                                              IsHitTestVisible="True">
                                            <TextBlock Text="{Binding StringFormat={}{0} Baud}"
                                                       Style="{StaticResource TextBlock.Content}"
                                                       Margin="{StaticResource Margin.Text}"
                                                       HorizontalAlignment="Right" />
                                        </Grid>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </Grid>
                    </Grid>
                    <Popup.Triggers>
                        <EventTrigger RoutedEvent="Border.MouseUp">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BaudRateToggleButton"
                                                                   Storyboard.TargetProperty="IsChecked">
                                        <DiscreteObjectKeyFrame KeyTime="0%">
                                            <DiscreteObjectKeyFrame.Value>
                                                <system:Boolean>False</system:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Popup.Triggers>
                </Popup>
                <ToggleButton x:Name="PortToggleButton"
                              IsChecked="False"
                              Style="{StaticResource ToggleButton.ToolBar}"
                              Width="auto"
                              Content="{Binding ElementName=View, Path=SelectedPort}">
                    <ToggleButton.ContentTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto" />
                                    <ColumnDefinition Width="auto" />
                                </Grid.ColumnDefinitions>
                                <Grid x:Name="IconGrid"
                                      Width="20">
                                    <Viewbox x:Name="OnlineViewbox"
                                             Stretch="Uniform"
                                             Width="10"
                                             Visibility="Hidden">
                                        <Path Data="{StaticResource Geometry.Check.Circle}"
                                              Fill="{StaticResource Brush.Marker.Confirm}"
                                              Stretch="Uniform" />
                                    </Viewbox>
                                    <Viewbox x:Name="OfflineViewbox"
                                             Stretch="Uniform"
                                             Visibility="Hidden"
                                             Width="10">
                                        <Path Data="{StaticResource Geometry.Link.Offline}"
                                              Fill="{StaticResource Brush.Marker.Reject}"
                                              Stretch="Uniform" />
                                    </Viewbox>
                                    <Viewbox x:Name="LoadingViewbox"
                                             Stretch="Uniform"
                                             Width="10"
                                             Visibility="Hidden"
                                             RenderTransformOrigin="0.5, 0.5">
                                        <Viewbox.RenderTransform>
                                            <RotateTransform Angle="0" />
                                        </Viewbox.RenderTransform>
                                        <Path Data="{StaticResource Geometry.Loading.Circle}"
                                              Fill="{StaticResource Brush.Foreground}"
                                              Stretch="Uniform" />
                                    </Viewbox>
                                </Grid>
                                <TextBlock Grid.Column="1"
                                           x:Name="ContentText"
                                           Style="{StaticResource TextBlock.Content}"
                                           FontSize="{StaticResource Font.Size.Small}"
                                           Text="{Binding}"
                                           Foreground="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton}, Path=Foreground}" />
                            </Grid>
                            <DataTemplate.Triggers>
                                <DataTrigger Binding="{Binding ElementName=View, Path=IsOnline}"
                                             Value="{x:Null}">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard RepeatBehavior="Forever">
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoadingViewbox"
                                                                               Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0%">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <DoubleAnimation Storyboard.TargetName="LoadingViewbox"
                                                                 Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                                                                 Duration="0:0:2.5"
                                                                 To="359" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard RepeatBehavior="Forever">
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoadingViewbox"
                                                                               Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0%">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Hidden</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoadingViewbox"
                                                                               Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)">
                                                    <DiscreteObjectKeyFrame KeyTime="0%">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <system:Double>0</system:Double>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding ElementName=View, Path=IsOnline}"
                                             Value="True">
                                    <Setter TargetName="OnlineViewbox"
                                            Property="Visibility"
                                            Value="Visible" />
                                    <Setter TargetName="OfflineViewbox"
                                            Property="Visibility"
                                            Value="Hidden" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding ElementName=View, Path=IsOnline}"
                                             Value="False">
                                    <Setter TargetName="OnlineViewbox"
                                            Property="Visibility"
                                            Value="Hidden" />
                                    <Setter TargetName="OfflineViewbox"
                                            Property="Visibility"
                                            Value="Visible" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding}"
                                             Value="{x:Null}">
                                    <Setter TargetName="ContentText"
                                            Property="Text"
                                            Value="Select port" />
                                    <Setter TargetName="IconGrid"
                                            Property="Visibility"
                                            Value="Collapsed" />
                                </DataTrigger>
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </ToggleButton.ContentTemplate>
                </ToggleButton>
                <Popup Placement="Bottom"
                       IsOpen="{Binding ElementName=PortToggleButton, Path=IsChecked, Mode=TwoWay}"
                       PlacementTarget="{Binding ElementName=PortToggleButton}"
                       StaysOpen="False"
                       VerticalOffset="5"
                       AllowsTransparency="True">
                    <Grid Margin="{StaticResource Margin.Content}"
                          MinWidth="100">
                        <Border Background="{StaticResource Brush.White}"
                                BorderThickness="1"
                                BorderBrush="{StaticResource Brush.Separator}"
                                Effect="{StaticResource Shadow.Popup}" />
                        <Grid Margin="1"
                              HorizontalAlignment="Stretch">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto" />
                                <RowDefinition Height="auto" />
                            </Grid.RowDefinitions>
                            <Border BorderThickness="0 0 0 0"
                                    Background="{StaticResource Brush.Background}"
                                    BorderBrush="{StaticResource Brush.Separator}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="Select port"
                                               Margin="{StaticResource Margin.Text}"
                                               FontSize="{StaticResource Font.Size.Tiny}"
                                               Foreground="{StaticResource Brush.Accent.Strong}" />
                                    <Button Grid.Column="1"
                                            Style="{StaticResource Button.ListItem}"
                                            MinWidth="0"
                                            Width="20"
                                            Height="auto"
                                            BorderThickness="0"
                                            ToolTip="Refresh"
                                            Command="{Binding ElementName=View, Path=RefreshAvailablePortsCommand}">
                                        <Button.ContentTemplate>
                                            <DataTemplate>
                                                <Viewbox Stretch="Uniform"
                                                         Width="10">
                                                    <Path Data="{StaticResource Geometry.Refresh}"
                                                          Fill="{StaticResource Brush.Accent.Strong}"
                                                          Stretch="Uniform" />
                                                </Viewbox>
                                            </DataTemplate>
                                        </Button.ContentTemplate>
                                    </Button>
                                </Grid>
                            </Border>
                            <StackPanel Orientation="Vertical"
                                        Grid.Row="1">
                                <ListBox ItemsSource="{Binding ElementName=View, Path=AvailablePorts}"
                                         SelectedItem="{Binding ElementName=View, Path=SelectedPort, Mode=TwoWay}">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Border Background="Transparent"
                                                    IsHitTestVisible="True">
                                                <TextBlock Text="{Binding}"
                                                           Style="{StaticResource TextBlock.Content}"
                                                           Margin="{StaticResource Margin.Text}" />
                                            </Border>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                            </StackPanel>
                        </Grid>
                    </Grid>
                    <Popup.Triggers>
                        <EventTrigger RoutedEvent="Border.MouseUp">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PortToggleButton"
                                                                   Storyboard.TargetProperty="IsChecked">
                                        <DiscreteObjectKeyFrame KeyTime="0%">
                                            <DiscreteObjectKeyFrame.Value>
                                                <system:Boolean>False</system:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Popup.Triggers>
                </Popup>
                <Button x:Name="UploadButton"
                        Style="{StaticResource Button.ToolBar}"
                        Padding="2"
                        Width="auto"
                        Content="Upload"
                        Command="{Binding ElementName=View, Path=UploadCommand}"
                        CommandParameter="{Binding ElementName=View, Path=SelectedPort}">
                    <Button.ContentTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal"
                                        DataContext="{Binding RelativeSource={RelativeSource AncestorType=Button}}"
                                        Margin="5 0">
                                <Viewbox Stretch="Uniform"
                                         Height="10">
                                    <Path Stretch="Uniform"
                                          Data="{StaticResource Geometry.Upload}"
                                          Fill="{Binding Path=Foreground}" />
                                </Viewbox>
                                <TextBlock Style="{StaticResource TextBlock.Content}"
                                           Margin="5 0 0 0"
                                           FontSize="{StaticResource Font.Size.Small}"
                                           Text="{Binding Path=Content}" />
                            </StackPanel>
                        </DataTemplate>
                    </Button.ContentTemplate>
                </Button>
            </StackPanel>
        </Grid>
        <Grid x:Name="ContentGrid"
              Grid.Row="1"></Grid>
    </Grid>
</UserControl>
