/**
 * WPFAQBlock – Gutenberg Editor Controls
 *
 * Injects Inspector Controls into the WPFAQBlock Gutenberg block sidebar.
 *
 * Tabs:
 *   General   – title, search, ordering, behaviour
 *   Selection – FAQ source controls
 *   Design    – icon picker, theme picker
 *
 * @package WPFAQBlock
 * @since   3.0.0
 */
(function (wp) {
    'use strict';

    var el = wp.element.createElement;
    var useState = wp.element.useState;
    var useEffect = wp.element.useEffect;
    var __ = wp.i18n.__;
    var InspectorControls = wp.blockEditor.InspectorControls;
    var PanelBody = wp.components.PanelBody;
    var TextControl = wp.components.TextControl;
    var ToggleControl = wp.components.ToggleControl;
    var RadioControl = wp.components.RadioControl;
    var TabPanel = wp.components.TabPanel;
    var SelectControl = wp.components.SelectControl;
    var CheckboxControl = wp.components.CheckboxControl;
    var Button = wp.components.Button;
    var Spinner = wp.components.Spinner;
    var MediaUpload = wp.blockEditor.MediaUpload;
    var MediaUploadCheck = wp.blockEditor.MediaUploadCheck;
    var addFilter = wp.hooks.addFilter;
    var apiFetch = wp.apiFetch;

    var editorData = window.wpfaqblockEditor || { restPath: '/wp/v2/wpfaqblock', termRestPath: '/wp/v2/faq_group' };

    function buildQuery(params) {
        return Object.keys(params).map(function (key) {
            if (params[key] === undefined || params[key] === null || params[key] === '') {
                return '';
            }
            return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
        }).filter(Boolean).join('&');
    }

    function decodeEntities(value) {
        var textarea = document.createElement('textarea');
        textarea.innerHTML = value || '';
        return textarea.value;
    }

    function stripTags(value) {
        return String(value || '').replace(/<[^>]*>/g, '');
    }

    function normalizeFaqItem(item) {
        return {
            id: item.id,
            title: decodeEntities(stripTags(item.title && item.title.rendered ? item.title.rendered : ('FAQ #' + item.id))),
        };
    }

    function normalizeCategoryItem(item) {
        var name = item && item.name ? decodeEntities(stripTags(item.name)) : '';
        return {
            id: item.id,
            name: name || __('Untitled Category', 'wpfaqblock'),
            slug: item.slug || '',
            count: parseInt(item.count, 10) || 0,
        };
    }

    function shortcodeAttrEscape(value) {
        return String(value || '').replace(/"/g, '&quot;');
    }

    function buildShortcode(attributes) {
        var parts = ['wpfaqblock'];
        var selectionMode = attributes.faqSelectionMode || 'all';

        function addAttr(name, value) {
            if (value === undefined || value === null || value === '' || value === false) {
                return;
            }
            parts.push(name + '="' + shortcodeAttrEscape(value) + '"');
        }

        if (selectionMode === 'manual' && attributes.faqManualIds && attributes.faqManualIds.length) {
            addAttr('ids', attributes.faqManualIds.map(function (id) {
                return parseInt(id, 10);
            }).filter(Boolean).join(','));
        } else if (selectionMode === 'category' && attributes.faqCategory) {
            addAttr('category', attributes.faqCategory);
        }

        if (selectionMode === 'category' && attributes.faqShowCategoryTitle === false) {
            addAttr('category_title', '0');
        }

        addAttr('title', attributes.faqtitle);
        if (attributes.faqsearch) {
            addAttr('search', '1');
            addAttr('placeholder', attributes.faqplaceholder);
        }
        addAttr('orderby', attributes.faqorderby || 'date');
        addAttr('order', attributes.faqorder || 'asc');
        if (attributes.faqdisplayall) {
            addAttr('open', '1');
        }
        if (attributes.faqOpenFirst && !attributes.faqdisplayall) {
            addAttr('open_first', '1');
        }
        if (attributes.faqaccordion) {
            addAttr('accordion', '1');
        }
        addAttr('faqtheme', attributes.faqtheme || 'wpfaqblock-theme-1');
        addAttr('faqicon', attributes.faqicon || 'plus');
        addAttr('closed_icon', attributes.faqClosedIconUrl);
        addAttr('open_icon', attributes.faqOpenIconUrl);
        addAttr('class', attributes.className || attributes.class);

        return '[' + parts.join(' ') + ']';
    }

    // ─────────────────────────────────────────────────────────────
    // ICON SELECTOR
    // ─────────────────────────────────────────────────────────────
    function IconSelector(props) {
        var current = props.attributes.faqicon || 'plus';
        var icons = [
            { value: 'plus', label: '+  Plus' },
            { value: 'arrow', label: '>  Arrow' },
            { value: 'chevron', label: '⌄  Chevron' },
            { value: 'modern', label: '→  Modern' },
            { value: 'circle', label: '⊕  Circle' },
        ];
        return el(PanelBody, { title: __('Icon Style', 'wpfaqblock'), initialOpen: true },
            el('div', { style: { display: 'flex', flexWrap: 'wrap', gap: '8px' } },
                icons.map(function (icon) {
                    var isSelected = current === icon.value;
                    return el('label', { key: icon.value, style: { cursor: 'pointer', flex: '1 1 calc(50% - 4px)' } },
                        el('input', {
                            type: 'radio', name: 'wpfaqblock-icon', value: icon.value,
                            checked: isSelected,
                            onChange: function () { props.setAttributes({ faqicon: icon.value }); },
                            style: { position: 'absolute', opacity: 0, width: 0, height: 0 },
                        }),
                        el('div', {
                            style: {
                                border: isSelected ? '2px solid #007cba' : '1px solid #ddd',
                                borderRadius: '4px',
                                padding: '8px 6px',
                                textAlign: 'center',
                                background: isSelected ? '#f0f8ff' : '#fff',
                                fontSize: '13px',
                                fontWeight: isSelected ? '600' : '400',
                                color: isSelected ? '#007cba' : '#3c434a',
                                transition: 'all 0.15s',
                            }
                        }, icon.label)
                    );
                })
            )
        );
    }

    // ─────────────────────────────────────────────────────────────
    // THEME SELECTOR
    // ─────────────────────────────────────────────────────────────
    function ThemeSelector(props) {
        var current = props.attributes.faqtheme || 'wpfaqblock-theme-1';
        var themes = [1, 2, 3, 4, 5, 6, 7].map(function (n) {
            return {
                value: 'wpfaqblock-theme-' + n,
                label: String(n),
                img: wpfaqblockEditor.pluginUrl + 'assets/images/template-' + n + '-preview.png?v=1',
            };
        });
        return el(PanelBody, { title: __('Choose FAQ Theme', 'wpfaqblock'), initialOpen: true },
            el('div', { style: { display: 'flex', flexDirection: 'column', gap: '15px', padding: '5px 0' } },
                themes.map(function (theme) {
                    var isSelected = current === theme.value;
                    var defaultIcons = { 1: 'plus', 2: 'modern', 3: 'circle', 4: 'arrow', 5: 'circle', 6: 'circle', 7: 'plus' };
                    return el('label', { key: theme.value, style: { cursor: 'pointer', width: '100%' } },
                        el('input', {
                            type: 'radio', name: 'wpfaqblock-theme', value: theme.value,
                            checked: isSelected,
                            onChange: function () {
                                props.setAttributes({ faqtheme: theme.value, faqicon: defaultIcons[parseInt(theme.label)] || 'plus' });
                            },
                            style: { position: 'absolute', opacity: 0, width: 0, height: 0 },
                        }),
                        el('div', {
                            style: {
                                border: isSelected ? '2px solid #007cba' : '2px solid #ddd',
                                borderRadius: '6px',
                                overflow: 'hidden',
                                background: '#fff',
                                boxShadow: isSelected ? '0 0 0 1px #007cba' : 'none',
                                transition: 'border-color 0.15s',
                            }
                        },
                            el('img', {
                                src: theme.img, alt: theme.label,
                                style: { width: '100%', height: 'auto', maxHeight: '250px', objectFit: 'contain', display: 'block' },
                            }),
                            el('div', {
                                style: {
                                    padding: '5px 8px', fontSize: '12px',
                                    fontWeight: isSelected ? '600' : '400',
                                    color: isSelected ? '#007cba' : '#3c434a',
                                    background: isSelected ? '#f0f8ff' : '#f9f9f9',
                                    borderTop: '1px solid #eee',
                                    display: 'flex', alignItems: 'center', gap: '5px',
                                }
                            },
                                isSelected
                                    ? el('span', { style: { color: '#007cba', fontSize: '14px' } }, '●')
                                    : el('span', { style: { color: '#bbb', fontSize: '14px' } }, '○'),
                                theme.label
                            )
                        )
                    );
                })
            )
        );
    }

    function CustomIconUploader(props) {
        var attributes = props.attributes;
        var setAttributes = props.setAttributes;

        function renderUpload(label, idAttr, urlAttr) {
            var url = attributes[urlAttr] || '';

            return el('div', { style: { marginBottom: '16px' } },
                el('p', {
                    style: {
                        fontSize: '11px',
                        fontWeight: '600',
                        textTransform: 'uppercase',
                        color: '#1e1e1e',
                        margin: '0 0 8px',
                    }
                }, label),
                url ? el('div', {
                    style: {
                        border: '1px solid #ddd',
                        borderRadius: '6px',
                        padding: '10px',
                        marginBottom: '8px',
                        display: 'flex',
                        alignItems: 'center',
                        gap: '10px',
                    }
                },
                    el('img', {
                        src: url,
                        alt: '',
                        style: { width: '32px', height: '32px', objectFit: 'contain', flexShrink: 0 },
                    }),
                    el('span', { style: { fontSize: '12px', color: '#50575e', flex: 1 } }, __('Custom image selected', 'wpfaqblock'))
                ) : null,
                MediaUploadCheck ? el(MediaUploadCheck, null,
                    el(MediaUpload, {
                        allowedTypes: ['image'],
                        value: attributes[idAttr],
                        onSelect: function (media) {
                            var next = {};
                            next[idAttr] = media && media.id ? media.id : 0;
                            next[urlAttr] = media && media.url ? media.url : '';
                            setAttributes(next);
                        },
                        render: function (mediaProps) {
                            return el('div', { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } },
                                el(Button, { variant: 'secondary', onClick: mediaProps.open },
                                    url ? __('Replace Image', 'wpfaqblock') : __('Select Image', 'wpfaqblock')
                                ),
                                url ? el(Button, {
                                    variant: 'link',
                                    isDestructive: true,
                                    onClick: function () {
                                        var next = {};
                                        next[idAttr] = 0;
                                        next[urlAttr] = '';
                                        setAttributes(next);
                                    }
                                }, __('Remove', 'wpfaqblock')) : null
                            );
                        }
                    })
                ) : null
            );
        }

        return el(PanelBody, { title: __('Custom Accordion Icons', 'wpfaqblock'), initialOpen: false },
            renderUpload(__('Closed State Image', 'wpfaqblock'), 'faqClosedIconId', 'faqClosedIconUrl'),
            renderUpload(__('Open State Image', 'wpfaqblock'), 'faqOpenIconId', 'faqOpenIconUrl'),
            el('p', { style: { fontSize: '12px', color: '#666', margin: '4px 0 0' } },
                __('Custom icons are used only when both closed and open images are selected.', 'wpfaqblock')
            )
        );
    }

    // ─────────────────────────────────────────────────────────────
    // GENERAL SETTINGS
    // ─────────────────────────────────────────────────────────────
    function GeneralSettings(props) {
        var attributes = props.attributes;
        var setAttributes = props.setAttributes;

        var sectionLabel = function (text) {
            return el('p', {
                style: {
                    fontSize: '11px', fontWeight: '600', textTransform: 'uppercase',
                    letterSpacing: '0.5px', color: '#1e1e1e', margin: '16px 0 8px 0', padding: '0',
                }
            }, text);
        };
        var divider = el('hr', { style: { border: 'none', borderTop: '1px solid #e0e0e0', margin: '12px 0' } });

        return el('div', { style: { padding: '4px 0' } },
            sectionLabel(__('Title', 'wpfb')),
            el(TextControl, {
                label: __('FAQ Title', 'wpfb'), help: __('Title shown at the top.', 'wpfb'),
                value: attributes.faqtitle,
                onChange: function (val) { setAttributes({ faqtitle: val }); }
            }),
            divider,
            sectionLabel(__('Search', 'wpfb')),
            el(ToggleControl, {
                label: __('Show Searchbox', 'wpfb'), checked: attributes.faqsearch,
                help: attributes.faqsearch ? __('Visible on front end.', 'wpfb') : __('Hidden.', 'wpfb'),
                onChange: function (val) { setAttributes({ faqsearch: val }); }
            }),
            attributes.faqsearch ? el(TextControl, {
                label: __('Placeholder Text', 'wpfb'),
                value: attributes.faqplaceholder,
                onChange: function (val) { setAttributes({ faqplaceholder: val }); }
            }) : null,
            divider,
            sectionLabel(__('Ordering', 'wpfb')),
            el(RadioControl, {
                label: __('Order By', 'wpfb'), selected: attributes.faqorderby,
                options: [
                    { label: __('Created Date', 'wpfb'), value: 'date' },
                    { label: __('Title', 'wpfb'), value: 'title' }
                ],
                onChange: function (val) { setAttributes({ faqorderby: val }); }
            }),
            el(RadioControl, {
                label: __('Sort Direction', 'wpfb'), selected: attributes.faqorder,
                options: [
                    { label: __('Ascending', 'wpfb'), value: 'asc' },
                    { label: __('Descending', 'wpfb'), value: 'desc' }
                ],
                onChange: function (val) { setAttributes({ faqorder: val }); }
            }),
            divider,
            sectionLabel(__('Behaviour', 'wpfb')),
            el(ToggleControl, {
                label: __('FAQ Accordion', 'wpfb'), checked: attributes.faqaccordion,
                help: __('Only one answer open at a time.', 'wpfb'),
                onChange: function (val) { setAttributes({ faqaccordion: val }); }
            }),
            el(ToggleControl, {
                label: __('Display All Answers', 'wpfb'), checked: attributes.faqdisplayall,
                help: __('All answers expanded by default.', 'wpfb'),
                onChange: function (val) { setAttributes({ faqdisplayall: val }); }
            }),
            el(RadioControl, {
                label: __('Open First FAQ by Default', 'wpfaqblock'),
                selected: attributes.faqOpenFirst ? 'yes' : 'no',
                options: [
                    { label: __('No', 'wpfaqblock'), value: 'no' },
                    { label: __('Yes', 'wpfaqblock'), value: 'yes' }
                ],
                onChange: function (value) { setAttributes({ faqOpenFirst: value === 'yes' }); }
            })
        );
    }

    function SelectionSettings(props) {
        var attributes = props.attributes;
        var setAttributes = props.setAttributes;
        var selectionMode = attributes.faqSelectionMode === 'manual' || attributes.faqSelectionMode === 'category' ? attributes.faqSelectionMode : 'all';
        var manualIds = (attributes.faqManualIds || []).map(function (id) { return parseInt(id, 10); }).filter(Boolean);
        var restPath = editorData.restPath || '/wp/v2/wpfaqblock';
        var termRestPath = editorData.termRestPath || '/wp/v2/faq_group';

        var searchState = useState('');
        var searchQuery = searchState[0];
        var setSearch = searchState[1];

        var resultsState = useState([]);
        var searchResults = resultsState[0];
        var setResults = resultsState[1];

        var selectedState = useState([]);
        var selectedItems = selectedState[0];
        var setSelectedItems = selectedState[1];

        var loadingState = useState(false);
        var isLoading = loadingState[0];
        var setLoading = loadingState[1];

        var categoriesState = useState([]);
        var categories = categoriesState[0];
        var setCategories = categoriesState[1];

        var categoryLoadingState = useState(false);
        var isCategoryLoading = categoryLoadingState[0];
        var setCategoryLoading = categoryLoadingState[1];

        useEffect(function () {
            if (selectionMode !== 'manual') {
                return;
            }

            setLoading(true);
            var params = {
                per_page: 20,
                status: 'publish',
                orderby: 'title',
                order: 'asc',
                _fields: 'id,title',
            };

            if (searchQuery.length > 1) {
                params.search = searchQuery;
            }

            apiFetch({ path: restPath + '?' + buildQuery(params) })
                .then(function (items) {
                    setResults((items || []).map(normalizeFaqItem));
                    setLoading(false);
                })
                .catch(function () {
                    setResults([]);
                    setLoading(false);
                });
        }, [searchQuery, selectionMode]);

        useEffect(function () {
            if (selectionMode !== 'category') {
                return;
            }

            setCategoryLoading(true);
            apiFetch({
                path: termRestPath + '?' + buildQuery({
                    per_page: 100,
                    orderby: 'name',
                    order: 'asc',
                    _fields: 'id,name,slug,count',
                })
            })
                .then(function (items) {
                    setCategories((items || []).map(normalizeCategoryItem).filter(function (category) {
                        return !!category.slug;
                    }));
                    setCategoryLoading(false);
                })
                .catch(function () {
                    setCategories([]);
                    setCategoryLoading(false);
                });
        }, [selectionMode]);

        useEffect(function () {
            if (!manualIds.length) {
                setSelectedItems([]);
                return;
            }

            apiFetch({
                path: restPath + '?' + buildQuery({
                    include: manualIds.join(','),
                    per_page: Math.min(manualIds.length, 100),
                    orderby: 'include',
                    _fields: 'id,title',
                })
            })
                .then(function (items) { setSelectedItems((items || []).map(normalizeFaqItem)); })
                .catch(function () { setSelectedItems([]); });
        }, [manualIds.join(',')]);

        function toggleFaq(id, checked) {
            var nextIds;
            if (checked) {
                nextIds = manualIds.indexOf(id) === -1 ? manualIds.concat([id]) : manualIds;
            } else {
                nextIds = manualIds.filter(function (manualId) { return manualId !== id; });
            }
            setAttributes({ faqManualIds: nextIds });
        }

        return el('div', { style: { padding: '4px 0' } },
            el(RadioControl, {
                label: __('FAQ Selection', 'wpfaqblock'),
                selected: selectionMode,
                options: [
                    { label: __('Show all published FAQs', 'wpfaqblock'), value: 'all' },
                    { label: __('Choose a category', 'wpfaqblock'), value: 'category' },
                    { label: __('Choose specific FAQs', 'wpfaqblock'), value: 'manual' }
                ],
                onChange: function (value) { setAttributes({ faqSelectionMode: value }); }
            }),
            selectionMode === 'category' ? el('div', null,
                isCategoryLoading ? el('div', { style: { textAlign: 'center', padding: '12px' } }, el(Spinner, null)) : null,
                !isCategoryLoading ? el(SelectControl, {
                    label: __('FAQ Category', 'wpfaqblock'),
                    value: attributes.faqCategory || '',
                    options: [{ label: __('Select a category', 'wpfaqblock'), value: '' }].concat(categories.map(function (category) {
                        return {
                            label: category.name + (category.count ? ' (' + category.count + ')' : ''),
                            value: category.slug,
                        };
                    })),
                    onChange: function (value) { setAttributes({ faqCategory: value }); }
                }) : null,
                !isCategoryLoading && !categories.length ? el('p', { style: { fontSize: '12px', color: '#666', margin: 0 } },
                    __('No FAQ categories found.', 'wpfaqblock')
                ) : null,
                attributes.faqCategory ? el('p', { style: { fontSize: '12px', color: '#666', marginTop: '8px' } },
                    __('This block will display published FAQs from the selected category.', 'wpfaqblock')
                ) : null,
                attributes.faqCategory ? el(ToggleControl, {
                    label: __('Show Category Title', 'wpfaqblock'),
                    checked: attributes.faqShowCategoryTitle !== false,
                    help: attributes.faqShowCategoryTitle === false
                        ? __('The selected category name will be hidden above the FAQs.', 'wpfaqblock')
                        : __('The selected category name will appear above the FAQs.', 'wpfaqblock'),
                    onChange: function (value) { setAttributes({ faqShowCategoryTitle: value }); }
                }) : null
            ) : null,
            selectionMode === 'manual' ? el('div', null,
                el(TextControl, {
                    label: __('Search FAQs', 'wpfaqblock'),
                    value: searchQuery,
                    placeholder: __('Type to find FAQs...', 'wpfaqblock'),
                    onChange: setSearch
                }),
                el('div', {
                    style: {
                        border: '1px solid #ddd',
                        borderRadius: '6px',
                        padding: '10px',
                        maxHeight: '240px',
                        overflowY: 'auto',
                        background: '#fff',
                    }
                },
                    isLoading ? el('div', { style: { textAlign: 'center', padding: '16px' } }, el(Spinner, null)) : null,
                    !isLoading && !searchResults.length ? el('p', { style: { color: '#666', fontSize: '12px', margin: 0 } },
                        __('No FAQs found.', 'wpfaqblock')
                    ) : null,
                    !isLoading ? searchResults.map(function (faq) {
                        return el(CheckboxControl, {
                            key: faq.id,
                            label: faq.title,
                            checked: manualIds.indexOf(faq.id) !== -1,
                            onChange: function (checked) { toggleFaq(faq.id, checked); }
                        });
                    }) : null
                ),
                el('p', { style: { fontSize: '12px', color: '#666', marginTop: '10px' } },
                    manualIds.length
                        ? manualIds.length + ' ' + __('FAQ(s) selected. They will display in the order selected.', 'wpfaqblock')
                        : __('Select the FAQs you want this block instance to display.', 'wpfaqblock')
                ),
                selectedItems.length ? el('div', { style: { display: 'flex', flexDirection: 'column', gap: '6px', marginTop: '10px' } },
                    selectedItems.map(function (faq) {
                        return el('div', {
                            key: faq.id,
                            style: {
                                display: 'flex',
                                alignItems: 'center',
                                gap: '8px',
                                border: '1px solid #e0e0e0',
                                borderRadius: '4px',
                                padding: '6px 8px',
                                background: '#f6f7f7',
                            }
                        },
                            el('span', { style: { flex: 1, fontSize: '12px' } }, faq.title),
                            el(Button, {
                                variant: 'link',
                                isDestructive: true,
                                onClick: function () { toggleFaq(faq.id, false); }
                            }, __('Remove', 'wpfaqblock'))
                        );
                    })
                ) : null
            ) : selectionMode === 'all' ? el('p', { style: { fontSize: '12px', color: '#666' } },
                __('This block will use the existing order and display all published FAQs.', 'wpfaqblock')
            ) : null
        );
    }

    function ShortcodePanel(props) {
        var copiedState = useState(false);
        var copied = copiedState[0];
        var setCopied = copiedState[1];
        var shortcode = buildShortcode(props.attributes || {});

        function copyShortcode() {
            function done() {
                setCopied(true);
                window.setTimeout(function () { setCopied(false); }, 1600);
            }

            if (window.navigator && window.navigator.clipboard && window.navigator.clipboard.writeText) {
                window.navigator.clipboard.writeText(shortcode).then(done).catch(function () { });
                return;
            }

            var textarea = document.createElement('textarea');
            textarea.value = shortcode;
            textarea.setAttribute('readonly', 'readonly');
            textarea.style.position = 'absolute';
            textarea.style.left = '-9999px';
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            done();
        }

        return el(PanelBody, {
            title: __('FAQ Shortcode', 'wpfaqblock'),
            initialOpen: false,
        },
            el('p', { style: { fontSize: '13px', color: '#666' } },
                __('This shortcode updates as you change this block\'s settings:', 'wpfaqblock')
            ),
            el('textarea', {
                readOnly: true,
                value: shortcode,
                rows: 4,
                onFocus: function (event) { event.currentTarget.select(); },
                style: {
                    width: '100%',
                    background: '#f0f0f0',
                    border: '1px solid #ccc',
                    borderRadius: '4px',
                    padding: '10px',
                    marginTop: '10px',
                    fontFamily: 'monospace',
                    fontSize: '12px',
                    resize: 'vertical',
                }
            }),
            el(Button, {
                variant: copied ? 'secondary' : 'primary',
                onClick: copyShortcode,
                style: { marginTop: '10px' }
            }, copied ? __('Copied', 'wpfaqblock') : __('Copy Shortcode', 'wpfaqblock')),
            el('p', { style: { fontSize: '12px', color: '#666', marginTop: '10px' } },
                __('Copy and paste into any post, page, or widget to reproduce this FAQ output.', 'wpfaqblock')
            )
        );
    }

    // ─────────────────────────────────────────────────────────────
    // INJECT INSPECTOR CONTROLS
    // ─────────────────────────────────────────────────────────────
    var addControls = function (BlockEdit) {
        return function (props) {
            if (props.name !== 'create-block/wpfaqblock') {
                return el(BlockEdit, props);
            }

            var tabs = [
                { name: 'general', title: __('General', 'wpfaqblock'), className: 'wpfaqblock-tab-general' },
                { name: 'selection', title: __('Selection', 'wpfaqblock'), className: 'wpfaqblock-tab-selection' },
                { name: 'design', title: __('Design', 'wpfaqblock'), className: 'wpfaqblock-tab-design' }
            ];

            return [
                el(BlockEdit, props),
                el(InspectorControls, { key: 'wpfaqblock-inspector' },
                    el(PanelBody, {
                        title: __('FAQ Settings', 'wpfaqblock'),
                        icon: 'admin-plugins',
                        initialOpen: true,
                    },
                        el(TabPanel, {
                            className: 'wpfaqblock-tabs',
                            activeClass: 'is-active',
                            tabs: tabs,
                        }, function (tab) {
                            if (tab.name === 'general') return el(GeneralSettings, props);
                            if (tab.name === 'selection') return el(SelectionSettings, props);
                            if (tab.name === 'design') return el('div', null, el(IconSelector, props), el(ThemeSelector, props), el(CustomIconUploader, props));
                        })
                    ),
                    el(ShortcodePanel, props)
                ),
            ];
        };
    };

    addFilter('editor.BlockEdit', 'wpfaqblock/add-controls', addControls);

})(window.wp);
