/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps, RichText, BlockControls, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl, SelectControl, Card, CardHeader, CardBody } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
//import psdmImage from '../images/peach100.png';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';


/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {WPElement} Element to render.
 */
export default function Edit( { attributes, setAttributes } ) {
	const { psdmId, psdmType, psdmLivePreview, psdmButtonId, psdmShowId } = attributes;
	const pages = useSelect( ( select ) => {
		return select( 'core' ).getEntityRecords( 'postType', 'psdmcontent' )
	} );
	const {meta} = useSelect( ( select ) => select('core').getEntityRecord( 'postType', 'psdmcontent', psdmId ) ) || {};
	let options = [];
	let psdmShowMore = false;
	if ( psdmId !== 0) {
		psdmShowMore = true;
	}
	const onChangeContent = ( newContent ) => {
		setAttributes( { psdmId: parseInt( newContent ) } );
		setAttributes( { psdmLivePreview: false } );
		{ { psdmId === 0 ? setAttributes( { psdmShowMore: false } ) : setAttributes( { psdmShowMore: true } ) } }
	}
	const onChangeType = ( newType ) => {
		setAttributes( { psdmType:  newType } );
		{ { newType === 'button' ? setAttributes( { psdmShowId: true } ) : setAttributes( { psdmShowId: false } ) } }
	}
	const onChangeButtonId = ( newButtonId ) => {
		setAttributes( { psdmButtonId: newButtonId } );
	}
	if( pages ) {
		options.push( { value: 0, label: 'Select a Download Magnet post' } )
		pages.forEach( ( page ) => {
			options.push( { value : page.id, label : page.title.rendered } )
		})
	} else {
		options.push( { value: 0, label: 'Loading...' } )
	}
	return (
		<div { ...useBlockProps() }>
			<InspectorControls>
				<PanelBody title={'Download Magnet Setting'}>
					<SelectControl
						className='wp-block-peachysoftware-downloadmagnet-panel-select'
						value={ psdmId }
						options={ options}
						label={'Select a DownloadMagnet post'}
						onChange={ onChangeContent }
						__nextHasNoMarginBottom
					/>
					{ psdmShowMore ? (
						<>
						<SelectControl
							label="Type"
							value={ psdmType }
							options={ [
								{ label: 'Post Default', value: 'post' },
								{ label: 'Popup', value: 'popup' },
								{ label: 'Inline', value: 'inline' },
								{ label: 'Attach to button', value: 'button' },
							] }
							onChange={ onChangeType }
							__nextHasNoMarginBottom
						/>
						{ psdmShowId ? (
							<>
						<TextControl
							label="Attached Button ID"
							value={ psdmButtonId }
							onChange={ onChangeButtonId}
						/>
							</>
						) : ('')
						}
						</>
					) : ('')
					}
				</PanelBody>
			</InspectorControls>

			<BlockControls>
			</BlockControls>
			{ psdmLivePreview ? (
				<>
					<div dangerouslySetInnerHTML={ psdmParsedDay } />
				</>
			) : (
				<>
					<p className={"wp-block-peachysoftware-downloadmagnet-psdmBlockHeader"}>
						<svg width="28" height="28" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" transform="rotate(90)">
							<path d="m50.102 30h49.898v-30h-49.898c-27.668 0-50.102 22.383-50.102 50 0 27.613 22.434 50 50.102 50h49.898v-30h-49.898c-10.902 0-19.738-9.1211-19.738-20s8.8359-20 19.738-20zm30.059-25h14.828v20h-14.828zm0 70h14.828v20h-14.828z"/>
						</svg>

						<b className={"wp-block-peachysoftware-downloadmagnet-psdmBlockText"}>Download Magnet</b>
					</p>
					<SelectControl
						className='wp-block-peachysoftware-downloadmagnet-select'
						value={psdmId}
						options={options}
						onChange={onChangeContent}
						__nextHasNoMarginBottom
					/>
				</>
			)}
		</div>
	);
}

