/**
 * Dashicons Picker
 *
 * Based on: https://github.com/bradvin/dashicons-picker/
 */
import React, { useState } from "react";
const $ = window.jQuery;
import { sprintf, __ } from "@wordpress/i18n";

// available dashicon names
const icons = [
	"menu",
	"admin-site",
	"dashboard",
	"admin-media",
	"admin-page",
	"admin-comments",
	"admin-appearance",
	"admin-plugins",
	"admin-users",
	"admin-tools",
	"admin-settings",
	"admin-network",
	"admin-generic",
	"admin-home",
	"admin-collapse",
	"filter",
	"admin-customizer",
	"admin-multisite",
	"admin-links",
	"format-links",
	"admin-post",
	"format-standard",
	"format-image",
	"format-gallery",
	"format-audio",
	"format-video",
	"format-chat",
	"format-status",
	"format-aside",
	"format-quote",
	"welcome-write-blog",
	"welcome-edit-page",
	"welcome-add-page",
	"welcome-view-site",
	"welcome-widgets-menus",
	"welcome-comments",
	"welcome-learn-more",
	"image-crop",
	"image-rotate",
	"image-rotate-left",
	"image-rotate-right",
	"image-flip-vertical",
	"image-flip-horizontal",
	"image-filter",
	"undo",
	"redo",
	"editor-bold",
	"editor-italic",
	"editor-ul",
	"editor-ol",
	"editor-quote",
	"editor-alignleft",
	"editor-aligncenter",
	"editor-alignright",
	"editor-insertmore",
	"editor-spellcheck",
	"editor-distractionfree",
	"editor-expand",
	"editor-contract",
	"editor-kitchensink",
	"editor-underline",
	"editor-justify",
	"editor-textcolor",
	"editor-paste-word",
	"editor-paste-text",
	"editor-removeformatting",
	"editor-video",
	"editor-customchar",
	"editor-outdent",
	"editor-indent",
	"editor-help",
	"editor-strikethrough",
	"editor-unlink",
	"editor-rtl",
	"editor-break",
	"editor-code",
	"editor-paragraph",
	"editor-table",
	"align-left",
	"align-right",
	"align-center",
	"align-none",
	"lock",
	"unlock",
	"calendar",
	"calendar-alt",
	"visibility",
	"hidden",
	"post-status",
	"edit",
	"post-trash",
	"trash",
	"sticky",
	"external",
	"arrow-up",
	"arrow-down",
	"arrow-left",
	"arrow-right",
	"arrow-up-alt",
	"arrow-down-alt",
	"arrow-left-alt",
	"arrow-right-alt",
	"arrow-up-alt2",
	"arrow-down-alt2",
	"arrow-left-alt2",
	"arrow-right-alt2",
	"leftright",
	"sort",
	"randomize",
	"list-view",
	"excerpt-view",
	"grid-view",
	"hammer",
	"art",
	"migrate",
	"performance",
	"universal-access",
	"universal-access-alt",
	"tickets",
	"nametag",
	"clipboard",
	"heart",
	"megaphone",
	"schedule",
	"wordpress",
	"wordpress-alt",
	"pressthis",
	"update",
	"screenoptions",
	"cart",
	"feedback",
	"cloud",
	"translation",
	"tag",
	"category",
	"archive",
	"tagcloud",
	"text",
	"media-archive",
	"media-audio",
	"media-code",
	"media-default",
	"media-document",
	"media-interactive",
	"media-spreadsheet",
	"media-text",
	"media-video",
	"playlist-audio",
	"playlist-video",
	"controls-play",
	"controls-pause",
	"controls-forward",
	"controls-skipforward",
	"controls-back",
	"controls-skipback",
	"controls-repeat",
	"controls-volumeon",
	"controls-volumeoff",
	"yes",
	"no",
	"no-alt",
	"plus",
	"plus-alt",
	"plus-alt2",
	"minus",
	"dismiss",
	"marker",
	"star-filled",
	"star-half",
	"star-empty",
	"flag",
	"info",
	"warning",
	"share",
	"share1",
	"share-alt",
	"share-alt2",
	"twitter",
	"rss",
	"email",
	"email-alt",
	"facebook",
	"facebook-alt",
	"networking",
	"googleplus",
	"location",
	"location-alt",
	"camera",
	"images-alt",
	"images-alt2",
	"video-alt",
	"video-alt2",
	"video-alt3",
	"vault",
	"shield",
	"shield-alt",
	"sos",
	"search",
	"slides",
	"analytics",
	"chart-pie",
	"chart-bar",
	"chart-line",
	"chart-area",
	"groups",
	"businessman",
	"id",
	"id-alt",
	"products",
	"awards",
	"forms",
	"testimonial",
	"portfolio",
	"book",
	"book-alt",
	"download",
	"upload",
	"backup",
	"clock",
	"lightbulb",
	"microphone",
	"desktop",
	"tablet",
	"smartphone",
	"phone",
	"smiley",
	"index-card",
	"carrot",
	"building",
	"store",
	"album",
	"palmtree",
	"tickets-alt",
	"money",
	"thumbs-up",
	"thumbs-down",
	"layout",
	"align-pull-left",
	"align-pull-right",
	"block-default",
	"cloud-saved",
	"cloud-upload",
	"columns",
	"cover-image",
	"embed-audio",
	"embed-generic",
	"embed-photo",
	"embed-post",
	"embed-video",
	"exit",
	"html",
	"info-outline",
	"insert-after",
	"insert-before",
	"insert",
	"remove",
	"shortcode",
	"table-col-after",
	"table-col-before",
	"table-col-delete",
	"table-row-after",
	"table-row-before",
	"table-row-delete",
	"saved",
	"amazon",
	"google",
	"linkedin",
	"pinterest",
	"podio",
	"reddit",
	"spotify",
	"twitch",
	"whatsapp",
	"xing",
	"youtube",
	"database-add",
	"database-export",
	"database-import",
	"database-remove",
	"database-view",
	"database",
	"bell",
	"airplane",
	"car",
	"calculator",
	"ames",
	"printer",
	"beer",
	"coffee",
	"drumstick",
	"food",
	"bank",
	"hourglass",
	"money-alt",
	"open-folder",
	"pdf",
	"pets",
	"privacy",
	"superhero",
	"superhero-alt",
	"edit-page",
	"fullscreen-alt",
	"fullscreen-exit-alt",
];

/**
 * Dashicon Icon Picker
 *
 * @param buttonLabel
 * @param buttonClasses
 * @param formRegister
 * @returns {JSX.Element}
 * @constructor
 */
export default function IconPicker({
	buttonClasses,
	register,
	modelIcon,
	setValue,
}) {
	const defaultIcon = "dashicons-admin-post";

	const [offsetTop, setOffsetTop] = useState(0);
	const [offsetLeft, setOffsetLeft] = useState(0);
	const [icon, setIcon] = useState(modelIcon || defaultIcon);

	/**
	 * Handle button click event
	 * @param event
	 */
	function clickHandler(event) {
		const button = $(event.target);
		createPopup(button, button.offset().top, button.offset().left);
	}

	/**
	 * Set icon back to default and update form value
	 * @param event
	 */
	function removeIconClickHandler(event) {
		event.preventDefault();
		setValue("modelIcon", defaultIcon, { shouldValidate: true });
		setIcon(defaultIcon);
	}

	/**
	 * Open popup
	 */
	function createPopup(button, offsetTop, offsetLeft) {
		var target = $(button.data("target")),
			popup = $(
				'<div class="dashicon-picker-container">' +
					'<div class="dashicon-picker-control"></div>' +
					'<ul class="dashicon-picker-list"></ul>' +
					"</div>"
			).css({
				top: offsetTop,
				left: offsetLeft,
			}),
			list = popup.find(".dashicon-picker-list");

		for (var i in icons) {
			if (icons.hasOwnProperty(i)) {
				list.append(
					'<li data-icon="' +
						icons[i] +
						'"><a href="#" title="' +
						icons[i] +
						'"><span class="dashicons dashicons-' +
						icons[i] +
						'"></span></a></li>'
				);
			}
		}

		$("a", list).on("click", function (e) {
			e.preventDefault();
			var title = $(this).attr("title");
			target.val("dashicons-" + title);
			setIcon(target.val());
			setValue("modelIcon", target.val(), { shouldValidate: true });
			removePopup();
		});

		var control = popup.find(".dashicon-picker-control");

		control.html(
			'<a data-direction="back" href="#">' +
				'<span class="dashicons dashicons-arrow-left-alt2"></span></a>' +
				'<input type="text" class="dashicon-popup-search" placeholder="' +
				__("Search", "atlas-content-modeler") +
				'" />' +
				'<a data-direction="forward" href="#"><span class="dashicons dashicons-arrow-right-alt2"></span></a>'
		);

		$("a", control).on("click", function (e) {
			e.preventDefault();
			if ($(this).data("direction") === "back") {
				$("li:gt(" + (icons.length - 26) + ")", list).prependTo(list);
			} else {
				$("li:lt(25)", list).appendTo(list);
			}
		});

		popup.appendTo("body").show();

		$(".dashicon-popup-search").trigger("focus");

		$("input", control).on("keyup", function (e) {
			var search = $(this).val();
			if (search === "") {
				$("li:lt(25)", list).show();
			} else {
				$("li", list).each(function () {
					if (
						$(this)
							.data("icon")
							.toLowerCase()
							.indexOf(search.toLowerCase()) !== -1
					) {
						$(this).show();
					} else {
						$(this).hide();
					}
				});
			}
		});

		$(document).on("mouseup.dashicons-picker", function (e) {
			if (!popup.is(e.target) && popup.has(e.target).length === 0) {
				removePopup();
			}
		});
	}

	/**
	 * Remove popup
	 */
	function removePopup() {
		$(".default-icon-btn").trigger("focus");
		$(".dashicon-picker-container").remove();
		$(document).off(".dashicons-picker");
	}

	return (
		<>
			<input
				className="hidden"
				id="model_icon"
				name="model_icon"
				type="text"
				defaultValue={modelIcon || defaultIcon}
				ref={register}
			/>

			<input
				className={`dashicons-picker w-50 mb-0 ${buttonClasses}`}
				type="button"
				value={
					icon !== defaultIcon
						? __("Change Icon", "atlas-content-modeler")
						: __("Choose Icon", "atlas-content-modeler")
				}
				data-target="#model_icon"
				onClick={(e) => clickHandler(e)}
			/>

			{icon && (
				<span
					onClick={() => {
						$(".dashicons-picker").click();
					}}
					className={`p-3 ms-2 dashicons ${icon}`}
				/>
			)}

			{icon !== defaultIcon && (
				<div>
					<button
						className="btn btn-link p-0 default-icon-btn"
						onClick={removeIconClickHandler}
					>
						{__("Use Default Icon", "atlas-content-modeler")}
					</button>
				</div>
			)}
		</>
	);
}