const { registerBlockType } = wp.blocks;
const { TextControl, SelectControl, PanelBody } = wp.components;
const { InspectorControls, useBlockProps } = wp.blockEditor;

const TEMPLATE_OPTIONS = [
    { label: 'All Reviews', value: 1 },
    { label: 'Reviews with Rating', value: 2 },
    { label: 'Video Reviews', value: 3 }
];

const MEDIA_TYPE_OPTIONS = [
    { label: 'All', value: 'ALL' },
    { label: 'Text', value: 'TEXT' },
    { label: 'Video', value: 'VIDEO' },
    { label: 'Image', value: 'IMAGE' }
];

const SORT_TYPE_OPTIONS = [
    { label: 'Most Relevant', value: 'MOST_RELEVANT' },
    { label: 'Highest Reviews', value: 'HIGHEST_REVIEWS' },
    { label: 'Lowest Reviews', value: 'LOWEST_REVIEWS' },
    { label: 'Recent Reviews', value: 'RECENT_REVIEWS' },
    { label: 'Recent With Min One Review', value: 'RECENT_WITH_MIN_ONE_REVIEW' }
];

const RATING_OPTIONS = [
    { label: 'All', value: 'ALL' },
    { label: '5 Stars', value: '5' },
    { label: '4 Stars', value: '4' },
    { label: '3 Stars', value: '3' },
    { label: '2 Stars', value: '2' },
    { label: '1 Star', value: '1' }
];

registerBlockType('willro/reviews', {
    title: 'Willro Reviews',
    icon: 'star-filled',
    category: 'widgets',
    attributes: {
        template: { type: 'number', default: 1 },
        limit: { type: 'number', default: 10 },
        mediaType: { type: 'string', default: 'ALL' },
        sortType: { type: 'string', default: 'MOST_RELEVANT' },
        rating: { type: 'string', default: 'ALL' }
    },
    edit: function({ attributes, setAttributes }) {
        const blockProps = useBlockProps();

        return wp.element.createElement(
            'div',
            blockProps,
            wp.element.createElement(
                'div',
                { style: { border: '1px solid #e4e7ec', padding: '12px', borderRadius: '6px' } },
                wp.element.createElement('strong', null, 'Willro Reviews'),
                wp.element.createElement('div', { style: { marginTop: '8px', color: '#475467' } }, 'Configure this block from the sidebar settings.')
            ),
            wp.element.createElement(
                InspectorControls,
                null,
                wp.element.createElement(
                    PanelBody,
                    { title: 'Willro Reviews Settings' },
                    wp.element.createElement(SelectControl, {
                        label: 'Template',
                        value: attributes.template,
                        options: TEMPLATE_OPTIONS,
                        onChange: function(value) { setAttributes({ template: parseInt(value) }) }
                    }),
                    wp.element.createElement(SelectControl, {
                        label: 'Media Type',
                        value: attributes.mediaType,
                        options: MEDIA_TYPE_OPTIONS,
                        onChange: function(value) { setAttributes({ mediaType: value }) }
                    }),
                    wp.element.createElement(SelectControl, {
                        label: 'Sort Type',
                        value: attributes.sortType,
                        options: SORT_TYPE_OPTIONS,
                        onChange: function(value) { setAttributes({ sortType: value }) }
                    }),
                    wp.element.createElement(SelectControl, {
                        label: 'Rating',
                        value: attributes.rating,
                        options: RATING_OPTIONS,
                        onChange: function(value) { setAttributes({ rating: value }) }
                    }),
                    wp.element.createElement(TextControl, {
                        label: 'Limit',
                        type: 'number',
                        value: attributes.limit,
                        onChange: function(value) { setAttributes({ limit: parseInt(value) }) }
                    })
                )
            ),
            null
        );
    },
    save: function() { return null; }
});
