import { __ } from "@wordpress/i18n";
import Drawer from "@mui/material/Drawer";
import { Fragment, useState } from "@wordpress/element";
import useChangelogData from "../hooks/useChangelogData";
import {
	Arrow,
	Blog,
	ChangelogIcon,
	CloseIcon,
	Community,
	DocumentationIcon,
	FeatRequest,
	Logo,
	Roadmap,
	SetupWizard,
	Support,
	TechSupport,
	Video,
	WhatsNew,
} from "../icons";

const GetHelpItems = [
	{
		title: __("Documentation", "easy-accordion-free"),
		Icon: DocumentationIcon,
		link: "https://easyaccordion.io/docs/",
	},
	{
		title: __("Technical Support", "easy-accordion-free"),
		Icon: TechSupport,
		link: "https://shapedplugin.com/create-new-ticket/",
	},
	{
		title: __("Setup Wizard", "easy-accordion-free"),
		Icon: SetupWizard,
		link: `${sp_eab_admin_dashboard_localize?.homeUrl}wp-admin/admin.php?page=eap_dashboard#setupwizard`,
	},
	{
		title: __("Public Roadmap", "easy-accordion-free"),
		Icon: Roadmap,
		link: "",
	},
	{
		title: __("Request a Feature", "easy-accordion-free"),
		Icon: FeatRequest,
		link: "https://shapedplugin.com/contact-us/",
	},
	{
		title: __("Video Tutorials", "easy-accordion-free"),
		Icon: Video,
		link: "https://youtu.be/JEv8hP5NvnY?si=-a4iL5GV-NZmo9bI",
	},
	{
		title: __("What's New", "easy-accordion-free"),
		Icon: WhatsNew,
		link: "https://easyaccordion.io/changelog/",
	},
	{
		title: __("Blog: Latest News", "easy-accordion-free"),
		Icon: Blog,
		link: "https://shapedplugin.com/blog/",
	},
	{
		title: __("Join Community", "easy-accordion-free"),
		Icon: Community,
		link: " https://community.shapedplugin.com/",
	},
];

const HeaderItems = () => {
	const [showSidebar, setShowSidebar] = useState(false);

	const toggleDrawer = (newOpen) => () => {
		setShowSidebar(newOpen);
	};
	const changelog = useChangelogData(showSidebar);

	return (
		<div className="sp-eab-admin-dashboard-header">
			<div className="sp-eab-block-setting-header-wrapper sp-d-flex sp-justify-between sp-align-center">
				<div className="sp-eab-admin-dashboard-header-left sp-d-flex sp-align-center sp-gap-10px">
					<Logo />
					<span className="sp-eap-plugin-version">{sp_eab_admin_dashboard_localize?.pluginVersion}</span>
					<button className="sp-eab-header-changelog-btn sp-cursor-pointer" onClick={toggleDrawer(true)}>
						<ChangelogIcon />
					</button>
					<Drawer
						anchor="right"
						open={showSidebar}
						onClose={toggleDrawer(false)}
						slotProps={{
							paper: {
								className: "sp-eab-admin-changelog-wrapper",
							},
						}}
					>
						<div className="sp-eab-changelog-heading sp-d-flex sp-justify-between">
							<p className="sp-eab-changelog-heading-title">Latest Updates - Changelog</p>
							<button
								className="sp-eab-changelog-close-btn sp-d-flex sp-align-center sp-cursor-pointer"
								onClick={toggleDrawer(false)}
							>
								<CloseIcon />
							</button>
						</div>
						<div className="sp-eab-changelog-details" dangerouslySetInnerHTML={{ __html: changelog }}></div>
					</Drawer>
				</div>
				<div className="sp-eab-admin-dashboard-header-right sp-d-flex sp-gap-6px sp-cursor-pointer">
					<Support />
					<span>{__("Get Help", "easy-accordion-free")}</span>
					<div className="sp-eab-help-drop-down sp-d-hidden sp-flex-col">
						{GetHelpItems?.map(({ title, link, Icon }, index) => (
							<Fragment key={index}>
								{link && (
									<a
										href={link}
										target="_blank"
										rel="noopener noreferrer"
										className="sp-eap-support-link sp-d-flex sp-align-center sp-gap-10px"
									>
										<Icon />
										<span>{title}</span>
										<span className="drop-down-arrow">
											<Arrow />
										</span>
									</a>
								)}
							</Fragment>
						))}
					</div>
				</div>
			</div>
		</div>
	);
};

export default HeaderItems;
