import { registerBlockType } from '@wordpress/blocks';
import { InspectorControls } from '@wordpress/block-editor';
import ServerSideRender from '@wordpress/server-side-render';
import { PanelBody, SelectControl, TextControl, TextareaControl, ToggleControl, __experimentalNumberControl as NumberControl } from '@wordpress/components';
import ProductSearchControl from '../../components/ProductSearchControl';

import metadata from '../../../blocks/premium/review-list/block.json';

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Content">
                    <SelectControl
                        label="Product Source"
                        value={ attributes.productSource }
                        options={ [
                            { label: 'Current Product (Auto-detect)', value: 'current' },
                            { label: 'Select Product', value: 'custom' },
                        ] }
                        onChange={ ( val ) => setAttributes( { productSource: val } ) }
                    />
                    { attributes.productSource === 'custom' && (
                        <ProductSearchControl
                            value={ attributes.productId }
                            onChange={ ( val ) => setAttributes( { productId: val } ) }
                        />
                    ) }
                    <NumberControl
                        label="Reviews per Page"
                        value={ attributes.reviewsPerPage }
                        min={ 1 }
                        max={ 50 }
                        onChange={ ( val ) => setAttributes( { reviewsPerPage: parseInt( val ) || 5 } ) }
                    />
                    <SelectControl
                        label="Order By"
                        value={ attributes.orderby }
                        options={ [
                            { label: 'Date', value: 'created_at' },
                            { label: 'Rating', value: 'rating' },
                            { label: 'Most Helpful', value: 'helpful_votes' },
                        ] }
                        onChange={ ( val ) => setAttributes( { orderby: val } ) }
                    />
                    <SelectControl
                        label="Order"
                        value={ attributes.order }
                        options={ [
                            { label: 'Descending', value: 'DESC' },
                            { label: 'Ascending', value: 'ASC' },
                        ] }
                        onChange={ ( val ) => setAttributes( { order: val } ) }
                    />
                    <ToggleControl
                        label="Show Section Title"
                        checked={ attributes.showTitle === 'yes' }
                        onChange={ ( val ) => setAttributes( { showTitle: val ? 'yes' : '' } ) }
                    />
                    { attributes.showTitle === 'yes' && (
                        <TextControl
                            label="Section Title"
                            value={ attributes.sectionTitle }
                            onChange={ ( val ) => setAttributes( { sectionTitle: val } ) }
                        />
                    ) }
                    <ToggleControl
                        label="Show Rating Summary"
                        checked={ attributes.showSummary === 'yes' }
                        onChange={ ( val ) => setAttributes( { showSummary: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Review Title"
                        checked={ attributes.showReviewTitle === 'yes' }
                        onChange={ ( val ) => setAttributes( { showReviewTitle: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Reviewer Name"
                        checked={ attributes.showReviewerName === 'yes' }
                        onChange={ ( val ) => setAttributes( { showReviewerName: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Review Date"
                        checked={ attributes.showDate === 'yes' }
                        onChange={ ( val ) => setAttributes( { showDate: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Verified Badge"
                        checked={ attributes.showVerifiedBadge === 'yes' }
                        onChange={ ( val ) => setAttributes( { showVerifiedBadge: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Helpful Button"
                        checked={ attributes.showHelpful === 'yes' }
                        onChange={ ( val ) => setAttributes( { showHelpful: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Pagination"
                        checked={ attributes.showPagination === 'yes' }
                        onChange={ ( val ) => setAttributes( { showPagination: val ? 'yes' : '' } ) }
                    />
                    <TextareaControl
                        label="No Reviews Text"
                        value={ attributes.noReviewsText }
                        onChange={ ( val ) => setAttributes( { noReviewsText: val } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender block={ metadata.name } attributes={ attributes } />
        </>
    ),
    save: () => null,
} );
