import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save({ attributes }) {
    const {
        heading,
        description,
        disclaimer,
        buttonText,
        buttonUrl,
        placeholderText,
        useShortcode,
        customShortcode,
        sectionBgColor,
        headingColor,
        textColor,
        inputBgColor,
        btnBgColor,
        btnTextColor,
        btnHoverBgColor,
        btnHoverTextColor,
        blockId
    } = attributes;

    const hoverStyles = `
        .block-${blockId} .btn:hover {
            ${btnHoverBgColor ? `background-color: ${btnHoverBgColor} !important;` : ''}
            ${btnHoverTextColor ? `color: ${btnHoverTextColor} !important;` : ''}
        }
    `;

    const blockProps = useBlockProps.save({
        className: `alignfull block-${blockId} py-24 ${sectionBgColor ? '' : 'bg-accent'} ${sectionBgColor ? '' : 'text-white'}`,
        style: {
            backgroundColor: sectionBgColor || undefined,
        }
    });

    return (
        <section {...blockProps} id="newsletter">
            {(btnHoverBgColor || btnHoverTextColor) && (
                <style dangerouslySetInnerHTML={{ __html: hoverStyles }} />
            )}

            <div className="max-w-2xl mx-auto px-6 text-center">

                <svg className="text-4xl text-white mx-auto w-12 h-12 opacity-80" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M568.4 37.7C578.2 34.2 589 36.7 596.4 44C603.8 51.3 606.2 62.2 602.7 72L424.7 568.9C419.7 582.8 406.6 592 391.9 592C377.7 592 364.9 583.4 359.6 570.3L295.4 412.3C290.9 401.3 292.9 388.7 300.6 379.7L395.1 267.3C400.2 261.2 399.8 252.3 394.2 246.7C388.6 241.1 379.6 240.7 373.6 245.8L261.2 340.1C252.1 347.7 239.6 349.7 228.6 345.3L70.1 280.8C57 275.5 48.4 262.7 48.4 248.5C48.4 233.8 57.6 220.7 71.5 215.7L568.4 37.7z" /></svg>

                <RichText.Content
                    tagName="h2"
                    className="text-3xl font-serif font-bold mb-4"
                    value={heading}
                    style={{ color: headingColor || undefined }}
                />

                <RichText.Content
                    tagName="p"
                    className={`mb-8 text-lg ${textColor ? '' : 'text-orange-100'}`}
                    value={description}
                    style={{ color: textColor || undefined }}
                />

                {useShortcode ? (
                    <div className="newsletter-shortcode-container">
                        <div dangerouslySetInnerHTML={{ __html: customShortcode }} />
                    </div>
                ) : (
                    <form className="flex flex-col sm:flex-row gap-3">
                        <input
                            type="email"
                            placeholder={placeholderText}
                            className="w-full px-6 py-4 rounded-lg text-primary focus:outline-none focus:ring-4 focus:ring-orange-400"
                            style={{ backgroundColor: inputBgColor || undefined }}
                        />
                        <button
                            className="px-8 py-4 bg-primary text-white font-bold rounded-lg hover:bg-gray-900 transition whitespace-nowrap btn"
                            style={{
                                backgroundColor: btnBgColor || undefined,
                                color: btnTextColor || undefined
                            }}
                        >
                            <a href={buttonUrl} style={{ color: 'inherit', textDecoration: 'none' }}>
                                {buttonText}
                            </a>
                        </button>
                    </form>
                )}

                <RichText.Content
                    tagName="p"
                    className={`text-xs mt-4 ${textColor ? '' : 'text-orange-200'}`}
                    value={disclaimer}
                    style={{ color: textColor || undefined }}
                />
            </div>
        </section>
    );
}
