<Page
    x:Class="ReactTestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    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"
    mc:Ignorable="d"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:react="using:Microsoft.ReactNative">

    <Grid Background="{StaticResource SystemControlAcrylicWindowBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="32"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid>
            <Grid x:Name="AppTitleBar" Background="Transparent">
                <TextBlock x:Name="AppTitle" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
            <MenuBar
                x:Name="AppMenuBar"
                HorizontalAlignment="Left"
                VerticalContentAlignment="Stretch"
                Width="Auto"
                Visibility="Collapsed">
                <MenuBarItem x:Name="ReactMenuBarItem" Title="React" AccessKey="R">
                    <MenuFlyoutItem Text="Load from JS bundle" Click="LoadFromJSBundle" AccessKey="E"/>
                    <MenuFlyoutItem Text="Load from dev server" Click="LoadFromDevServer" AccessKey="D"/>
                    <ToggleMenuFlyoutItem
                        x:Name="RememberLastComponentMenuItem"
                        IsEnabled="false"
                        Text="Remember last opened component"
                        Click="ToggleRememberLastComponent"
                        AccessKey="R"
                    />
                    <MenuFlyoutSeparator/>
                </MenuBarItem>
                <MenuBarItem x:Name="DebugMenuBarItem" IsEnabled="false" Title="Debug" AccessKey="D">
                    <MenuBarItem.KeyboardAccelerators>
                        <KeyboardAccelerator Key="D" Modifiers="Control,Shift"/>
                    </MenuBarItem.KeyboardAccelerators>
                    <MenuFlyoutItem Text="Reload JavaScript" Click="Reload" AccessKey="R"/>
                    <MenuFlyoutItem x:Name="WebDebuggerMenuItem" Click="ToggleWebDebugger" AccessKey="W"/>
                    <MenuFlyoutItem x:Name="DirectDebuggingMenuItem" Click="ToggleDirectDebugger" AccessKey="D"/>
                    <MenuFlyoutItem x:Name="BreakOnFirstLineMenuItem" Click="ToggleBreakOnFirstLine" AccessKey="B"/>
                    <MenuFlyoutItem x:Name="FastRefreshMenuItem" Click="ToggleFastRefresh" AccessKey="F"/>
                    <MenuFlyoutItem Text="Toggle Inspector" Click="ToggleInspector" AccessKey="I"/>
                    <MenuFlyoutItem x:Name="ConfigureBundlerMenuItem" Text="Configure Bundler…" Click="ConfigureBundler" AccessKey="C"/>
                </MenuBarItem>
            </MenuBar>
        </Grid>

        <react:ReactRootView x:Name="ReactRootView" Grid.Row="2"/>

        <ContentDialog x:Name="ContentDialog" CloseButtonText="OK">
            <react:ReactRootView x:Name="DialogReactRootView" MinWidth="320" MinHeight="200"/>
        </ContentDialog>

        <ContentDialog
            x:Name="ConfigureBundlerDialog"
            Title="Configure Bundler"
            PrimaryButtonClick="ConfigureBundlerDialog_Apply"
            PrimaryButtonText="Apply Changes"
            SecondaryButtonClick="ConfigureBundlerDialog_Reset"
            SecondaryButtonText="Reset to Default"
            CloseButtonText="Cancel">

            <StackPanel Spacing="12" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <TextBlock TextWrapping="Wrap">
                    Provide a custom bundler address and port.
                </TextBlock>
                <TextBox x:Name="BundlerHost" Header="Host" PlaceholderText="0.0.0.0"/>
                <muxc:NumberBox
                    x:Name="BundlerPort"
                    Header="Port"
                    Minimum="0"
                    Maximum="65535"
                    PlaceholderText="8081"
                />
            </StackPanel>

        </ContentDialog>
    </Grid>
</Page>
