package view;

import components.VSpacer;
import feathers.controls.AssetLoader;
import feathers.controls.Button;
import feathers.controls.ButtonState;
import feathers.controls.Drawer;
import feathers.controls.HProgressBar;
import feathers.controls.Label;
import feathers.controls.LayoutGroup;
import feathers.controls.ScrollContainer;
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 model.String.Strings;
import openfl.Assets;
import openfl.events.Event;
import openfl.text.TextFormat;
import t9.util.ColorTraces.*;
import ui.LPTCTheme;
import ui.SVGIconFactory;
import vo.RiderVO;

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

	private var model:AppModelLocator;

	// components
	private var ppal:AssetLoader;
	private var closeDrawerButton:Button;
	private var firstNameLabel:Label;
	private var nameLabel:Label;
	private var creditLabel:Label;
	private var creditProgressBar:HProgressBar;
	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.paddingLeft = mainVerticalLayout.paddingRight = Constants.GLOBAL_PADDING;
		//mainVerticalLayout.gap = Constants.GLOBAL_PADDING;
		mainVerticalLayout.horizontalAlign = JUSTIFY;
		mainVerticalLayout.verticalAlign = TOP;
		mainScrollContainer.layout = mainVerticalLayout;

		// ##### SPACER
		mainScrollContainer.addChild(new VSpacer(10));

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

		// ##### SPACER
		mainScrollContainer.addChild(new VSpacer(10));

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

		// ##### SPACER
		mainScrollContainer.addChild(new VSpacer(10));

		// ########################################################################## FIRSTNAME & NAME LABELS
		// layout
		var lg1:LayoutGroup = new LayoutGroup();
		lg1.backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR1, 0));
		var vl1:VerticalLayout = new VerticalLayout();
		vl1.horizontalAlign = JUSTIFY;
		lg1.layout = vl1;
		mainScrollContainer.addChild(lg1);

		// first name Label
		firstNameLabel = new Label();
		firstNameLabel.setPadding(0);
		firstNameLabel.backgroundSkin = null;
		firstNameLabel.embedFonts = true;
		firstNameLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_26, Constants.MAIN_COLOR1);
		lg1.addChild(firstNameLabel);

		// name Label
		nameLabel = new Label();
		nameLabel.setPadding(0);
		nameLabel.backgroundSkin = null;
		nameLabel.embedFonts = true;
		nameLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_22, Constants.MAIN_COLOR2);
		lg1.addChild(nameLabel);

		// ##### SPACER
		mainScrollContainer.addChild(new VSpacer(10));

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

		// ##### SPACER
		mainScrollContainer.addChild(new VSpacer(10));

		// ########################################################################## credit progress bar
		creditProgressBar = new HProgressBar(0, 0, 10);
		mainScrollContainer.addChild(creditProgressBar);

		// ##### SPACER
		mainScrollContainer.addChild(new VSpacer(10));

		// ########################################################################## 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);

		// ##### SPACER
		mainScrollContainer.addChild(new VSpacer(10));
		//mainScrollContainer.addChild(new VSpacer(2, Constants.MAIN_COLOR2, 1));

		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
		firstNameLabel.text = rvo.firstName;
		if (!firstNameLabel.hasEventListener(Event.CHANGE)) {
			firstNameLabel.addEventListener(Event.CHANGE, (e) -> {
				if (firstNameLabel.text != model.selectedRider.firstName) {
					model.updateSelectedRiderProp(RiderVO.FIRST_NAME, firstNameLabel.text);
				}
			});
		}

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

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

		// remaining credit progress bar
		if (rvo.credit <= Constants.CREDIT_ULTRA_LOW_LIMIT) {
			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_ALARM;
		} else if (rvo.credit <= Constants.CREDIT_LOW_LIMIT) {
			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_ALERT;
		} else if (rvo.credit <= Constants.CREDIT_AVERAGE_LIMIT) {
			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_WARNING;
		} else {
			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_INFO;
		}
		creditProgressBar.value = rvo.credit;

		openDrawer();
	}

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