<Page
    x:Class="PCUT.Pages.UpsertUserPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PCUT.Pages"
    xmlns:converters="using:PCUT.Converters"
    xmlns:viewmodels="using:PCUT.ViewModels"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Transitions>
        <TransitionCollection>
            <EntranceThemeTransition />
        </TransitionCollection>
    </Page.Transitions>
    <Page.DataContext>
        <viewmodels:UpsertUserViewModel/>
    </Page.DataContext>

    <Page.Resources>
        <Style x:Name="GridComponentStyle" TargetType="Control">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
        
        <Style x:Name="TexBlockStyle" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
        </Style>
        <converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
        <converters:UserRoleToBooleanConverter x:Key="roleToEnable"/>
        <converters:UserStatusConverter x:Key="statusConverter"/>
    </Page.Resources>

    <Page.Background>
        <ImageBrush ImageSource="/Assets/unnamed.jpg"/>
    </Page.Background>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.05*" />
            <RowDefinition Height="0.9*" />
            <RowDefinition Height="0.05*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.05*" />
            <ColumnDefinition Width="0.9*" />
            <ColumnDefinition Width="0.05*" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Row="1" Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="0.12*"/>
                <RowDefinition Height="0.12*"/>
                <RowDefinition Height="0.12*"/>
                <RowDefinition Height="0.12*"/>
                <RowDefinition Height="0.12*"/>
                <RowDefinition Height="0.12*"/>
                <RowDefinition Height="0.28*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.05*"/>
                <ColumnDefinition Width="0.3*"/>
                <ColumnDefinition Width="0.3*"/>
                <ColumnDefinition Width="0.3*"/>
                <ColumnDefinition Width="0.05*"/>
            </Grid.ColumnDefinitions>
            <TextBlock
                Grid.Row="0" Grid.ColumnSpan="5"
                HorizontalAlignment="Center" VerticalAlignment="Center"
                Text="{Binding Title, Mode=OneWay}"
                FontSize="40" />

            <Grid
                Grid.Row="1" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.1*" />
                    <RowDefinition Height="0.3*" />
                    <RowDefinition Height="0.5*" />
                    <RowDefinition Height="0.1*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.6*" />
                    <ColumnDefinition Width="0.2*" />
                </Grid.ColumnDefinitions>
                <TextBlock
                    Grid.Row="1" Grid.Column="1"
                    Style="{StaticResource TexBlockStyle}"
                    Text="Account Name:"
                    FontSize="20" />
                <TextBox
                    Grid.Row="2" Grid.Column="1"
                    x:Name="Account"
                    Style="{StaticResource GridComponentStyle}"
                    Text="{Binding AccountName, Mode=TwoWay}"
                    PlaceholderText="Account Name"/>
            </Grid>

            <Grid
                Grid.Row="1" Grid.Column="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.1*" />
                    <RowDefinition Height="0.3*" />
                    <RowDefinition Height="0.5*" />
                    <RowDefinition Height="0.1*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.6*" />
                    <ColumnDefinition Width="0.2*" />
                </Grid.ColumnDefinitions>
                <TextBlock
                    Grid.Row="1" Grid.Column="1"
                    Style="{StaticResource TexBlockStyle}"
                    Text="User Name:"
                    FontSize="20"/>
                <TextBox
                    Grid.Row="2" Grid.Column="1"
                    VerticalAlignment="Center" HorizontalAlignment="Stretch"
                    x:Name="UserName"
                    Style="{StaticResource GridComponentStyle}"
                    Text="{Binding Username, Mode=TwoWay}"
                    PlaceholderText="User Name" />
            </Grid>

            <Grid
                Grid.Row="1" Grid.Column="3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.1*" />
                    <RowDefinition Height="0.3*" />
                    <RowDefinition Height="0.5*" />
                    <RowDefinition Height="0.1*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.6*" />
                    <ColumnDefinition Width="0.2*" />
                </Grid.ColumnDefinitions>
                <TextBlock
                    Grid.Row="1" Grid.Column="1"
                    Style="{StaticResource TexBlockStyle}"
                    Text="Phone:"
                    FontSize="20" />
                <TextBox
                    Grid.Row="2" Grid.Column="1"
                    x:Name="Phone"
                    Style="{StaticResource GridComponentStyle}"
                    Text="{x:Bind ViewModel.Phone, Mode=TwoWay}"
                    PlaceholderText="+84"
                    BeforeTextChanging="TextBox_BeforeTextChanging" />
            </Grid>

            <Grid
                Grid.Row="2" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.1*" />
                    <RowDefinition Height="0.3*" />
                    <RowDefinition Height="0.5*" />
                    <RowDefinition Height="0.1*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.6*" />
                    <ColumnDefinition Width="0.2*" />
                </Grid.ColumnDefinitions>
                <TextBlock
                    Grid.Row="1" Grid.Column="1"
                    Style="{StaticResource TexBlockStyle}"
                    Text="Role:"
                    FontSize="20" />
                <ComboBox
                    Grid.Row="2" Grid.Column="1"
                    x:Name="RoleComboBox"
                    Style="{StaticResource GridComponentStyle}"
                    ItemsSource="{Binding Roles}"
                    SelectedItem="{Binding Role, Mode=TwoWay}"
                    PlaceholderText="Role" />
            </Grid>

            <Grid
                Grid.Row="3" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.1*" />
                    <RowDefinition Height="0.3*" />
                    <RowDefinition Height="0.5*" />
                    <RowDefinition Height="0.1*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.6*" />
                    <ColumnDefinition Width="0.2*" />
                </Grid.ColumnDefinitions>
                <TextBlock
                    Grid.Row="1" Grid.Column="1"
                    Style="{StaticResource TexBlockStyle}"
                    Text="Status:"
                    FontSize="20" />
                <ComboBox
                    Grid.Row="2" Grid.Column="1"
                    x:Name="Status"
                    Style="{StaticResource GridComponentStyle}"
                    ItemsSource="{Binding Statuses}"
                    SelectedItem="{Binding IsActive, Mode=TwoWay, Converter={StaticResource statusConverter}}" />
            </Grid>

            <Grid
                Grid.Row="4" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.1*" />
                    <RowDefinition Height="0.3*" />
                    <RowDefinition Height="0.5*" />
                    <RowDefinition Height="0.1*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.6*" />
                    <ColumnDefinition Width="0.2*" />
                </Grid.ColumnDefinitions>
                <TextBlock
                    Grid.Row="1" Grid.Column="1"
                    Style="{StaticResource TexBlockStyle}"
                    Text="Expired Date:"
                    FontSize="20" />
                <CalendarDatePicker
                    Grid.Row="2" Grid.Column="1"
                    x:Name="calendarDatePicker"
                    DateFormat="{}{day.integer}/{month.integer}/{year.full}"
                    Style="{StaticResource GridComponentStyle}"
                    Date="{Binding ExpiredAt, Mode=TwoWay}"
                    MinDate="{Binding MinimumDate}" />
            </Grid>

            <Grid
                Grid.Row="5" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.1*" />
                    <RowDefinition Height="0.3*" />
                    <RowDefinition Height="0.5*" />
                    <RowDefinition Height="0.1*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.6*" />
                    <ColumnDefinition Width="0.2*" />
                </Grid.ColumnDefinitions>
                <TextBlock
                    Grid.Row="1" Grid.Column="1"
                    Style="{StaticResource TexBlockStyle}"
                    Text="Password:"
                    FontSize="20" />
                <TextBox
                    Grid.Row="2" Grid.Column="1"
                    x:Name="PasswordBox"
                    Style="{StaticResource GridComponentStyle}"
                    Text="{Binding Password, Mode=TwoWay}"
                    PlaceholderText="Password"
                    IsEnabled="{Binding AddMode, Mode=OneWay}" />
            </Grid>

            <Grid
                Grid.Row="2" Grid.Column="2"
                Grid.ColumnSpan="2" Grid.RowSpan="2"
                HorizontalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.1*"/>
                    <RowDefinition Height="0.15*"/>
                    <RowDefinition Height="0.75*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.1*"/>
                    <ColumnDefinition Width="0.8*"/>
                    <ColumnDefinition Width="0.1*"/>
                </Grid.ColumnDefinitions>
                <TextBlock
                    Grid.Row="1" Grid.Column="1"
                    Text="Permission:"
                    FontSize="20"
                    Style="{StaticResource TexBlockStyle}"/>
                <StackPanel Grid.Row="2" Grid.Column="1">
                    <GridView Grid.Row="2" Grid.Column="1"
                        x:Name="Permissions"
                        ScrollViewer.HorizontalScrollMode="Disabled"
                        ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                        ScrollViewer.VerticalScrollMode="Enabled"
                        ScrollViewer.VerticalScrollBarVisibility="Auto"
                        IsEnabled="{Binding Role, Mode=OneWay, Converter={StaticResource roleToEnable}}"
                        ItemsSource="{Binding Permissions}">
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsWrapGrid HorizontalAlignment="Left" Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <CheckBox
                                Content="{Binding Name, Mode=OneWay}"
                                IsChecked="{Binding IsSelected, Mode=TwoWay}"/>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                    </GridView>
                    <TextBlock
                        Style="{StaticResource TexBlockStyle}"><Bold>Allow Custom Paper Size:</Bold></TextBlock>
                    <CheckBox
                        Content="Custom Size"
                        IsChecked="{Binding IsPermittedEdit, Mode=TwoWay}"
                        IsEnabled="{Binding Role, Mode=OneWay, Converter={StaticResource roleToEnable}}" />
                </StackPanel>
            </Grid>

            <Grid
                Grid.Row="4" Grid.Column="2"
                Grid.ColumnSpan="2" Grid.RowSpan="2"
                HorizontalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.15*"/>
                    <RowDefinition Height="0.25*"/>
                    <RowDefinition Height="0.6*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.1*"/>
                    <ColumnDefinition Width="0.8*"/>
                    <ColumnDefinition Width="0.1*"/>
                </Grid.ColumnDefinitions>
                <TextBlock
                    Grid.Row="1" Grid.Column="1"
                    HorizontalAlignment="Center"
                    Style="{StaticResource TexBlockStyle}"
                    Text="Description:"
                    FontSize="20" />
                <TextBox
                    Grid.Row="2" Grid.Column="1"
                    x:Name="DescriptionBox"
                    VerticalAlignment="Stretch"
                    AcceptsReturn="True"
                    TextWrapping="Wrap"
                    ScrollViewer.HorizontalScrollMode="Disabled"
                    ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                    ScrollViewer.VerticalScrollMode="Enabled"
                    ScrollViewer.VerticalScrollBarVisibility="Auto"
                    Text="{Binding Description, Mode=TwoWay}"
                    FontSize="20" />
            </Grid>

            <Grid Grid.Row="6" Grid.Column="3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.1*"/>
                    <RowDefinition Height="0.9*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Button
                    Grid.Row="1" Grid.Column="0"
                    x:Name="SaveButton"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Center"
                    Style="{StaticResource PrimaryDialogButton}"
                    Content="Save"
                    Command="{Binding Command, Mode=OneWay}"
                    Click="SaveButton_Click">
                </Button>
                <Button
                    Grid.Row="1" Grid.Column="1"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Left"
                    Style="{StaticResource CloseDialogButton}"
                    Content="Cancel"
                    Click="BackButton_Click" />
            </Grid>
        </Grid>
    </Grid>
</Page>
