package view;

import feathers.controls.TextInput;
import openfl.system.Capabilities;
import feathers.controls.AssetLoader;
import feathers.controls.Button;
import feathers.controls.Drawer;
import feathers.controls.Label;
import feathers.controls.LayoutGroup;
import feathers.events.FeathersEvent;
import feathers.events.TriggerEvent;
import feathers.layout.VerticalLayout;
import feathers.skins.RectangleSkin;
import model.AppModelLocator;
import model.Constants;
import openfl.Assets;
import openfl.events.Event;
import openfl.text.Font;
import openfl.text.TextFormat;
import t9.util.ColorTraces.*;
import vo.RiderVO;

class RiderCardDrawer extends Drawer {
	public static final CLOSE:String = "close";
	public static final OPEN:String = "open";

	private var model:AppModelLocator;
	private final spacing:Int = 10;

	// components
	private var ppal:AssetLoader;
	private var firstNameTextInput:TextInput;
	private var nameTextInput:TextInput;

	private var closeDrawerButton:Button;

	public function new() {
		super();
		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
	}

	override private function initialize():Void {
		super.initialize();

		model = AppModelLocator.getInstance();

		overlaySkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR3, 1));
		pullableEdge = TOP;
		clickOverlayToClose = false;

		// Main Layout
		var mainLaytoutGroup = new LayoutGroup();
		var mainVerticalLayout = new VerticalLayout();
		mainVerticalLayout.setPadding(spacing);
		mainVerticalLayout.gap = spacing;
		mainVerticalLayout.horizontalAlign = JUSTIFY;
		mainVerticalLayout.verticalAlign = TOP;
		mainLaytoutGroup.layout = mainVerticalLayout;

		// close button
		closeDrawerButton = new Button();
		closeDrawerButton.text = "Close Drawer";
		closeDrawerButton.addEventListener(TriggerEvent.TRIGGER, (e) -> {
			closeDrawer();
		});
		mainLaytoutGroup.addChild(closeDrawerButton);

		// profile picture
		ppal = new AssetLoader();
		//ppal.source = "https://lepetittrot.com/lptcm/assets/profile-pictures/pp512/pp_test_512.jpg";
		ppal.addEventListener(Event.COMPLETE, onPPLoaded);
		mainLaytoutGroup.addChild(ppal);

		// ############################################################################################################## FIRSTNAME & NAME TEXT INPUTS

		var lg1:LayoutGroup = new LayoutGroup();
		lg1.backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR1, 0.1));
		var vl1:VerticalLayout = new VerticalLayout();
		vl1.setPadding(spacing);
		vl1.horizontalAlign = JUSTIFY;
		lg1.layout = vl1;
		mainLaytoutGroup.addChild(lg1);

		// first name textInput
		firstNameTextInput = new TextInput();
		firstNameTextInput.backgroundSkin = null;
		firstNameTextInput.embedFonts = true;
		firstNameTextInput.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_5, Constants.MAIN_COLOR1);
		lg1.addChild(firstNameTextInput);

		// name label
		nameTextInput = new TextInput();
		nameTextInput.backgroundSkin = null;
		nameTextInput.embedFonts = true;
		nameTextInput.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_4, Constants.MAIN_COLOR2);
		lg1.addChild(nameTextInput);

		drawer = mainLaytoutGroup;
	}

	private function onCreationComplete(e:FeathersEvent):Void {
		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height);
	}

	public function populateAndShow() {
		// profile picture
		ppal.source = "https://lepetittrot.com/lptcm/assets/profile-pictures/pp512/pp_test_512.jpg";

		var rvo:RiderVO = model.selectedRider;
		
		/*
		// first name label
		firstNameTextInput.text = rvo.firstName;
		if (!firstNameTextInput.hasEventListener(Event.CHANGE)) {
			firstNameTextInput.addEventListener(Event.CHANGE, (e) -> {
				if (firstNameTextInput.text != model.selectedRider.firstName) {
					model.updateSelectedRiderProp(RiderVO.FIRST_NAME, firstNameTextInput.text);
				}
			});
		}

		// name label
		nameTextInput.text = rvo.name;
		if (!nameTextInput.hasEventListener(Event.CHANGE)) {
			nameTextInput.addEventListener(Event.CHANGE, (e) -> {
				if (nameTextInput.text != model.selectedRider.name) {
					model.updateSelectedRiderProp(RiderVO.NAME, nameTextInput.text);
				}
			});
		}
			*/

		openDrawer();
	}
	private function onPPLoaded(e:Event):Void {
		var rvo:RiderVO = model.selectedRider;

		// first name label
		//firstNameTextInput.text = rvo.firstName;

	}
}
