package view;

import model.String.Strings;
import feathers.controls.ScrollContainer;
import ui.SVGIconFactory;
import feathers.controls.ButtonState;
import openfl.display.Bitmap;
import ui.LPTCTheme;
import feathers.controls.Label;
import feathers.controls.AssetLoader;
import feathers.controls.Button;
import feathers.controls.Drawer;
import feathers.controls.LayoutGroup;
import feathers.controls.TextInput;
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.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 closeDrawerButton:Button;
	private var firstNameTextInput:TextInput;
	private var nameTextInput:TextInput;
	private var remainingCreditLabel:Label;
	private var removeOneCredit: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));
		swipeCloseEnabled = true;
		swipeOpenEnabled = false;
		autoSizeMode = STAGE;
		pullableEdge = TOP;
		clickOverlayToClose = false;

		// main Layout
		var mainScrollContainer:ScrollContainer = new ScrollContainer();
		mainScrollContainer.autoSizeMode = STAGE;

		var mainVerticalLayout = new VerticalLayout();
		mainVerticalLayout.setPadding(spacing);
		mainVerticalLayout.gap = spacing;
		mainVerticalLayout.horizontalAlign = JUSTIFY;
		mainVerticalLayout.verticalAlign = TOP;
		mainScrollContainer.layout = mainVerticalLayout;

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

		// profile picture
		ppal = new AssetLoader();
		ppal.addEventListener(Event.COMPLETE, onPPLoaded);
		mainScrollContainer.addChild(ppal);

		// ########################################################################## FIRSTNAME & NAME TEXT INPUTS
		// layout
		var lg1:LayoutGroup = new LayoutGroup();
		lg1.backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR1, 0.1));
		var vl1:VerticalLayout = new VerticalLayout();
		vl1.setPadding(spacing);
		vl1.gap = -spacing;
		vl1.horizontalAlign = JUSTIFY;
		lg1.layout = vl1;
		mainScrollContainer.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_26, Constants.MAIN_COLOR1);
		lg1.addChild(firstNameTextInput);

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

		// ########################################################################## Remaining credit label
		remainingCreditLabel = new Label();
		remainingCreditLabel.embedFonts = true;
		remainingCreditLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_16, Constants.MAIN_COLOR1);
		mainScrollContainer.addChild(remainingCreditLabel);

		// ########################################################################## Remove 1 credit button
		removeOneCredit = new Button();
		removeOneCredit.icon = SVGIconFactory.makeIcon("vector/ticket_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.MAIN_COLOR3);
		removeOneCredit.setIconForState(ButtonState.DOWN, SVGIconFactory.makeIcon("vector/ticket_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.HERO_COLOR));
		removeOneCredit.text = Strings.RCD_S2;
		removeOneCredit.addEventListener(TriggerEvent.TRIGGER, (e) -> {
			traceRed("removeOneCredit()");
		});
		mainScrollContainer.addChild(removeOneCredit);

		drawer = mainScrollContainer;
	}

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

	public function populateAndShow() {
		var rvo:RiderVO = model.selectedRider;
		
		// profile picture
		ppal.source = "https://lepetittrot.com/lptcm/assets/profile-pictures/pp512/pp_test_512.jpg";
		ppal.source = Constants.PROFIL_PICTURES_PATH_512 + rvo.uid + ".jpg";

		// first name text input
		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 text input
		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);
				}
			});
		}

		// remaing credit text
		remainingCreditLabel.text = Strings.RCD_S1 + Std.string(rvo.credit);

		openDrawer();
	}

	private function onPPLoaded(e:Event):Void {
		var rvo:RiderVO = model.selectedRider;
		var al:AssetLoader = cast(e.currentTarget, AssetLoader);
		al.validateNow();
	}
}
