import Widget from "./base_widget.js";

jingrow.provide("jingrow.utils");

export default class ShortcutWidget extends Widget {
	constructor(opts) {
		opts.shadow = true;
		super(opts);
	}

	get_config() {
		return {
			name: this.name,
			icon: this.icon,
			label: this.label,
			format: this.format,
			link_to: this.link_to,
			pg_view: this.pg_view,
			color: this.color,
			restrict_to_domain: this.restrict_to_domain,
			stats_filter: this.stats_filter,
			type: this.type,
			url: this.url,
			kanban_board: this.kanban_board,
		};
	}

	setup_events() {
		this.widget.click((e) => {
			if (this.in_customize_mode) return;

			let route = jingrow.utils.generate_route({
				route: this.route,
				name: this.link_to,
				type: this.type,
				is_query_report: this.is_query_report,
				pagetype: this.ref_pagetype,
				pg_view: this.pg_view,
				kanban_board: this.kanban_board,
				report_ref_pagetype: this.report_ref_pagetype,
			});

			let filters = jingrow.utils.get_filter_from_json(this.stats_filter);
			if (this.type == "PageType" && filters) {
				jingrow.route_options = filters;
			}

			if (e.ctrlKey || e.metaKey) {
				jingrow.open_in_new_tab = true;
			}

			if (this.type == "URL") {
				if (jingrow.open_in_new_tab) {
					window.open(this.url, "_blank");
					jingrow.open_in_new_tab = false;
				} else {
					window.location.href = this.url;
				}
				return;
			}

			jingrow.set_route(route);
		});
	}

	set_actions() {
		if (this.in_customize_mode) return;
		let icon_to_append = jingrow.utils.icon("es-line-arrow-up-right", "xs", "", "", "ml-2");
		if (jingrow.utils.is_rtl(jingrow.boot.lang)) {
			icon_to_append = jingrow.utils.icon("es-line-arrow-up-left", "xs", "", "", "ml-2");
		}
		$(icon_to_append).appendTo(this.action_area);

		this.widget.addClass("shortcut-widget-box");

		// Make it tabbable
		this.widget.attr({
			role: "link",
			tabindex: 0,
			"aria-label": this.label,
		});

		let filters = jingrow.utils.process_filter_expression(this.stats_filter);

		if (this.type == "PageType" && this.pg_view != "New" && filters) {
			jingrow.db
				.count(this.link_to, {
					filters: filters,
				})
				.then((count) => this.set_count(count));
		}

		// 插入图标到标题
		let $title = this.widget.find('.widget-title .ellipsis');
		if ($title.length) {

			let iconHtml = "";
			if (
				this.icon &&
				(this.icon.startsWith("http") ||
				 this.icon.startsWith("/files/") ||
				 this.icon.startsWith("data:image"))
			) {
				iconHtml = `<span class="shortcut-icon-block"><img src="${this.icon}" class="shortcut-custom-icon" style="width:20px;height:20px;display:block;margin-right:5px;"></span>`;
			}
			if (iconHtml) {
				$title.before(iconHtml);
			}
		}
	}

	set_count(count) {
		const get_label = () => {
			if (this.format) {
				return __(this.format).replace(/{}/g, count);
			}
			return count;
		};

		this.action_area.empty();
		const label = get_label();
		let color = this.color && count ? this.color.toLowerCase() : "gray";
		$(
			`<div class="indicator-pill no-indicator-dot ellipsis ${color}">${__(label)}</div>`
		).appendTo(this.action_area);

		$(jingrow.utils.icon("es-line-arrow-up-right", "xs", "", "", "ml-2")).appendTo(
			this.action_area
		);
	}
}
