import {useState, useEffect} from '@wordpress/element';
import {__, _x} from '@wordpress/i18n';
import PositioningField from '../../../design/form-fields/PositioningField';
import Toggle from '../../../design/components/Toggle';
import Button from '../../../design/components/Button';
import CloseIcon from '../../../design/icons/CloseIcon';

const ShortcodeBuilder = ( {context, closeModal, setModalTitle} ) => {
	const {entityType, entityId} = context;

	// Singular form ('ad', 'group', 'placement')
	const typeSingular = entityType.endsWith( 's' ) ? entityType.slice( 0, - 1 ) : entityType;

	const [alignment, setAlignment] = useState( 'none' );
	const [disableTracking, setDisableTracking] = useState( false );
	const [copied, setCopied] = useState( false );

	useEffect( () => {
		setModalTitle( __( 'Generate Shortcode', 'adpresso' ) );
	}, [setModalTitle] );

	// -------------------------------------------------------------------------
	// Mock the field object from our PHP structure.
	// -------------------------------------------------------------------------
	const positioningFieldMock = {
		id:                  'shortcode_alignment',
		label:               __( 'Positioning & Layout', 'adpresso' ),
		positioning_options: {
			'default': {
				title:       __( 'Theme Default', 'adpresso' ),
				description: __( 'Inherits alignment from your active website theme.', 'adpresso' ),
				options:     {
					'none': {title: __( 'None', 'adpresso' )}
				}
			},
			'float':   {
				title:       _x( 'Float', 'Layout options "Text Flow" heading', 'adpresso' ),
				description: __( 'The ad is embedded into the text, allowing content to wrap around it.', 'adpresso' ),
				options:     {
					'left_float':  {title: __( 'Left', 'adpresso' )},
					'right_float': {title: __( 'Right', 'adpresso' )}
				}
			},
			'block':   {
				title:       _x( 'Block', 'Layout options "Text Flow" heading', 'adpresso' ),
				description: __( 'The ad stands alone. The following content starts below.', 'adpresso' ),
				options:     {
					'left_nofloat':   {title: __( 'Left', 'adpresso' )},
					'center_nofloat': {title: __( 'Center', 'adpresso' )},
					'right_nofloat':  {title: __( 'Right', 'adpresso' )}
				}
			}
		}
	};

	// -------------------------------------------------------------------------
	// 2. Shortcode Live-Generation
	// -------------------------------------------------------------------------
	let shortcode = `[adpresso_${typeSingular} id="${entityId}"`;
	if ( alignment !== 'none' ) {
		shortcode += ` align="${alignment}"`;
	}
	if ( disableTracking ) {
		shortcode += ` tracking="false"`;
	}
	shortcode += `]`;

	const handleCopy = () => {
		navigator.clipboard.writeText( shortcode );
		setCopied( true );
		setTimeout( () => setCopied( false ), 2000 );
	};

	return (
		<div className="adpresso-modal-content adpresso-shortcode-builder">
			<div className="adpresso-modal-header">
				<div className="adpresso-modal-navigation">
					<Button
						icon={<CloseIcon/>}
						variant="primary"
						className="adpresso-square-btn adpresso-color-button-secondary-invert"
						label={__( 'Close', 'adpresso' )}
						onClick={closeModal}
					/>
				</div>
			</div>
			<div>
				<p>
					{__( 'Copy this shortcode and paste it anywhere in your content.', 'adpresso' )}
				</p>
				<code>
					{shortcode}
				</code>
				<div style={{marginTop: '20px'}}>
					<Button variant="primary" className="adpresso-btn adpresso-btn-action" onClick={handleCopy}>
						{copied ? __( 'Copied to clipboard!', 'adpresso' ) : __( 'Copy Shortcode', 'adpresso' )}
					</Button>
				</div>
			</div>

			{/* Options Panel */}
			<div>
				<div style={{marginBottom: '20px'}}>
					<PositioningField
						field={positioningFieldMock}
						value={alignment}
						onChange={setAlignment}
					/>
				</div>
				{/*<Toggle*/}
				{/*	label={__( 'Disable Tracking', 'adpresso' )}*/}
				{/*	enabled={disableTracking}*/}
				{/*	onChange={( val ) => setDisableTracking( val )}*/}
				{/*	help={__( 'If enabled, views and clicks for this specific shortcode will not be tracked.', 'adpresso' )}*/}
				{/*/>*/}
			</div>

			{/* Footer */}
			<div className="adpresso-modal-footer">
				<div className="adpresso-footer-left">
				</div>
				<div className="adpresso-footer-center">

				</div>
				<div className="adpresso-footer-right">
					<Button variant="primary" className="adpresso-btn adpresso-btn-action" onClick={closeModal}>
						{__( 'Close', 'adpresso' )}
					</Button>
				</div>
			</div>
		</div>
	);
};

export default ShortcodeBuilder;