import { InspectorControls } from '@wordpress/block-editor';
import { registerBlockType } from '@wordpress/blocks';
import { Button, PanelBody } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { useState } from '@wordpress/element';
import { applyFilters } from '@wordpress/hooks';
import { __ } from '@wordpress/i18n';

const { navigator } = window;

let copiedTimeout;

function ShortcodeRender(props) {
	const [copied, setCopied] = useState(false);

	return (
		<div className="vpf-layout-shortcode-copy">
			<strong>{props.label}:</strong>
			<div>
				<pre>{props.content}</pre>
				<Button
					onClick={() => {
						navigator.clipboard
							.writeText(props.content)
							.then(() => {
								setCopied(true);

								clearTimeout(copiedTimeout);

								copiedTimeout = setTimeout(() => {
									setCopied(false);
								}, 450);
							});
					}}
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						width="16"
						height="16"
						fill="currentColor"
						viewBox="0 0 16 16"
					>
						<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
						<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
					</svg>
					{copied ? (
						<div className="vpf-layout-shortcode-copied">
							{__('Copied!', 'visual-portfolio')}
						</div>
					) : null}
				</Button>
			</div>
		</div>
	);
}

/**
 * Layouts Editor block
 *
 * @param props
 */
function LayoutsEditorBlock(props) {
	const { clientId } = props;

	const [additionalShortcodes, setAdditionalShortcodes] = useState(false);

	const { postId, blockData, VisualPortfolioBlockEdit } = useSelect(
		(select) => {
			const { getBlockData } = select(
				'visual-portfolio/saved-layout-data'
			);
			const { getCurrentPostId } = select('core/editor');
			const { getBlockType } = select('core/blocks');

			return {
				postId: getCurrentPostId(),
				blockData: getBlockData(),
				VisualPortfolioBlockEdit:
					getBlockType('visual-portfolio/block')?.edit ||
					(() => null),
			};
		}
	);

	const { updateBlockData } = useDispatch(
		'visual-portfolio/saved-layout-data'
	);

	let shortcodes = [
		{
			label: __('This Saved Layout', 'visual-portfolio'),
			content: `[visual_portfolio id="${postId}"]`,
		},
		{
			label: __('Filter', 'visual-portfolio'),
			content: `[visual_portfolio_filter id="${postId}" type="minimal" align="center" show_count="false" text_all="All"]`,
			isOptional: true,
		},
		{
			label: __('Sort', 'visual-portfolio'),
			content: `[visual_portfolio_sort id="${postId}" type="minimal" align="center"]`,
			isOptional: true,
		},
	];

	shortcodes = applyFilters(
		'vpf.layouts-editor.shortcodes-list',
		shortcodes,
		{ props, postId, blockData, updateBlockData, VisualPortfolioBlockEdit }
	);

	return (
		<>
			<InspectorControls>
				<PanelBody
					title={__('Shortcodes', 'visual-portfolio')}
					scrollAfterOpen
				>
					<p>
						{__(
							'To output this saved layout and its components you can use the following shortcodes:'
						)}
					</p>
					{shortcodes.map((data) => {
						if (data.isOptional) {
							return null;
						}

						return (
							<ShortcodeRender
								key={`shortcode-${data.label}`}
								{...data}
							/>
						);
					})}
					{additionalShortcodes ? (
						<>
							{shortcodes.map((data) => {
								if (!data.isOptional) {
									return null;
								}

								return (
									<ShortcodeRender
										key={`shortcode-${data.label}`}
										{...data}
									/>
								);
							})}
							{applyFilters(
								'vpf.layouts-editor.shortcodes',
								'',
								this
							)}
						</>
					) : (
						<Button
							isLink
							onClick={() => {
								setAdditionalShortcodes(!additionalShortcodes);
							}}
						>
							{__(
								'Show Additional Shortcodes',
								'visual-portfolio'
							)}
						</Button>
					)}
				</PanelBody>
			</InspectorControls>
			<VisualPortfolioBlockEdit
				attributes={{
					...blockData,
					block_id: blockData.id || clientId,
				}}
				setAttributes={(data) => {
					updateBlockData(data);
				}}
				clientId={clientId}
			/>
		</>
	);
}

registerBlockType('visual-portfolio/saved-editor', {
	icon: {
		foreground: '#2540CC',
		src: (
			<svg
				width="20"
				height="20"
				viewBox="0 0 20 20"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
			>
				<mask
					id="mask0"
					// eslint-disable-next-line react/no-unknown-property
					mask-type="alpha"
					maskUnits="userSpaceOnUse"
					x="9"
					y="8"
					width="5"
					height="6"
				>
					<path
						d="M11.1409 14L13.0565 8.49994H11.2789L9.55397 14H11.1409Z"
						fill="url(#paint0_linear)"
					/>
				</mask>
				<g mask="url(#mask0)">
					<path
						d="M11.1409 14L13.0565 8.49994H11.2789L9.55397 14H11.1409Z"
						fill="currentColor"
					/>
				</g>
				<path
					d="M8.90795 14L6.9923 8.49994H8.76989L10.4948 14H8.90795Z"
					fill="currentColor"
				/>
				<path
					d="M19 16.2222C19 16.6937 18.8104 17.1459 18.4728 17.4793C18.1352 17.8127 17.6774 18 17.2 18H2.8C2.32261 18 1.86477 17.8127 1.52721 17.4793C1.18964 17.1459 1 16.6937 1 16.2222V3.77778C1 3.30628 1.18964 2.8541 1.52721 2.5207C1.86477 2.1873 2.32261 2 2.8 2H7.3L9.1 4.66667H17.2C17.6774 4.66667 18.1352 4.85397 18.4728 5.18737C18.8104 5.52076 19 5.97295 19 6.44444V16.2222Z"
					stroke="currentColor"
					strokeWidth="1.5"
					strokeLinecap="round"
					strokeLinejoin="round"
					fill="transparent"
				/>
				<defs>
					<linearGradient
						id="paint0_linear"
						x1="12.191"
						y1="8.49994"
						x2="7.44436"
						y2="15.1301"
						gradientUnits="userSpaceOnUse"
					>
						<stop />
						<stop offset="1" stopOpacity="0" />
					</linearGradient>
				</defs>
			</svg>
		),
	},
	edit: LayoutsEditorBlock,
	save() {
		return null;
	},
});