import QtQuick 2.7
import QtQuick.Controls 2.2 as Control
import Linphone
  
Control.TextField {
	id: mainItem
	property int inputSize: 100 * DefaultStyle.dp
	color: activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.main2_500main
	validator: IntValidator{bottom: 0; top: 9}

	width: inputSize * 0.9
	height: inputSize
	horizontalAlignment: TextInput.AlignHCenter
	verticalAlignment: TextInput.AlignVCenter
	overwriteMode: true

	// just reserve the space for the background
	placeholderText: "0"
	placeholderTextColor: "transparent"

	// cursorVisible is overwritten on focus change so useless to hide the cursor
	cursorDelegate: Item{}

	// horizontalAlignment: Control.TextField.AlignHCenter
	font.family: DefaultStyle.defaultFont
	font.pixelSize: inputSize / 2
	font.weight: 300 * DefaultStyle.dp

	background: Item {
		anchors.fill: parent
		// width: mainItem.inputSize * 0.9
		// height: mainItem.inputSize
		Rectangle {
			id: background
			border.width: Math.max(DefaultStyle.dp, 1)
			border.color: mainItem.activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.main2_500main
			radius: mainItem.inputSize * 0.15
			width: mainItem.inputSize * 0.9
			height: mainItem.inputSize
		}
		Rectangle {
			id: indicator
			visible: mainItem.activeFocus
			color: DefaultStyle.main1_500_main
			height : Math.max(0.5, 1 * DefaultStyle.dp)
			width: mainItem.inputSize * 0.67
			anchors.horizontalCenter: parent.horizontalCenter
			anchors.bottom: parent.bottom
			anchors.bottomMargin: (mainItem.inputSize / 8) * DefaultStyle.dp
		}
	}
}