import { __ } from '@wordpress/i18n';
import { useEntityProp } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import React, { useState } from 'react';
import { Button, TextControl } from '@wordpress/components';
import WEVCRadioControl from './WEVCRadio';
import { reset } from '@wordpress/icons';

import SidebarCollapsible from './SidebarCollapsible';

// export default WEVCPanel = () => {
//export default function WEVCPanel( { settings } ) {
export default function WEVCConfigure(props) {
	// put defaults in props!
	// get set state locally
	const postType = useSelect(
		(select) => select('core/editor').getCurrentPostType(),
		[]
	);

	// Get the value of meta and a function for updating meta from useEntityProp.
	const [meta, setMeta] = useEntityProp('postType', postType, 'meta');

	const metaAdvancedWidth = 'width';
	const metaAdvancedHeight = 'height';
	const metaAdvancedPosition = 'pin';
	const metaAdvanced = 'wevideopopup_advanced';
	const metaClass = 'wevideopopupClass';

	// YUK! - functional component would alow us to squirrel this away better
	const getAdvanced = (key) => {
		try {
			const result = JSON.parse(meta[metaAdvanced]);
			return result[key] || '';
		} catch {
			return '';
		}
	};
	// MORE YUK!
	const setAdvanced = function (key, value) {
		let advanced;
		if (!meta[metaAdvanced]) {
			advanced = {};
		} else {
			try {
				advanced = JSON.parse(meta[metaAdvanced]);
			} catch {
				advanced = {};
				return null;
			}
		}
		advanced[key] = value;
		setPostMeta(metaAdvanced, JSON.stringify(advanced));
	};

	// Modified setAdvanced function which resets everything in metaAdvance
	const resetAdvanced = function () {
		let advanced;
		if (!meta[metaAdvanced]) {
			advanced = {};
		} else {
			try {
				advanced = JSON.parse(meta[metaAdvanced]);
			} catch {
				advanced = {};
				return null;
			}
		}

		advanced[metaAdvancedWidth] = props.defaultWidth;
		advanced[metaAdvancedHeight] = props.defaultHeight;
		advanced[metaAdvancedPosition] = props.defaultPosition;

		setPostMeta(metaAdvanced, JSON.stringify(advanced));
	};

	/**
	 * A helper function for getting post meta by key.
	 *
	 * @param {string} key - The meta key to read.
	 * @return {*} - Meta value.
	 */
	const getPostMeta = (key) => meta[key] || '';
	/**
	 * A helper function for updating post meta that accepts a meta key and meta
	 * value rather than entirely new meta object.
	 *
	 * Important! Don't forget to register_post_meta (see ../index.php).
	 *
	 * @param {string} key   - The meta key to update.
	 * @param {*}      value - The meta value to update.
	 */
	const setPostMeta = (key, value) =>
		setMeta({
			...meta,
			[key]: value,
		});
	// state - either from meta or from props if not set
	const [selectedWidth, setSelectedWidth] = useState(
		getAdvanced(metaAdvancedWidth) !== ''
			? getAdvanced(metaAdvancedWidth)
			: props.defaultWidth
	);
	const [selectedHeight, setSelectedHeight] = useState(
		getAdvanced(metaAdvancedHeight) !== ''
			? getAdvanced(metaAdvancedHeight)
			: props.defaultHeight
	);
	const [selectedPosition, setSelectedPosition] = useState(
		getAdvanced(metaAdvancedPosition) !== ''
			? getAdvanced(metaAdvancedPosition)
			: props.defaultPosition
	);
	const [selectedClass, setSelectedClass] = useState(
		getPostMeta(metaClass) !== ''
			? getPostMeta(metaClass)
			: props.defaultClass
	);

	const revert = () => {
		// trigger handlers with defaults
		setSelectedWidth(props.defaultWidth);
		setSelectedHeight(props.defaultHeight);
		setSelectedPosition(props.defaultPosition);

		handleClass(props.defaultClass);

		resetAdvanced();
	};
	// convieneince method to check if the current settings are the defaults
	const isDefault = () => {
		return (
			props.defaultWidth === selectedWidth &&
			props.defaultHeight === selectedHeight &&
			props.defaultPosition === selectedPosition &&
			props.defaultClass === selectedClass
		);
	};
	const handleWidth = (value) => {
		setSelectedWidth(value);
		setAdvanced(metaAdvancedWidth, parseInt(value));
	};
	const handleHeight = (value) => {
		setSelectedHeight(value);
		setAdvanced(metaAdvancedHeight, parseInt(value));
	};
	const handlePosition = (value) => {
		setSelectedPosition(value);
		setAdvanced(metaAdvancedPosition, value);
	};
	const handleClass = (value) => {
		setSelectedClass(value);
		setPostMeta(metaClass, value);
	};

	return (
		<SidebarCollapsible
			title={__('Configure', 'video-callout')}
			icon={'clock'}
		>
			{/* <Heading size={2}><Dashicon icon="admin-settings" /> Configure</Heading> */}
			<TextControl
				label={__('Width', 'video-callout')}
				value={selectedWidth}
				type="number"
				onChange={handleWidth}
				help={__('Display width of video in pixels', 'video-callout')}
				name="wevideopopupWidth"
			/>
			<TextControl
				label={__('Height', 'video-callout')}
				value={selectedHeight}
				type="number"
				onChange={handleHeight}
				help={__('Display height of video in pixels', 'video-callout')}
				name="wevideopopupHeight"
			/>
			<div className="wevp-pin">
				<WEVCRadioControl
					label={__('Position', 'video-callout')}
					help={__('Current position') + ': ' + getAdvanced('pin')}
					selected={selectedPosition}
					name="wevideopopup_pin"
					options={[
						{ label: 'top-left', value: 'top-left' },
						{ label: 'top-centre', value: 'top-centre' },
						{ label: 'top-right', value: 'top-right' },
						{ label: 'middle-left', value: 'middle-left' },
						{ label: 'middle-centre', value: 'middle-centre' },
						{ label: 'middle-right', value: 'middle-right' },
						{ label: 'bottom-left', value: 'bottom-left' },
						{ label: 'bottom-centre', value: 'bottom-centre' },
						{ label: 'bottom-right', value: 'bottom-right' },
					]}
					onChange={handlePosition}
				/>
			</div>
			<TextControl
				name="wevideopopupClass"
				label={__('CSS class', 'video-callout')}
				value={selectedClass}
				onChange={handleClass}
				help={__(
					'Optional css classes to apply to callout.',
					'video-callout'
				)}
			/>
			{!isDefault() && (
				<Button isSmall variant="primary" icon={reset} onClick={revert}>
					{__('Revert configuration to defaults', 'video-callout')}
				</Button>
			)}
		</SidebarCollapsible>
	);
}