<Shell
    x:Class="Dollet.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Dollet"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:viewModels="clr-namespace:Dollet.ViewModels"
    xmlns:pages="clr-namespace:Dollet.Pages"
    xmlns:categoryPages="clr-namespace:Dollet.Pages.Categories"
    xmlns:expensesPages="clr-namespace:Dollet.Pages.Transactions.Expenses"
    xmlns:incomesPages="clr-namespace:Dollet.Pages.Transactions.Incomes"
    xmlns:fonts="clr-namespace:Dollet.Core.Constants;assembly=Dollet.Core"
    Shell.FlyoutBehavior="Flyout"
    FlyoutBackgroundColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Gray900}}"
    x:DataType="viewModels:AppShellViewModel">

    <Shell.Behaviors>
        <toolkit:EventToCommandBehavior 
            EventName="Navigated"
            Command="{Binding NavigatedCommand}"/>
    </Shell.Behaviors>

    <Shell.FlyoutHeader FlyoutHeaderBehavior="CollapseOnScroll">
        <VerticalStackLayout>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <Label 
                    Grid.RowSpan="2"
                    Text="{x:Static fonts:MaterialDesignIcons.Account_circle}"
                    FontFamily="MaterialIconsRegular" 
                    FontSize="80"
                    Padding="15"/>

                <Label 
                    Grid.Column="1"
                    Text="Username"
                    FontSize="24"
                    VerticalOptions="End"/>

                <Label 
                    Grid.Column="1"
                    Grid.Row="1"
                    VerticalOptions="Start">

                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="{Binding Balance, StringFormat='{0:F2}'}"/>
                            <Span Text="{Binding Currency, StringFormat=' {0}'}"/>
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
            </Grid>

            <Border />
        </VerticalStackLayout>
    </Shell.FlyoutHeader>

    <FlyoutItem
        Route="LoadingPage"
        Shell.FlyoutItemIsVisible="False">

        <ShellContent ContentTemplate="{DataTemplate pages:LoadingPage}"/>
    </FlyoutItem>
    
    <FlyoutItem 
        Title="Accounts" 
        Route="AccountsPage">

        <FlyoutItem.FlyoutIcon>
            <FontImageSource
                FontFamily="MaterialIconsRegular"
                Glyph="{x:Static fonts:MaterialDesignIcons.Account_balance}"
                Color="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"/>
        </FlyoutItem.FlyoutIcon>

        <ShellContent 
            Title="Accounts"
            ContentTemplate="{DataTemplate pages:AccountsPage}" />
    </FlyoutItem>

    <FlyoutItem 
        Title="Categories" 
        Route="CategoriesPage">

        <FlyoutItem.FlyoutIcon>
            <FontImageSource
                FontFamily="MaterialIconsRegular"
                Glyph="{x:Static fonts:MaterialDesignIcons.Category}"
                Color="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"/>
        </FlyoutItem.FlyoutIcon>

        <Tab>
            <ShellContent
                Title="Expense"
                Route="ExpenseCategoriesPage"
                ContentTemplate="{DataTemplate categoryPages:ExpenseCategoriesPage}"/>

            <ShellContent
                Title="Income"
                Route="IncomeCategoriesPage"
                ContentTemplate="{DataTemplate categoryPages:IncomeCategoriesPage}"/>
        </Tab>
    </FlyoutItem>

    <FlyoutItem 
        Title="Transactions">

        <FlyoutItem.FlyoutIcon>
            <FontImageSource
                FontFamily="MaterialIconsRegular"
                Glyph="{x:Static fonts:MaterialDesignIcons.Wallet}"
                Color="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"/>
        </FlyoutItem.FlyoutIcon>

        <Tab>
            <ShellContent 
                Title="Expenses"
                ContentTemplate="{DataTemplate expensesPages:ExpensesPage}">
            </ShellContent>

            <ShellContent 
                Title="Incomes" 
                ContentTemplate="{DataTemplate incomesPages:IncomesPage}">
            </ShellContent>
        </Tab>
    </FlyoutItem>

    <FlyoutItem 
        Title="Currencies"
        Route="CurrenciesPage">

        <FlyoutItem.FlyoutIcon>
            <FontImageSource
                FontFamily="MaterialIconsRegular"
                Glyph="{x:Static fonts:MaterialDesignIcons.Currency_exchange}"
                Color="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"/>
        </FlyoutItem.FlyoutIcon>

        <ShellContent 
            Title="Currencies"
            ContentTemplate="{DataTemplate pages:CurrenciesPage}" />
    </FlyoutItem>

    <FlyoutItem 
        Title="Wallets"
        Route="InwestmentsPage" 
        IsEnabled="False">

        <FlyoutItem.FlyoutIcon>
            <FontImageSource
                FontFamily="MaterialIconsRegular"
                Glyph="{x:Static fonts:MaterialDesignIcons.Home}"
                Color="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"/>
        </FlyoutItem.FlyoutIcon>

        <ShellContent 
            Title="Wallets"
            ContentTemplate="{DataTemplate pages:InwestmentsPage}" />
    </FlyoutItem>

    <FlyoutItem 
        Title="Settings"
        Route="SettingsPage"
        IsEnabled="False">

        <FlyoutItem.FlyoutIcon>
            <FontImageSource
                FontFamily="MaterialIconsRegular"
                Glyph="{x:Static fonts:MaterialDesignIcons.Settings}"
                Color="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"/>
        </FlyoutItem.FlyoutIcon>

        <ShellContent 
            Title="Settings"
            ContentTemplate="{DataTemplate pages:SettingsPage}" />
    </FlyoutItem>

    <Shell.FlyoutFooter>
        <VerticalStackLayout>
            <Border/>
            <Grid Margin="20, 0, 20, 0" ColumnDefinitions="auto, *, auto">
                <Label 
                    Text="{AppThemeBinding Light={x:Static fonts:MaterialDesignIcons.Light_mode}, Dark={x:Static fonts:MaterialDesignIcons.Dark_mode}}"
                    FontFamily="MaterialIconsRegular"
                    FontSize="32"
                    Margin="0, 0, 30, 0"
                    VerticalOptions="Center"/>
                <Label 
                    Grid.Column="1"
                    Text="Change theme"
                    VerticalOptions="Center"/>

                <Switch Grid.Column="2">
                    <Switch.Behaviors>
                        <toolkit:EventToCommandBehavior
                            EventName="Toggled"
                            Command="{Binding ChangeAppThemeCommand}"/>
                    </Switch.Behaviors>
                </Switch>
            </Grid>
        </VerticalStackLayout>
    </Shell.FlyoutFooter>
</Shell>
