import { action } from "@ember/object";
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import isLandscape from "frontend-reactive/helpers/isLandscape";

export interface NoteInteractionsSignature {
	// The arguments accepted by the component
	Args: {
		boostCount: number;
		totalLikeCount: number;
		reactions: {
			[key: string]: number;
		};
		hasBoosted: boolean;
		hasReacted: boolean;
	};
	// Any blocks yielded by the component
	Blocks: {
		default: [];
	};
	// The element to which `...attributes` is applied in the component template
	Element: null;
}

export default class NoteInteractions extends Component<NoteInteractionsSignature> {
	@tracked hasBoosted = this.args.hasBoosted;
	@tracked hasReacted = this.args.hasReacted;
	@tracked expandReactions = false;

	@action
	toggleBoost() {
		this.hasBoosted = !this.hasBoosted;
		console.log("boosted", this.hasBoosted);
	}

	@action
	toggleDefaultLike() {
		this.hasReacted = !this.hasReacted;
		console.log("reacted", this.hasReacted);
	}

	@action
	openCustomReactionSelector() {
		this.hasReacted = !this.hasReacted;
		console.log("sent custom reaction", this.hasReacted);
	}

	@action
	openAllReactions() {
		console.log("Toggle all reactions overview");
		this.expandReactions = !this.expandReactions;
	}
}