/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/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/packages/packages-block-editor/#useBlockProps
 */
import { useBlockProps, InspectorControls, RichText } from '@wordpress/block-editor';

/**
 * React components that appear in the Inspector.
 *
 * @see https://developer.wordpress.org/block-editor/components/
 */
import { PanelBody, TextControl, TextareaControl } from '@wordpress/components';

/**
 * 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/developers/block-api/block-edit-save/#edit
 *
 * @param {Object}   props               Properties passed to the function.
 * @param {Object}   props.attributes    Available block attributes.
 * @param {Function} props.setAttributes Function that updates individual attributes.
 *
 * @return {WPElement} Element to render.
 */
export default function Edit({ attributes, setAttributes }) {
    const {
        heading,
        description,
        badgeText,
        bigNumber,
        btnHomeLabel,
        btnBooksLabel,
        btnContactLabel,
    } = attributes;

    return (
        <div {...useBlockProps()}>
            <InspectorControls>
                <PanelBody title={__('Content Settings', 'author-website-templates')}>
                    <TextControl
                        label={__('Big Number (404)', 'author-website-templates')}
                        value={bigNumber}
                        onChange={(val) => setAttributes({ bigNumber: val })}
                    />
                    <TextControl
                        label={__('Badge Text', 'author-website-templates')}
                        value={badgeText}
                        onChange={(val) => setAttributes({ badgeText: val })}
                    />
                    <TextControl
                        label={__('Heading', 'author-website-templates')}
                        value={heading}
                        onChange={(val) => setAttributes({ heading: val })}
                    />
                    <TextareaControl
                        label={__('Description', 'author-website-templates')}
                        value={description}
                        onChange={(val) => setAttributes({ description: val })}
                    />
                </PanelBody>
                <PanelBody title={__('Button Labels', 'author-website-templates')}>
                    <TextControl
                        label={__('Home Button Label', 'author-website-templates')}
                        value={btnHomeLabel}
                        onChange={(val) => setAttributes({ btnHomeLabel: val })}
                    />
                    <TextControl
                        label={__('Books Button Label', 'author-website-templates')}
                        value={btnBooksLabel}
                        onChange={(val) => setAttributes({ btnBooksLabel: val })}
                    />
                    <TextControl
                        label={__('Contact Button Label', 'author-website-templates')}
                        value={btnContactLabel}
                        onChange={(val) => setAttributes({ btnContactLabel: val })}
                    />
                </PanelBody>
            </InspectorControls>

            <div className="awt-404-preview p-8 text-center border border-dashed border-gray-300 rounded">
                <h2 className="text-3xl font-bold mb-4">{bigNumber}</h2>
                <span className="inline-block bg-yellow-200 px-3 py-1 rounded text-sm font-bold mb-4">{badgeText}</span>
                <h3 className="text-xl font-bold mb-2">{heading}</h3>
                <p className="mb-6">{description}</p>
                <div className="flex gap-2 justify-center">
                    <button className="px-4 py-2 bg-blue-500 text-white rounded">{btnHomeLabel}</button>
                    <button className="px-4 py-2 bg-gray-200 rounded">{btnBooksLabel}</button>
                </div>
                <p className="mt-4 text-xs text-gray-400">
                    {__('This is a preview. The actual design will be rendered on the frontend.', 'author-website-templates')}
                </p>
            </div>
        </div>
    );
}
