<UserControl
    x:Class="CharacterMap.Views.CollectionManagementView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:CharacterMap.Controls"
    xmlns:core="using:CharacterMap.Core"
    xmlns:ct="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    DataContext="{x:Bind}"
    mc:Ignorable="d"
    d:DesignHeight="600"
    d:DesignWidth="800">

    <Grid RowSpacing="12">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TextBlock Style="{StaticResource SectionHeaderTextBlockStyle}" Text="{core:Localizer Key=SettingsCollectionsHeader}" />

        <controls:SettingsPresenter
            Title="{core:Localizer Key=SelectCollectionLabel}"
            Grid.Row="1"
            ContentPlacement="Bottom">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <StackPanel
                    VerticalAlignment="Top"
                    Orientation="Horizontal"
                    Spacing="12">
                    <controls:UXComboBox
                        x:Name="CollectionSelector"
                        x:Uid="CollectionSelector"
                        Width="200"
                        ItemsSource="{x:Bind ViewModel.Collections, Mode=OneWay}"
                        SelectedItem="{x:Bind ViewModel.SelectedCollection, Mode=TwoWay}"
                        SelectionChanged="{x:Bind ViewModel.RefreshFontLists}"
                        d:PlaceholderText="{core:Localizer Key=CollectionSelector/PlaceholderText}">
                        <ComboBox.ItemTemplate>
                            <DataTemplate>
                                <controls:AutoGrid Definitions="c* cAuto" Orientation="Horizontal">
                                    <TextBlock Text="{Binding Name}" />
                                    <TextBlock
                                        Margin="12,0,0,0"
                                        HorizontalAlignment="Right"
                                        VerticalAlignment="Center"
                                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                                        Foreground="{ThemeResource MenuFlyoutItemKeyboardAcceleratorTextForeground}"
                                        HorizontalTextAlignment="Right"
                                        Opacity="0.7"
                                        Style="{ThemeResource CaptionTextBlockStyle}"
                                        Text="{Binding Icon}" />
                                </controls:AutoGrid>
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </controls:UXComboBox>
                    <TextBlock
                        x:Uid="OrLabel"
                        VerticalAlignment="Center"
                        d:Text="{core:Localizer Key=OrLabel/Text}" />
                    <HyperlinkButton
                        x:Uid="CreateNewButton"
                        VerticalAlignment="Center"
                        Click="NewCollection_Click"
                        d:Content="{core:Localizer Key=CreateNewButton/Content}" />
                </StackPanel>

                <StackPanel
                    Height="40"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom"
                    Orientation="Horizontal"
                    Visibility="{x:Bind core:Converters.IsNotNullToVis(ViewModel.SelectedCollection), Mode=OneWay, FallbackValue=Collapsed}"
                    d:Visibility="Visible">
                    <controls:UXButton
                        x:Uid="EditCollectionButton"
                        Height="Auto"
                        VerticalAlignment="Stretch"
                        Click="RenameFontCollection_Click"
                        Foreground="{ThemeResource AppBarItemForegroundThemeBrush}"
                        IsEnabled="{x:Bind ViewModel.IsSelectedEditable, Mode=OneWay}"
                        Style="{StaticResource MapInfoButtonStyle}"
                        ToolTipService.Placement="Bottom"
                        d:Label="{core:Localizer Key=EditCollectionButton/Label}"
                        d:ToolTipService.ToolTip="{core:Localizer Key=EditCollectionButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                        <FontIcon Glyph="&#xE8AC;" />
                    </controls:UXButton>
                    <controls:UXButton
                        x:Uid="DeleteCollectionButton"
                        Height="Auto"
                        VerticalAlignment="Stretch"
                        Click="DeleteCollection_Click"
                        Foreground="{ThemeResource AppBarItemForegroundThemeBrush}"
                        IsEnabled="{x:Bind ViewModel.IsSelectedEditable, Mode=OneWay}"
                        Style="{StaticResource MapInfoButtonStyle}"
                        ToolTipService.Placement="Bottom"
                        d:Label="{core:Localizer Key=Delete}"
                        d:ToolTipService.ToolTip="{core:Localizer Key=DeleteCollectionButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                        <FontIcon Glyph="&#xE74D;" />
                    </controls:UXButton>
                    <controls:UXButton
                        x:Name="CollectionExportButton"
                        x:Uid="CollectionExportButton"
                        Height="Auto"
                        VerticalAlignment="Stretch"
                        Foreground="{ThemeResource AppBarItemForegroundThemeBrush}"
                        IsEnabled="{x:Bind core:Converters.IsNotNull(ViewModel.SelectedCollection), Mode=OneWay}"
                        Style="{StaticResource MapInfoButtonStyle}"
                        d:Label="{core:Localizer Key=CollectionExportButton/Label}"
                        d:ToolTipService.ToolTip="{core:Localizer Key=CollectionExportButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                        <Button.Flyout>
                            <MenuFlyout MenuFlyoutPresenterStyle="{StaticResource DefaultFlyoutStyle}" Placement="Bottom">
                                <MenuFlyoutItem
                                    x:Uid="CollectionExportHeader"
                                    Style="{StaticResource MenuFlyoutItemReadOnlyHeaderStyle}"
                                    d:Text="{core:Localizer Key=CollectionExportHeader/Text}" />
                                <MenuFlyoutItem
                                    x:Uid="CollectionExportFolder"
                                    Click="{x:Bind ViewModel.ExportAsFolder}"
                                    Style="{StaticResource ThemeMenuFlyoutItemStyle}"
                                    d:Text="{core:Localizer Key=CollectionExportFolder/Text}" />
                                <MenuFlyoutItem
                                    x:Uid="CollectionExportZip"
                                    Click="{x:Bind ViewModel.ExportAsZip}"
                                    Style="{StaticResource ThemeMenuFlyoutItemStyle}"
                                    d:Text="{core:Localizer Key=CollectionExportZip/Text}" />
                            </MenuFlyout>
                        </Button.Flyout>
                        <Grid>
                            <StackPanel Spacing="4" Visibility="{x:Bind ViewModel.IsExporting, Mode=OneWay}">
                                <muxc:ProgressRing
                                    Width="16"
                                    Height="16"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    IsActive="{x:Bind ViewModel.IsExporting, Mode=OneWay}" />
                                <TextBlock
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    FontSize="11"
                                    IsTextScaleFactorEnabled="False"
                                    Opacity="0.7"
                                    OpticalMarginAlignment="TrimSideBearings"
                                    Text="{x:Bind ViewModel.CollectionExportProgress, Mode=OneWay}"
                                    TextAlignment="Center"
                                    TextLineBounds="Tight"
                                    d:Text="11%" />
                            </StackPanel>

                            <Path
                                Height="16"
                                Data="F1 M 38.613281 -43.886719 L 47.167969 -52.500000 L 0.000000 -52.500000 L 0.000000 -60.000000 L 47.167969 -60.000000 L 38.613281 -68.613281 L 43.886719 -73.886719 L 61.523438 -56.250000 L 43.886719 -38.613281 Z M 62.167969 -112.500000 L 120.000000 -112.500000 L 120.000000 -22.500000 L 0.000000 -22.500000 L 0.000000 -45.000000 L 7.500000 -45.000000 L 7.500000 -30.000000 L 112.500000 -30.000000 L 112.500000 -75.000000 L 62.167969 -75.000000 L 47.167969 -90.000000 L 7.500000 -90.000000 L 7.500000 -67.500000 L 0.000000 -67.500000 L 0.000000 -97.500000 L 47.167969 -97.500000 Z M 112.500000 -82.500000 L 112.500000 -105.000000 L 65.332031 -105.000000 L 54.023438 -93.750000 L 65.332031 -82.500000 Z "
                                Fill="{Binding ElementName=CollectionExportButton, Path=Foreground}"
                                Stretch="Uniform"
                                Visibility="{x:Bind core:Converters.FalseToVis(ViewModel.IsExporting), Mode=OneWay}" />
                        </Grid>

                    </controls:UXButton>
                </StackPanel>

                <TextBlock
                    x:Name="CollectionManagementHint"
                    x:Load="{x:Bind core:Converters.IsNull(ViewModel.SelectedCollection), Mode=OneWay, FallbackValue=True, TargetNullValue=True}"
                    x:Uid="CollectionManagementHint"
                    Grid.Row="1"
                    Grid.ColumnSpan="2"
                    Margin="0 12 0 0"
                    Style="{StaticResource DescriptionStyle}"
                    d:Text="{core:Localizer Key=CollectionManagementHint/Text}" />
            </Grid>
        </controls:SettingsPresenter>

        <Grid
            Grid.Row="2"
            ColumnSpacing="12"
            Visibility="{x:Bind ViewModel.IsUserCollection, Mode=OneWay, FallbackValue=Collapsed}"
            d:Visibility="Visible">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <controls:SettingsPresenter
                HorizontalContentAlignment="Stretch"
                VerticalContentAlignment="Top"
                ContentPlacement="Bottom">
                <controls:SettingsPresenter.Title>
                    <Grid>
                        <TextBlock
                            x:Uid="AllFontsLabel"
                            VerticalAlignment="Center"
                            d:Text="{core:Localizer Key=AllFontsLabel/Text}" />
                        <StackPanel
                            HorizontalAlignment="Right"
                            VerticalAlignment="Center"
                            Orientation="Horizontal"
                            Spacing="8">
                            <controls:UXButton
                                core:Properties.ToolTip="{core:Localizer Key=ClearSelectionLabel}"
                                Click="{x:Bind AllFontsList.ClearSelection}"
                                IsEnabled="{x:Bind AllFontsList.HasSelection, Mode=OneWay}"
                                RelativePanel.AlignRightWithPanel="True">
                                <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE8E6;" />
                            </controls:UXButton>
                            <controls:UXButton
                                x:Uid="AddToButton"
                                Click="{x:Bind ViewModel.AddToCollection}"
                                IsEnabled="{x:Bind core:Converters.TrueFalse(AllFontsList.HasSelection, ViewModel.IsSaving), Mode=OneWay}"
                                IsLabelVisible="True"
                                d:ToolTipService.ToolTip="{core:Localizer Key=AddToButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                                <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE710;" />
                            </controls:UXButton>
                        </StackPanel>

                    </Grid>
                </controls:SettingsPresenter.Title>
                <Grid RowSpacing="8" VerticalAlignment="Top">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <TextBox
                        x:Uid="FontFamilyFilterInput"
                        Text="{Binding ViewModel.Query, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                        d:PlaceholderText="{core:Localizer Key=FontFamilyFilterInput/PlaceholderText}" />

                    <TextBlock
                        Grid.Row="1"
                        Style="{StaticResource DescriptionStyle}"
                        Text="{x:Bind GetCountLabel(ViewModel.FontList.Count, AllFontsList.SelectionCount), Mode=OneWay}" />

                    <controls:ExtendedListView
                        x:Name="AllFontsList"
                        Grid.Row="2"
                        core:Properties.ToolTipTemplate="{StaticResource FontListToolTipTemplate}"
                        BindableSelectedItems="{x:Bind ViewModel.SelectedFonts, Mode=TwoWay}"
                        IsMultiSelectCheckBoxEnabled="False"
                        IsSelectionBindingEnabled="True"
                        ItemTemplate="{StaticResource FontListItemTemplate}"
                        ItemsSource="{x:Bind ViewModel.FontList, Mode=OneWay}"
                        SelectionMode="Multiple" />
                </Grid>
            </controls:SettingsPresenter>

            <controls:SettingsPresenter
                Grid.Column="2"
                VerticalAlignment="Top"
                HorizontalContentAlignment="Stretch"
                ContentPlacement="Bottom">
                <controls:SettingsPresenter.Title>
                    <Grid>
                        <TextBlock VerticalAlignment="Center" Text="{x:Bind ViewModel.SelectedCollection.Name, Mode=OneWay, FallbackValue='', TargetNullValue=''}" />
                        <StackPanel
                            HorizontalAlignment="Right"
                            VerticalAlignment="Center"
                            Orientation="Horizontal"
                            Spacing="8">
                            <controls:UXButton
                                core:Properties.ToolTip="{core:Localizer Key=ClearSelectionLabel}"
                                Click="{x:Bind CollectionFontsList.ClearSelection}"
                                IsEnabled="{x:Bind CollectionFontsList.HasSelection, Mode=OneWay}"
                                RelativePanel.AlignRightWithPanel="True">
                                <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE8E6;" />
                            </controls:UXButton>
                            <controls:UXButton
                                x:Uid="RemoveFromButton"
                                Click="{x:Bind ViewModel.RemoveFromCollection}"
                                IsEnabled="{x:Bind core:Converters.TrueFalse(CollectionFontsList.HasSelection, ViewModel.IsSaving), Mode=OneWay}"
                                d:ToolTipService.ToolTip="{core:Localizer Key=RemoveFromButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                                <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE738;" />
                            </controls:UXButton>
                        </StackPanel>

                    </Grid>
                </controls:SettingsPresenter.Title>

                <Grid RowSpacing="8">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <TextBlock
                        VerticalAlignment="Center"
                        Style="{StaticResource DescriptionStyle}"
                        Text="{x:Bind GetCountLabel(ViewModel.CollectionFonts.Count, CollectionFontsList.SelectionCount), Mode=OneWay}" />

                    <controls:ExtendedListView
                        x:Name="CollectionFontsList"
                        Grid.Row="1"
                        core:Properties.ToolTipTemplate="{StaticResource FontListToolTipTemplate}"
                        BindableSelectedItems="{x:Bind ViewModel.SelectedCollectionFonts, Mode=TwoWay}"
                        IsMultiSelectCheckBoxEnabled="False"
                        IsSelectionBindingEnabled="True"
                        ItemTemplate="{StaticResource FontListItemTemplate}"
                        ItemsSource="{x:Bind ViewModel.CollectionFonts, Mode=OneWay}"
                        SelectionMode="Multiple" />
                </Grid>

            </controls:SettingsPresenter>
        </Grid>

        <TextBlock
            x:Name="SmartCollectionEditHint"
            x:Load="{x:Bind ViewModel.IsSmartCollection, Mode=OneWay, FallbackValue=False, TargetNullValue=False}"
            x:Uid="SmartCollectionEditHint"
            Grid.Row="2"
            Style="{StaticResource DescriptionStyle}"
            Text=""
            d:Text="{core:Localizer Key=SmartCollectionEditHint/Text}" />

    </Grid>
</UserControl>
