if (!window.registerBlockType) {
    window.registerBlockType = wp.blocks.registerBlockType;
}

const { InspectorControls } = wp.blockEditor;
const { PanelBody, ColorPicker, TextControl, SelectControl } = wp.components;
const { createElement } = wp.element;
const { __ } = wp.i18n;

registerBlockType('blocks/gutenberg-no-blocks', {
    title: 'Upsell/Downsell No Button',
    icon: 'no',
    category: 'common',
    attributes: {
        buttonTextNo: {
            type: 'string',
            default: 'No, I let go of this fantastic opportunity',
        },
        buttonBgColorNo: {
            type: 'string',
            default: '#bebebe',
        },
        buttonTextColorNo: {
            type: 'string',
            default: '#100000',
        },
        buttonWidthNo: {
            type: 'number',
            default: 100,
        },
        buttonHeightNo: {
            type: 'number',
            default: 40,
        },
        buttonAlignmentHorizontalNo: {
            type: 'string',
            default: 'center',
        },
        buttonAlignmentVerticalNo: {
            type: 'string',
            default: 'middle',
        },
        textAlignNo: {
            type: 'string',
            default: 'center',
        },
        containerHeightNo: {
            type: 'number',
            default: 200,
        },
        fontSizeNo: {
            type: 'number',
            default: 16,
        },
        fontWeightNo: {
            type: 'number',
            default: 400,
        },
    },
    edit({ attributes, setAttributes }) {
        const {
            buttonTextNo,
            buttonBgColorNo,
            buttonTextColorNo,
            buttonHeightNo,
            buttonAlignmentHorizontalNo,
            buttonAlignmentVerticalNo,
            textAlignNo,
            containerHeightNo,
            fontSizeNo,
            fontWeightNo,
        } = attributes;

        const onChangeBgColorNo = (newColor) => {
            setAttributes({ buttonBgColorNo: newColor });
        };

        const onChangeTextColorNo = (newColor) => {
            setAttributes({ buttonTextColorNo: newColor });
        };

        const onChangeWidthNo = (newWidth) => {
            setAttributes({ buttonWidthNo: parseInt(newWidth, 10) });
        };

        const onChangeHeightNo = (newHeight) => {
            setAttributes({ buttonHeightNo: parseInt(newHeight, 10) });
        };

        const onChangeAlignmentHorizontalNo = (newAlignment) => {
            setAttributes({ buttonAlignmentHorizontalNo: newAlignment });
        };

        const onChangeAlignmentVerticalNo = (newAlignment) => {
            setAttributes({ buttonAlignmentVerticalNo: newAlignment });
        };

        const onChangeTextAlignmentNo = (newAlignment) => {
            setAttributes({ textAlignNo: newAlignment });
        };

        const onChangeContainerHeightNo = (newHeight) => {
            setAttributes({ containerHeightNo: parseInt(newHeight, 10) });
        };

        const onChangeFontSizeNo = (newSize) => {
            setAttributes({ fontSizeNo: parseInt(newSize, 10) });
        };

        const onChangeFontWeightNo = (newWeight) => {
            setAttributes({ fontWeightNo: parseInt(newWeight, 10) });
        };

        return (
            createElement('div', {
                style: {
                    height: containerHeightNo + 'px',
                    display: 'flex',
                    justifyContent: buttonAlignmentHorizontalNo,
                    alignItems:
                        buttonAlignmentVerticalNo === 'top'
                            ? 'flex-start'
                            : buttonAlignmentVerticalNo === 'bottom'
                            ? 'flex-end'
                            : 'center',
                },
            },
                createElement(InspectorControls, {},
                    createElement(PanelBody, { title: __('Button Text', 'gutenberg-blocks') },
                        createElement(TextControl, {
                            label: __('Button Text', 'gutenberg-blocks'),
                            value: buttonTextNo,
                            onChange: (newText) => setAttributes({ buttonTextNo: newText }),
                            help: __('Enter the text that will appear on the button', 'gutenberg-blocks'),
                        })
                    ),
                    createElement(PanelBody, { title: __('Background Color', 'gutenberg-blocks') },
                        createElement(ColorPicker, {
                            color: buttonBgColorNo,
                            onChangeComplete: (color) => onChangeBgColorNo(color.hex),
                            disableAlpha: true,
                        })
                    ),
                    createElement(PanelBody, { title: __('Text Color', 'gutenberg-blocks') },
                        createElement(ColorPicker, {
                            color: buttonTextColorNo,
                            onChangeComplete: (color) => onChangeTextColorNo(color.hex),
                            disableAlpha: true,
                        })
                    ),
                    createElement(PanelBody, { title: __('Alignment Settings', 'gutenberg-blocks') },
                        createElement(SelectControl, {
                            label: __('Horizontal Alignment', 'gutenberg-blocks'),
                            value: buttonAlignmentHorizontalNo,
                            options: [
                                { label: __('Left', 'gutenberg-blocks'), value: 'flex-start' },
                                { label: __('Center', 'gutenberg-blocks'), value: 'center' },
                                { label: __('Right', 'gutenberg-blocks'), value: 'flex-end' },
                            ],
                            onChange: onChangeAlignmentHorizontalNo,
                        }),
                        createElement(SelectControl, {
                            label: __('Vertical Alignment', 'gutenberg-blocks'),
                            value: buttonAlignmentVerticalNo,
                            options: [
                                { label: __('Top', 'gutenberg-blocks'), value: 'top' },
                                { label: __('Middle', 'gutenberg-blocks'), value: 'middle' },
                                { label: __('Bottom', 'gutenberg-blocks'), value: 'bottom' },
                            ],
                            onChange: onChangeAlignmentVerticalNo,
                        }),
                        createElement(SelectControl, {
                            label: __('Text Alignment', 'gutenberg-blocks'),
                            value: textAlignNo,
                            options: [
                                { label: __('Left', 'gutenberg-blocks'), value: 'left' },
                                { label: __('Center', 'gutenberg-blocks'), value: 'center' },
                                { label: __('Right', 'gutenberg-blocks'), value: 'right' },
                            ],
                            onChange: onChangeTextAlignmentNo,
                        })
                    ),
                    createElement(PanelBody, { title: __('Typography Settings', 'gutenberg-blocks') },
                        createElement(TextControl, {
                            label: __('Font Size (px)', 'gutenberg-blocks'),
                            value: fontSizeNo,
                            onChange: onChangeFontSizeNo,
                            type: 'number',
                            step: '1',
                        }),
                        createElement(TextControl, {
                            label: __('Font Weight', 'gutenberg-blocks'),
                            value: fontWeightNo,
                            onChange: onChangeFontWeightNo,
                            type: 'number',
                            step: '100',
                        })
                    ),
                    createElement(PanelBody, { title: __('Container Height (px)', 'gutenberg-blocks') },
                        createElement(TextControl, {
                            label: __('Container Height (px)', 'gutenberg-blocks'),
                            value: containerHeightNo,
                            onChange: onChangeContainerHeightNo,
                            type: 'number',
                            step: '1',
                        })
                    )
                ),
                createElement('div', {
                    style: {
                        border: '2px dashed #ccc',
                        padding: '10px',
                        borderRadius: '4px',
                        textAlign: 'center',
                        backgroundColor: '#f9f9f9',
                        width: '100%'
                    }
                },
                    createElement('div', {
                        style: { marginBottom: '10px', fontSize: '12px', color: '#666' }
                    }, __('Click the input below to edit button text:', 'gutenberg-blocks')),
                    createElement('input', {
                        type: 'text',
                        value: buttonTextNo,
                        onChange: (event) => setAttributes({ buttonTextNo: event.target.value }),
                        placeholder: __('Enter button text', 'gutenberg-blocks'),
                        style: {
                            backgroundColor: buttonBgColorNo,
                            color: buttonTextColorNo,
                            padding: '8px',
                            border: '2px solid #0073aa',
                            borderRadius: '4px',
                            width: '100%',
                            display: 'block',
                            margin: '0 auto',
                            fontSize: fontSizeNo + 'px',
                            height: buttonHeightNo + 'px',
                            textAlign: textAlignNo,
                            fontWeight: fontWeightNo,
                            outline: 'none'
                        }
                    })
                )
            )
        );
    },
    save({ attributes }) {
        const { buttonTextNo, buttonBgColorNo, buttonTextColorNo, fontSizeNo, fontWeightNo } = attributes;

        return (
            createElement('button', {
                style: {
                    backgroundColor: buttonBgColorNo,
                    color: buttonTextColorNo,
                    padding: '8px 16px',
                    width: '100%',
                    fontSize: fontSizeNo + 'px',
                    fontWeight: fontWeightNo,
                },
            }, buttonTextNo)
        );
    },
});
