<UserControl x:Class="PixiEditor.AvaloniaUI.Views.Overlays.TogglableFlyout"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
             mc:Ignorable="d"
             d:DesignHeight="380" d:DesignWidth="200" Name="togglableFlyout">
    <Border Background="Transparent">
        <StackPanel Orientation="Vertical">
            <Border HorizontalAlignment="Right" Background="#C8202020" CornerRadius="5" Padding="5" x:Name="btnBorder">
                <ToggleButton Padding="0" Margin="0"
                              x:Name="toggleButton" BorderThickness="0" Width="24" Height="24" Background="Transparent">
                    <ToggleButton.Template>
                        <ControlTemplate TargetType="{x:Type ToggleButton}">
                            <Grid>
                                <Grid.Styles>
                                    <Style Selector="Grid Image#btnBg">
                                        <Setter Property="RenderTransform" Value="rotate(0)"/>
                                    </Style>
                                    <Style Selector="ToggleButton:checked Image#btnBg">
                                        <Setter Property="RenderTransform" Value="rotate(180deg)"/>
                                    </Style>
                                </Grid.Styles>
                                <Image Focusable="False" Width="24" Cursor="Hand" x:Name="btnBg"
                                       Source="{Binding ElementName=togglableFlyout, Path=IconPath, Converter={converters:ImagePathToBitmapConverter}}">
                                    <Image.Transitions>
                                        <Transitions>
                                            <TransformOperationsTransition Duration="0:0:0.15" Property="RenderTransform" />
                                        </Transitions>
                                    </Image.Transitions>
                                    <Image.RenderTransform>
                                        <RotateTransform Angle="0" CenterX="12" CenterY="12"/>
                                    </Image.RenderTransform>
                                </Image>
                                <ContentPresenter/>
                            </Grid>
                            <!--<ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard x:Name="Rotate90Animation">
                                            <Storyboard>
                                                <DoubleAnimation From="0" To="180"
                                                                 Storyboard.TargetName="btnBg"
                                                                 Storyboard.TargetProperty="(ToggleButton.RenderTransform).(RotateTransform.Angle)"
                                                                 Duration="0:0:0.15"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                    <Trigger.ExitActions>
                                        <BeginStoryboard x:Name="RotateReverse90Animation">
                                            <Storyboard>
                                                <DoubleAnimation From="180" To="0"
                                                                 Storyboard.TargetName="btnBg"
                                                                 Storyboard.TargetProperty="(ToggleButton.RenderTransform).(RotateTransform.Angle)"
                                                                 Duration="0:0:0.15"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.ExitActions>
                                </Trigger>
                            </ControlTemplate.Triggers>-->
                        </ControlTemplate>
                    </ToggleButton.Template>
                </ToggleButton>
            </Border>
            <ContentControl x:Name="popup" DataContext="{Binding ElementName=togglableFlyout}"
                              IsVisible="{Binding Path=IsChecked, ElementName=toggleButton}"
                   Content="{Binding ElementName=togglableFlyout, Path=Child}" />
        </StackPanel>
    </Border>
</UserControl>
