<?xml version="1.0" encoding="UTF-8"?>

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:behaviors="clr-namespace:AlloyMobileComponents.Behaviors"
    xmlns:constants="clr-namespace:AlloyMobileComponents.Constants;assembly=AlloyMobileComponents"
    xmlns:inputBehaviors="clr-namespace:AlloyMobileComponents.Views.Inputs.Behaviors"
    xmlns:inputs="clr-namespace:AlloyMobileComponents.Views.Inputs;assembly=AlloyMobileComponents"
    xmlns:customControls="clr-namespace:AlloyMobileComponents.CustomControls;assembly=AlloyMobileComponents"
    xmlns:converters="clr-namespace:AlloyMobileComponents.Converters;assembly=AlloyMobileComponents"
    x:Class="AlloyMobileComponents.Views.Inputs.InputNumber"
    x:DataType="inputs:InputNumberViewModel"
    HeightRequest="50"
    HorizontalOptions="FillAndExpand">
  <ContentView.Resources>
    <ResourceDictionary>
      <!-- converter for input number values -->
      <converters:NullableDoubleToStringConverter x:Key="NullableDoubleToStringConverter" />
      <converters:NullableDoubleToStringConverterParameters x:Key="NullableDoubleToStringConverterParameters" />
      <!-- styles for entry control -->
      <Style x:Key="EntryStyle"
          TargetType="customControls:CustomEntry">
        <Setter Property="FontFamily"
            Value="{x:Static constants:FontConstants.FontFamilyNormal}" />
        <Setter Property="FontSize"
            Value="{x:Static constants:FontConstants.FontSizeDefault}" />
        <Setter Property="HeightRequest"
            Value="50" />
        <Setter Property="TextColor"
            Value="{x:Static constants:ColourConstants.DarkBlue}" />
        <Setter Property="VerticalTextAlignment"
            Value="Center" />
      </Style>
      <!-- styles for label control -->
      <Style x:Key="LabelStyle"
          TargetType="Label">
        <!-- required anchor for animating the labels out the way -->
        <Setter Property="AnchorX"
            Value="0" />
        <Setter Property="AnchorY"
            Value="0" />
        <Setter Property="FontFamily"
            Value="{x:Static constants:FontConstants.FontFamilyBold}" />
        <Setter Property="FontSize"
            Value="{x:Static constants:FontConstants.FontSizeDefault}" />
        <Setter Property="HeightRequest"
            Value="50" />
        <!-- turns off events being capture for the label -->
        <Setter Property="InputTransparent"
            Value="True" />
        <Setter Property="TextColor"
            Value="{x:Static constants:ColourConstants.LightBlue}" />
        <Setter Property="VerticalTextAlignment"
            Value="Center" />
      </Style>
    </ResourceDictionary>
  </ContentView.Resources>
  <ContentView.Content>
    <RelativeLayout>
      <!-- the text entry control -->
      <customControls:CustomEntry AutomationId="{x:Static inputs:InputString.ValueAutomationId}"
          Keyboard="Numeric"
          Style="{x:StaticResource EntryStyle}"
          Text="{Binding Value, Converter={x:StaticResource NullableDoubleToStringConverter}, ConverterParameter={x:StaticResource NullableDoubleToStringConverterParameters}}"
          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=0}"
          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=0}"
          x:Name="EntryValue">
        <customControls:CustomEntry.Behaviors>
          <!-- only allow numeric input -->
          <behaviors:NumbersOnlyBehavior />
          <!-- animate labels -->
          <inputBehaviors:InputLabelAnimationBehavior Label="{x:Reference LabelTitle}" />
        </customControls:CustomEntry.Behaviors>
      </customControls:CustomEntry>
      <!-- the label/placeholder than animates in and out -->
      <Label AutomationId="{x:Static inputs:InputString.TitleAutomationId}"
          Style="{x:StaticResource LabelStyle}"
          Text="{Binding Title}"
          RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=10}"
          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=0}"
          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-20}"
          x:Name="LabelTitle" />
    </RelativeLayout>
  </ContentView.Content>
</ContentView>