/**
 * global aawp_data
 */

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
 */
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';

/**
 * Get required utilities from @wordpress/components
 */
import { SelectControl, PanelBody, Placeholder, TextControl, TextareaControl, RadioControl, ToggleControl, RangeControl, Button } from '@wordpress/components';

/**
 * ServerSideRender is a component used for server-side rendering a preview of dynamic blocks to display in the editor. 
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-server-side-render/
 */
import ServerSideRender from '@wordpress/server-side-render';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
 *
 * @return {WPElement} Element to render.
 */
export default function Edit( props ) {

    const {
        attributes: {
            look = '',
            asin = '',
            keywords = '',

            /** Lists (multiple boxes) fields start */
            items = 10,
            order = 'ASC',
            orderby = '',
            order_items = 10,
            filterby = '',
            filter = '',
            filter_items = 10,
            filter_type = 'include',
            filter_compare= 'equal',
            ribbon = true,
            ribbon_text = '',
            /** Lists (multiple boxes) fields end */

            /** Title and links fields start */
            title = '',
            title_length = undefined !== aawp_data.options.output.title_length ? aawp_data.options.output.title_length : '100',
            link_title = '',
            link_overwrite = '',
            link_type = '',
            link_icon = '',
            link_class = '',
            /** Title and links fields end */

            /** Description fields start */
            description = '',
            description_items = undefined !== aawp_data.options.output.description_items ? parseInt( aawp_data.options.output.description_items ) : 5,
            description_length = undefined !== aawp_data.options.output.description_length ? aawp_data.options.output.description_length : '200',
            /** Description fields end */

            /** Images fields start */
            image = '',
            image_size = undefined !== aawp_data.options.output.image_size ? aawp_data.options.output.image_size : 'medium',
            image_alt = '',
            image_title = '',
            image_align = 'center',
            image_width = '',
            image_height = '',
            image_class = '',
            /** Images fields end */

            /** Buttons fields start */
            button = true,
            button_text = undefined !== aawp_data.options.output.button_text ? aawp_data.options.output.button_text : 'Buy on Amazon',
            button_detail = '',
            button_detail_text = undefined !== aawp_data.options.output.button_detail_text ? aawp_data.options.output.button_detail_text : 'Details',
            button_detail_title = '',
            button_detail_target = '',
            button_detail_rel = '',
            /** Buttons fields end */

            /** Pricing fields start */
            price = '',
            price_type = '',
            sale_ribbon_text = undefined !== aawp_data.options.output.pricing_sale_ribbon_text ? aawp_data.options.output.pricing_sale_ribbon_text : 'Sale',
            /** Pricing fields start */

            /** Star ratings fields start */
            rating = '',
            star_rating = true,
            reviews = true,
            /** Star ratings fields end */

            /** Templates & Styles fields start */
            template = '',
            grid = '',
            class_attr = '',
            numbering = true,
            /** Templates & Styles fields end */

            /** Other fields start */
            tracking_id = '',
            /** Other fields end */

            // For Fields Look.
            value_attr = '',
            apply_link = false,

            // Comparison table.
            table = '',

            /**
             * Is input value to display product box a URL.
             *
             * @since 3.40.2
             */
            isURL = false,
        },

        setAttributes
     } = props;

    let jsx;
    let nextInput, valueSelect, panel = [];

    // Comparison table options.
    const options = Object.entries( aawp_data.tables ).map( function ( [ key, value ] ) {
        return { value: key, label: value }
    });

    // Initialize options for the comparison tables.
    options.unshift( { value: '', label: '-- Select A Table --'  } );

    var looks = [ 'box', 'fields', 'link'];

    if ( looks.includes( look ) ) {

        /**
         * Convert URL to ASIN.
         * 
         * @since 3.40.2
         * @param {string} url The URL to extract ASIN From 
         * @returns {string} ASIN
         */
        const extractASINFromURL = (url) => {

            if (!url.startsWith('http')) {
                return url; // Not a URL.
            }

            setAttributes( { isURL: true } )

            const match = url.match(/\/(dp|gp\/product)\/([^\/?]+)/);
            return match ? match[2] : '';
        };

        let helpMessage    = __( 'Multiple ASIN values can be separated by comma.', 'aawp');
        let invalidMessage = '';

        if (isURL && asin === '') {
            invalidMessage = __( 'You have not entered a direct product URL. Please try another URL.', 'aawp');
        }

        nextInput =  <TextControl
            ref={input => input && '' === asin && input.focus()}
            key="aawp-asin-input-control"
            className = "aawp-asin-input-control"
            label={ __( 'ASIN or URL', 'aawp' ) }
            value={extractASINFromURL(asin)}
            placeholder = {__( 'Enter ASIN or URL here...', 'aawp') }
            onChange= { (value) => setAttributes( { asin: extractASINFromURL(value) } ) }
            help = {
                <>
                    <span>{helpMessage}</span>
                    <br/>
                    {invalidMessage && <span style={{ color: 'red' }}>{invalidMessage}</span>}
                </>
            }
        />;
        
        let buttonInput =   <div key="components-base-control aawp-products-search-container" className="aawp-products-search-container">
                                <Button variant="secondary" key="aawp-table-add-products-search" className="aawp-table-add-products-search" href="#aawp-modal-table-product-search" data-aawp-modal="true" data-aawp-table-add-products-search="true">
                                    <span className="dashicons dashicons-search"></span>
                                        { __( ' Search for product(s) without ASIN', 'aawp')}
                                </Button>
                            </div>

        nextInput = [ nextInput, 'OR', buttonInput ];

        if ( 'fields' === look ) {
            valueSelect = <SelectControl
                    key="aawp-fields-value-input-control"
                    className="aawp-fields-value-input-control"
                    label={ __( 'Value', 'aawp') }
                    value= {value_attr}
                    options={[
                        { value: '', label: __( '-- Select An Option --', 'aawp' ) },
                        { value: 'title', label: __( 'Title', 'aawp' ) },
                        { value: 'description', label: __( 'Description', 'aawp' ) },
                        { value: 'thumb', label: __( 'Thumbnail', 'aawp' ) },
                        { value: 'star_rating', label: __( 'Star Rating', 'aawp' ) },
                        { value: 'price', label: __( 'Price', 'aawp' ) },
                        { value: 'button', label: __( 'Button', 'aawp' ) },
                    ]}
                    onChange= { (value) => setAttributes( { value_attr: value } ) }
                    help = { __( 'To display single product data e.g. title, description or price.', 'aawp')}
                />;
        }

    } else if ( 'bestseller' === look || 'new' === look ) {
        nextInput =  <TextControl
                ref={input => input && '' === keywords && input.focus()}
                key="aawp-keywords-input-control"
                label={ __( 'Keywords', 'aawp' ) }
                value = {keywords}
                placeholder = {__( 'Enter keywords here. E.g. "top 4k monitors"', 'aawp') }
                onChange= { (value) => setAttributes( { keywords: value } ) }
            />;
    } else if ( 'table' === look ) {
        nextInput = <SelectControl
                autoFocus
                key="aawp-comparison-table-select-control"
                label={__( 'Select A Table', 'aawp' )}
                value= {table}
                options= {options}
                onChange= { (value) => setAttributes( { table: value } ) }
                help={__( 'To display the comparison table.', 'aawp' )}
            />;
    }

    /** Lists (multiple boxes) fields start */
    let itemsRange = <RangeControl
                key="aawp-items-number-control"
                label={ __( 'Number of items', 'aawp' ) }
                value= {items}
                onChange= { (value) => setAttributes( { items: value } ) }
                min={ 1 }
                max={ 25 }
                help= {__('Defines the maximum amount of products which will be shown.', 'aawp')}
            />;

    let orderbySelect = <SelectControl
            label = {__( 'Order By', 'aawp')}
            key="aawp-orderby-selector-select-control"
            value={ orderby }
            options={[
                { value: '', label: __( '-- Select An Option --', 'aawp' ) },
                { value: 'amount_saved', label: __( 'Amount Saved', 'aawp' ) },
                { value: 'percentage_saved', label: __( 'Percentage Saved', 'aawp' ) },
                { value: 'price', label: __( 'Price', 'aawp' ) },
                { value: 'rating', label: __( 'Rating', 'aawp' ) },
                { value: 'title', label: __( 'Title', 'aawp' ) },
             ]}
            onChange= { (value) => setAttributes( { orderby: value } ) }
            help = { __( 'Ordering on the basis of certain attributes.', 'aawp' ) }
        />;

    let orderSelect = <SelectControl
            label = {__( 'Order', 'aawp')}
            key="aawp-order-selector-select-control"
            value={ order }
            options={[
                { value: 'ASC', label: __( 'Ascending', 'aawp' ) },
                { value: 'DESC', label: __( 'Descending', 'aawp' ) },
             ]}
            onChange= { (value) => setAttributes( { order: value } ) }
            help = { __( 'Direction of ordering.', 'aawp' ) }
        />;

    let orderItemsRange = <RangeControl
            label = {__( 'Order Items', 'aawp')}
            key="aawp-order-items-text-control"
            value={ order_items }
            onChange= { (value) => setAttributes( { order_items: value } ) }
            min={1}
            max={10}
            help = { __( 'Similar to the global "items" attribute but defining the maximum order (search) radius.', 'aawp' ) }
        />;

    let filterbySelect = <SelectControl
            label = {__( 'Filter By', 'aawp')}
            key="aawp-filterby-selector-select-control"
            value={ filterby }
            options={[
                { value: '', label: __( '-- Select A Filter --', 'aawp' ) },
                { value: 'price', label: __( 'Price', 'aawp' ) },
                { value: 'title', label: __( 'Title', 'aawp' ) },
             ]}
            onChange= { (value) => setAttributes( { filterby: value } ) }
            help = { __( 'Filtering on the basis of certain attributes.', 'aawp' ) }
        />;

    let filterInput = <TextControl
            label = {__( 'Filter', 'aawp')}
            key="aawp-filter-text-control"
            value={ filter }
            onChange= { (value) => setAttributes( { filter: value } ) }
            help = { __( 'Defining the characteristic for applying the filter.', 'aawp' ) }
        />;

    let filterItemsRange = <RangeControl
        label = {__( 'Filter Items', 'aawp')}
        type = 'number'
        key="aawp-filter-items-text-control"
        value={ filter_items }
        onChange= { (value) => setAttributes( { filter_items: value } ) }
        min={1}
        max={10}
        help = { __( 'Similar to the global "items" attribute but defining the maximum filter (search) radius.', 'aawp' ) }
    />;

    let filterTypeSelect = <SelectControl
            label = {__( 'Filter Type', 'aawp')}
            key="aawp-filter-type-selector-select-control"
            value={ filter_type }
            options={[
                { value: 'include', label: __( 'Include', 'aawp' ) },
                { value: 'exclude', label: __( 'Exclude', 'aawp' ) },
             ]}
            onChange= { (value) => setAttributes( { filter_type: value } ) }
            help = { __( 'Defining the filter direction.', 'aawp' ) }
        />;

    let filterCompareSelect = <SelectControl
            label = {__( 'Filter Compare', 'aawp')}
            key="aawp-filter-compare-selector-select-control"
            value={ filter_compare }
            options={[
                { value: 'equal', label: __( 'Equal', 'aawp' ) },
                { value: 'less', label: __( 'Less', 'aawp' ) },
                { value: 'more', label: __( 'More', 'aawp' ) },
                { value: 'range', label: __( 'Range', 'aawp' ) },
             ]}
            onChange= { (value) => setAttributes( { filter_compare: value } ) }
            help = { __( 'Required for comparing prices.', 'aawp' ) }
        />;

    let ribbonSelect =  <ToggleControl
            label = {__( 'Show Ribbon', 'aawp')}
            key="aawp-ribbon-selector-select-control"
            checked={ ribbon }   
            onChange= { (value) => setAttributes( { ribbon: value } ) }
            help = { __( 'Showing the ribbon (e.g. bestseller no X) on the top left.', 'aawp' ) }
        />;

    let ribbonTextInput =  <TextControl
            label = {__( 'Custom Ribbon Text', 'aawp')}
            key="aawp-ribbon-text-text-control"
            value={ ribbon_text }
            onChange= { (value) => setAttributes( { ribbon_text: value } ) }
            help = { __( 'Overwriting the ribbon text (e.g. bestseller no X) on the top left.', 'aawp' ) }
        />;

    /** Lists (multiple boxes) fields end */

    /** Title and links fields start */

    let titleInput = <TextControl
            label = {__( 'Title', 'aawp')}
            key="aawp-title-text-control"
            value={ title }
            onChange= { (value) => setAttributes( { title: value } ) }
            help = { __( 'Overwriting the original product title.', 'aawp' ) }
        />;

    let titleLengthInput = <TextControl
        label = {__( 'Title Length', 'aawp')}
        type = 'number'
        key="aawp-title-length-text-control"
        value={ title_length }
        onChange= { (value) => setAttributes( { title_length: value } ) }
        help = { __( 'Specifies a maximum amount of characters for the product title.', 'aawp' ) }
    />;

    let linkTitleInput = <TextControl
        label = {__( 'Link Title', 'aawp')}
        key="aawp-link-title-text-control"
        value={ link_title }
        onChange= { (value) => setAttributes( { link_title: value } ) }
        help = { __( 'Overwriting HTML link "title“ attribute.', 'aawp' ) }
    />;

    let linkOverwriteInput = <TextControl
        label = {__( 'Link Overwrite', 'aawp')}
        key="aawp-link-overwrite-text-control"
        type = 'url'
        value={ link_overwrite }
        onChange= { (value) => setAttributes( { link_overwrite: value } ) }
        help = { __( 'Replacing the links.', 'aawp' ) }
    />;

    let linkTypeSelect = <SelectControl
        label = {__( 'Link Type', 'aawp')}
        key="aawp-link-type-select-control"
        value={ link_type }
        options={[
            { value: 'basic', label: __( 'Basic', 'aawp' ) },
            { value: 'reviews', label: __( 'Reviews', 'aawp' ) },
            { value: 'cart', label: __( 'Cart', 'aawp' ) },
         ]}  
        onChange= { (value) => setAttributes( { link_type: value } ) }
        help = { __( 'Specify the link type.', 'aawp' ) }
    />;    

    let linkIconSelect = <SelectControl
        label = {__( 'Link Icon', 'aawp')}
        key="aawp-link-icon-select-control"
        value={ link_icon }
        options={[
            { value: 'none', label: __( 'None', 'aawp' ) },
            { value: 'amazon', label: __( 'Amazon', 'aawp' ) },
            { value: 'amazon-logo', label: __( 'Amazon Logo', 'aawp' ) },
            { value: 'cart', label: __( 'Cart', 'aawp' ) },
         ]}  
        onChange= { (value) => setAttributes( { link_icon: value } ) }
        help = { __( 'Specify the link icon.', 'aawp' ) }
    />;

    let linkClassInput = <TextControl
        label = {__( 'Link Class', 'aawp')}
        key="aawp-link-class-text-control"
        value={ link_class }
        onChange= { (value) => setAttributes( { link_class: value } ) }
        help = { __( 'Specify your own link CSS classes.', 'aawp' ) }
    />;

    /** Title and links fields end */

    /** Description fields start */

    let descriptionInput = <TextareaControl
        label = {__( 'Custom Description', 'aawp')}
        key="aawp-description-text-control"
        value={ description }
        onChange= { (value) => setAttributes( { description: value } ) }
        help = { __( 'Using a custom product description.', 'aawp' ) }
    />;

    let descriptionItemsRange = <RangeControl
        label = {__( 'Description Items', 'aawp')}
        type = 'number'
        key="aawp-description-items-text-control"
        value={ description_items }
        onChange= { (value) => setAttributes( { description_items: value } ) }
        min={1}
        max={10}
        help = { __( 'Specify a maximum amount for list items.', 'aawp' ) }
    />;

    let descriptionLengthInput = <TextControl
        label = {__( 'Description Length', 'aawp')}
        type = 'number'
        key="aawp-description-length-text-control"
        value={ description_length }
        onChange= { (value) => setAttributes( { description_length: value } ) }
        help = { __( 'Specifies a maximum amount of characters for each list item.', 'aawp' ) }
    />;
    /** Description fields end */

    /** Image fields start */

    let imageInput = <TextControl
        label = {__( 'Image Selection', 'aawp')}
        key="aawp-image-text-control"
        value={ image }
        onChange= { (value) => setAttributes( { image: value } ) }
        help = { __( 'You can select another product image by entering a number from 1 to 5 or a direct link to an image file.', 'aawp' ) }
    />;

    let imageSizeSelect = <SelectControl
        label = {__( 'Image Size', 'aawp')}
        key="aawp-image-size-select-control"
        value={ image_size }
        options={[
            { value: 'small', label: __( 'Small', 'aawp' ) },
            { value: 'medium', label: __( 'Medium', 'aawp' ) },
            { value: 'large', label: __( 'Large', 'aawp' ) },
         ]}
        onChange= { (value) => setAttributes( { image_size: value } ) }
        help = { __( 'Overwriting the thumbnail size.', 'aawp' ) }
    />;

    let imageAltInput = <TextControl
        label = {__( 'Image Alt', 'aawp')}
        key="aawp-image-alt-text-control"
        value={ image_alt }
        onChange= { (value) => setAttributes( { image_alt: value } ) }
        help = { __( 'Overwriting HTML image "alt" attribute..', 'aawp' ) }
    />;

    let imageTitleInput = <TextControl
        label = {__( 'Image Title', 'aawp')}
        key="aawp-image-title-text-control"
        value={ image_title }
        onChange= { (value) => setAttributes( { image_title: value } ) }
        help = { __( 'Adding HTML image "title" attribute.', 'aawp' ) }
    />;

    let imageAlignSelect = <SelectControl
        label = {__( 'Image Align', 'aawp')}
        key="aawp-image-align-select-control"
        value={ image_align }
        options={[
            { value: 'center', label: __( 'Center', 'aawp' ) },
            { value: 'left', label: __( 'Left', 'aawp' ) },
            { value: 'right', label: __( 'Right', 'aawp' ) },
        ]}
        onChange= { (value) => setAttributes( { image_align: value } ) }
        help = { __( 'Align images right or left', 'aawp' ) }
    />;

    let imageWidthInput = <TextControl
        label = {__( 'Image Width', 'aawp')}
        type = 'number'
        key="aawp-image-width-text-control"
        value={ image_width }
        onChange= { (value) => setAttributes( { image_width: value } ) }
        help = { __( 'Specifies the width of a single image.', 'aawp' ) }
    />;

    let imageHeightInput = <TextControl
        label = {__( 'Image Height', 'aawp')}
        key="aawp-image-height-text-control"
        value={ image_height }
        onChange= { (value) => setAttributes( { image_height: value } ) }
        help = { __( 'Specifies the height of a single image.', 'aawp' ) }
    />;

    let imageClassInput = <TextControl
        label = {__( 'Image Class', 'aawp')}
        key="aawp-image-class-text-control"
        value={ image_class }
        onChange= { (value) => setAttributes( { image_class: value } ) }
        help = { __( 'Adding HTML image "title" attribute.', 'aawp' ) }
    />;

    /** Image fields end */

    /** Button fields start */

    let buttonToggle = <ToggleControl
        label = {__( 'Display "Buy on Amazon" Button', 'aawp')}
        key="aawp-button-select-control"
        checked = { button }
        onChange= { (value) => setAttributes( { button: value } ) }
        help = { __( 'Showing or hiding the "Buy on Amazon" button.', 'aawp' ) }
    />;

    let buttonTextInput = <TextControl
        label = {__( 'Button Text', 'aawp')}
        key="aawp-button-text-text-control"
        value={ button_text }
        onChange= { (value) => setAttributes( { button_text: value } ) }
        help = { __( 'Overwriting the button text.', 'aawp' ) }
    />;

    let buttonDetailInput = <TextControl
        label = {__( 'Link', 'aawp')}
        key="aawp-button-detail-text-control"
        value={ button_detail }
        onChange= { (value) => setAttributes( { button_detail: value } ) }
        help = { __( 'Displaying an extra button and setting up the link target.', 'aawp' ) }
    />;

    let buttonDetailTextInput = <TextControl
        label = {__( 'Text', 'aawp')}
        key="aawp-button-detail-text-text-control"
        value={ button_detail_text }
        onChange= { (value) => setAttributes( { button_detail_text: value } ) }
        help = { __( 'Overwriting the button detail text.', 'aawp' ) }
    />;

    let buttonDetailTitleInput = <TextControl
        label = {__( 'Title', 'aawp')}
        key="aawp-button-detail-title-text-control"
        value={ button_detail_title }
        onChange= { (value) => setAttributes( { button_detail_title: value } ) }
        help = { __( 'Overwriting HTML link "title" attribute.', 'aawp' ) }
    />;

    let buttonDetailTargetInput = <TextControl
        label = {__( 'Target', 'aawp')}
        key="aawp-button-detail-target-text-control"
        value={ button_detail_target }
        onChange= { (value) => setAttributes( { button_detail_target: value } ) }
        help = { __( 'Overwriting HTML link "target" attribute (standard = current window).', 'aawp' ) }
    />;

    let buttonDetailRelInput = <TextControl
        label = {__( 'Rel', 'aawp')}
        key="aawp-button-detail-rel-text-control"
        value={ button_detail_rel }
        onChange= { (value) => setAttributes( { button_detail_rel: value } ) }
        help = { __( 'Setting a custom HTML link "rel" attribute', 'aawp' ) }
    />;

    /** Button fields end */

    /** Pricing fields start */

    let priceInput = <TextControl
        label = {__( 'Custom Price', 'aawp')}
        key="aawp-price-text-control"
        value={ price }
        onChange= { (value) => setAttributes( { price: value } ) }
        help = { __( 'Overwriting the price text.', 'aawp' ) }
    />;

    let priceTypeInput = <TextControl
        label = {__( 'Price Type', 'aawp')}
        key="aawp-price-type-text-control"
        value={ price_type }
        onChange= { (value) => setAttributes( { price_type: value } ) }
        help = { __( 'E.g. "lowest", "raw".', 'aawp' ) }
    />;

    let saleRibbonTextInput = <TextControl
        label = {__( 'Sale Ribbon Text', 'aawp')}
        key="aawp-sale-ribbon-text-text-control"
        value={ sale_ribbon_text }
        onChange= { (value) => setAttributes( { sale_ribbon_text: value } ) }
        help = { __( 'Overwriting the sale ribbon text on the top right.', 'aawp' ) }
    />;

    /** Pricing fields end */

    /** Star rating fields start */

    let ratingInput = <TextControl
        label = {__( 'Custom Rating', 'aawp')}
        key="aawp-rating-text-control"
        value={ rating }
        onChange= { (value) => setAttributes( { rating: value } ) }
        help = { __( 'Overwriting the rating value.', 'aawp' ) }
    />;

    let starRatingToggle = <ToggleControl
        label = {__( 'Show Star Rating', 'aawp')}
        key="aawp-star-rating-select-control"
        checked={ star_rating }
        onChange= { (value) => setAttributes( { star_rating: value } ) }
        help = { __( 'Showing or hiding the star rating.', 'aawp' ) }
    />;

    let reviewsToggle = <ToggleControl
        label = {__( 'Show Reviews', 'aawp')}
        key="aawp-reviews-rating-select-control"
        checked={ reviews }
        onChange= { (value) => setAttributes( { reviews: value } ) }
        help = { __( 'Showing or hiding the amount of reviews.', 'aawp' ) }
    />;

    /** Star rating fields end */

    /** Templates & Styles fields start */

    let templateSelect = <SelectControl
        label = {__( 'Template', 'aawp')}
        key="aawp-template-select-control"
        value={ template }
        options={[
            { value: '', label: __( 'Default', 'aawp' ) },
            { value: 'horizontal', label: __( 'Horizontal', 'aawp' ) },
            { value: 'vertical', label: __( 'Vertical', 'aawp' ) },
            { value: 'list', label: __( 'List', 'aawp' ) },
            { value: 'table', label: __( 'Table', 'aawp' ) },
            { value: 'widget', label: __( 'Widget', 'aawp' ) },
            { value: 'widget-vertical', label: __( 'Widget Vertical', 'aawp' ) },
            { value: 'widget-small', label: __( 'Widget Small', 'aawp' ) },
        ]}
        onChange= { (value) => setAttributes( { template: value } ) }
        help = { __( 'Replacing the PHP template which will be used for the output.', 'aawp' ) }
    />;

    let gridSelect = <SelectControl
        label = {__( 'Grid', 'aawp') }
        key="aawp-grid-select-control"
        value={ grid }
        onChange= { (value) => setAttributes( { grid: value } ) }
        options={[
            { value: '0', label: __( 'Default', 'aawp' ) },
            { value: '2', label: __( '2 Columns', 'aawp' ) },
            { value: '3', label: __( '3 Columns', 'aawp' ) },
            { value: '4', label: __( '4 Columns', 'aawp' ) },
            { value: '5', label: __( '5 Columns', 'aawp' ) },
            { value: '6', label: __( '6 Columns', 'aawp' ) },
        ]}
        help = { __( 'Displaying product boxes side by side.', 'aawp' ) }
    />;

    let numberingToggle = <ToggleControl
        label = {__( 'Show Numbering', 'aawp')}
        key="aawp-show-numbering-toggle-control"
        checked={ numbering }
        onChange= { (value) => setAttributes( { numbering: value } ) }
        help = { __( 'Shows the numbering col when using table template for unordered lists.', 'aawp' ) }
    />;

    let classInput = <TextControl
        label = {__( 'Custom CSS Class', 'aawp')}
        key="aawp-class-text-control"
        value={ class_attr }
        onChange= { (value) => setAttributes( { class_attr: value } ) }
        help = { __( 'Adding a new class to the product container.', 'aawp' ) }
    />;

    /** Templates & Styles fields end */

    /** Other fields start */
    let trackingIdInput = <TextControl
        label = {__( 'Tracking ID', 'aawp')}
        key="aawp-tracking-id-text-control"
        value={ tracking_id }
        onChange= { (value) => setAttributes( { tracking_id: value } ) }
        help = { __( 'Replacing the tracking id which will be used for affiliate links.', 'aawp' ) }
    />;

    /** Other fields end */

    switch( look ) {
        case 'box':
            itemsRange = linkIconSelect = linkClassInput = imageAlignSelect = imageWidthInput = imageHeightInput = imageClassInput = [];
        break;

        case 'bestseller':
        case 'new':
            titleInput = linkTitleInput = linkOverwriteInput = linkIconSelect = linkClassInput = descriptionInput = imageInput = imageTitleInput = imageAltInput = imageAlignSelect = imageWidthInput = imageHeightInput = imageClassInput = ratingInput = [];
        break;

        case 'fields':
            itemsRange = orderSelect = orderbySelect = orderItemsRange = filterbySelect = filterInput = filterItemsRange = filterTypeSelect = filterCompareSelect = ribbonSelect = ribbonTextInput = linkIconSelect = linkClassInput = buttonToggle =  saleRibbonTextInput = starRatingToggle = reviewsToggle = gridSelect = numberingToggle = classInput = [];
        break;

        case 'link':
            itemsRange = orderSelect = orderbySelect = orderItemsRange = filterbySelect = filterInput = filterItemsRange = filterTypeSelect = filterCompareSelect = ribbonSelect = ribbonTextInput = ratingInput = starRatingToggle = reviewsToggle = gridSelect = numberingToggle = classInput = [];
        break;
        
        default:
    }

    if ( 'bestseller' === look || 'new' === look || ( 'box' === look && asin.includes( ',' ) ) ) {

        panel = [ ...panel,
                    <PanelBody key="lists" title= {__( 'Lists', 'aawp')} initialOpen={ false } >
                        {'box' !== look ? itemsRange : ''}
                        {ribbonSelect}
                        {ribbon === true ? ribbonTextInput : ''}
                        {saleRibbonTextInput}
                    </PanelBody>
                ]

        panel = [ ...panel,
            <PanelBody key="order-products" title= {__( 'Order Products', 'aawp')} initialOpen={ false } >
                { [ orderbySelect, orderSelect, orderItemsRange ] }
            </PanelBody>
        ]

        panel = [ ...panel,
            <PanelBody key="filter-products" title= {__( 'Filter Products', 'aawp')} initialOpen={ false } >
                { [ filterbySelect, filterInput, filterItemsRange, filterTypeSelect, filterCompareSelect ] } 
            </PanelBody>
        ]
    }

    if ( look !== 'fields' || ( look === 'fields' && value_attr === 'title' ) ) {

        panel = [ ...panel,
                    <PanelBody key="title" title={__('Title', 'aawp')} initialOpen={ false }>
                        { ! asin.includes( ',' ) ? titleInput : '' }
                        {titleLengthInput}
                    </PanelBody>
                ]
    }


    if ( 'fields' !== look ) {

        panel = [ ...panel,
            <PanelBody key="links" title={__('Links', 'aawp')} initialOpen={ false }>
                { ! asin.includes( ',' ) ? [ linkTitleInput, linkOverwriteInput ] : '' }
                { [ linkTypeSelect, linkIconSelect, linkClassInput ] }
            </PanelBody>
        ]
    } else {
        let values = [ 'title', 'thumb', 'star_rating', 'price', 'button' ];

        if ( values.includes( value_attr ) ) {
             panel = [ ...panel,
                <PanelBody key="links" title={__('Links', 'aawp')} initialOpen={ false }>

                { ! ['button', 'thumb'].includes( value_attr ) ?
                    <ToggleControl
                        label = {__( 'Apply a link to the output', 'aawp')}
                        key="aawp-apply-link-toggle-control"
                        checked={ apply_link }
                        onChange= { (value) => setAttributes( { apply_link: value } ) }
                    />
                : '' }

                { ( true === apply_link || ['button', 'thumb'].includes( value_attr ) ) ? [ linkTitleInput, linkOverwriteInput, linkTypeSelect] : '' }

                </PanelBody>
            ]
        }
    }

    if ( 'link' !== look ) {

        if ( look !== 'fields' || ( look === 'fields' && value_attr === 'description' ) ) {

            panel = [ ...panel,
                        <PanelBody key="description" title={__('Description', 'aawp')} initialOpen={ false }>
                            { ! asin.includes( ',' ) ? descriptionInput : '' }
                            { [ descriptionItemsRange, descriptionLengthInput ] }
                        </PanelBody>
                    ]
        }

        if ( look !== 'fields' || ( look === 'fields' && value_attr === 'thumb' ) ) {

            if ( asin.includes( ',' ) ) {
                imageInput = imageAltInput = imageTitleInput = imageAlignSelect = imageWidthInput = imageHeightInput = imageClassInput = [];
            }

            panel = [ ...panel, 
                        <PanelBody key="images" title={__('Thumbnail', 'aawp')} initialOpen={ false }>
                            { [ imageInput, imageSizeSelect, imageAltInput, imageTitleInput, imageAlignSelect, imageWidthInput, imageHeightInput, imageClassInput ] }
                        </PanelBody>
                    ]
        }

        if ( look !== 'fields' || ( look === 'fields' && value_attr === 'button' ) ) {
        
            panel = [ ...panel,
                        <PanelBody key="button" title={__('Amazon Button', 'aawp')} initialOpen={ false }>
                            {buttonToggle}
                            {button === true ? buttonTextInput : ''}
                        </PanelBody>
                    ]
        }

         if ( ! ( asin.includes( ',') || 'bestseller' === look || 'new' === look  ) ) {

            if ( 'fields' !== look ) {

                panel = [ ...panel,
                    <PanelBody key="extra-detail" title={__('Extra Button', 'aawp')} initialOpen={ false }>
                        { [ buttonDetailInput, buttonDetailTextInput, buttonDetailTitleInput, buttonDetailTargetInput, buttonDetailRelInput ] }
                    </PanelBody>
                ]
            }

            if ( look !== 'fields' || ( look === 'fields' && value_attr === 'price' ) ) {
                panel = [ ...panel,
                            <PanelBody key="pricing" title={__('Price', 'aawp')} initialOpen={ false }>
                                {priceInput}
                                {priceTypeInput}
                                {saleRibbonTextInput}
                            </PanelBody>
                        ]
            } 
        }
    }

    if ( look !== 'fields' || ( look === 'fields' && value_attr === 'star_rating' ) ) {    
        panel = [ ...panel,
                    <PanelBody key="star-ratings" title={__('Rating', 'aawp')} initialOpen={ false }>
                        {starRatingToggle}
                        {star_rating === true && ! asin.includes( ',' ) ? ratingInput : '' }
                        {reviewsToggle}
                    </PanelBody>
                ]
    }

    if ( look !== 'fields' ) {

        panel = [ ...panel,
                    <PanelBody key="templates-and-styles" title={__('Templates & Styles', 'aawp')} initialOpen={ false }>
                        {templateSelect}
                        {asin.includes( ',' ) || 'bestseller' === look || 'new' === look ? gridSelect : ''}
                        {template === 'table' ? numberingToggle : '' }
                        {classInput}
                    </PanelBody>
                ] 
    }

    let oPanel =  <PanelBody key="other" title={__('Other', 'aawp')} initialOpen={ false }>
                    {trackingIdInput}
                </PanelBody>;

    panel = [ ...panel, oPanel ]

    // Because table has only "Other" panel.
    if ( 'table' === look ) {
        panel = oPanel;
    }

    jsx = [
            <InspectorControls key="aawp-look-selector-inspector-controls">
                <PanelBody title= { __( 'General Settings', 'aawp' ) }>
                    <SelectControl
                        label= { __( 'Select A Display Type', 'aawp' ) }
                        value= { look }
                        options={[
                            { value: '', label: __( '-- Select A Display Type --', 'aawp' ) },
                            { value: 'box', label: __( 'Product Box', 'aawp' ) },
                            { value: 'bestseller', label: __( 'Bestseller (Lists)', 'aawp' ) },
                            { value: 'new', label: __( 'New Releases (Lists)', 'aawp' ) },
                            { value: 'fields', label: __( 'Fields (Single product data)', 'aawp' ) },
                            { value: 'link', label: __( 'Text Links', 'aawp' ) },
                            { value: 'table', label: __( 'Comparison  Table', 'aawp' ) }
                        ]}   
                        onChange= { (value) => setAttributes( { look: value } ) }
                    />
                    { 'fields' !== look ? nextInput : [nextInput, valueSelect] }
                </PanelBody>
            
                { '' === look ? [] : panel }

            </InspectorControls>
        ];

        if ( look && ( asin || keywords || table ) ) {

            jsx.push(
                <ServerSideRender
                    key="aawp-server-side-renderer"
                    block="aawp/aawp-block"
                    attributes={ props.attributes }
                />
            );
        } else {

            jsx.push(
                <Placeholder
                    key="aawp-look-selector-wrap"
                    className="aawp-look-selector-wrap">
                    <img src={ aawp_data.icons.logo }/>
                    <p className="block-selector-text">{ __( 'How would you like to place products?', 'aawp' ) }</p>

                    <RadioControl
                        key="aawp-look-selector-radio-control"
                        className="aawp-look-selector-radio-control"
                        selected={ look }
                        options={[
                            { 
                                value: 'box', 
                                label: [
                                    <div className="aawp-display-variant-img"><img key="aawp-look-selector-box-image" src={aawp_data.icons.box} alt="Product Boxes"/></div>,
                                    <p className="aawp-display-variant-label" key="aawp-look-selector-box-label"> { __( 'Product Boxes', 'aawp' ) } </p>,
                                    <p className="aawp-display-variant-description">{__('Promote specific products with visually appealing and conversion optimized product boxes.', 'aawp')}</p>,
                                    <div class="aawp-display-variant-arrow">&#x2192;</div>
                                ]
                            },
                            {
                                value: 'bestseller',
                                label: [
                                    <div className="aawp-display-variant-img"><img src={aawp_data.icons.bestseller} key="aawp-look-selector-bestseller-image" alt="Bestseller (Lists)" /></div>,
                                    <p className="aawp-display-variant-label" key="aawp-look-selector-bestseller-label"> { __( 'Bestseller Lists', 'aawp' ) } </p>,
                                    <p className="aawp-display-variant-description">{__('Create automated bestseller lists and set the number of products individually: e.g. Top 3, Top 10, etc..', 'aawp')}</p>,
                                    <div class="aawp-display-variant-arrow">&#x2192;</div>
                                ]
                            },
                            { 
                                value: 'new',
                                label: [
                                    <div className="aawp-display-variant-img"><img src={aawp_data.icons.new} key="aawp-look-selector-new-image" alt="New Releases (Lists)" /></div>,
                                    <p className="aawp-display-variant-label" key="aawp-look-selector-new-label"> { __( 'New Releases Lists', 'aawp' ) } </p>, 
                                    <p className="aawp-display-variant-description">{__('Attract your visitor’s attention towards the newest products within a specific product group.', 'aawp')}</p>,
                                    <div class="aawp-display-variant-arrow">&#x2192;</div>
                                ] 
                            },
                            { 
                                value: 'fields', 
                                label: [ 
                                    <div className="aawp-display-variant-img"><img src={aawp_data.icons.fields} key="aawp-look-selector-fields-image" alt="Fields (Single product data)" /></div>,
                                    <p className="aawp-display-variant-label" key="aawp-look-selector-fields-label"> { __( 'Data Fields', 'aawp' ) } </p>,
                                    <p className="aawp-display-variant-description">{__('Show individual product information (such as price or buy button) anywhere in your posts / pages.', 'aawp')}</p>,
                                    <div class="aawp-display-variant-arrow">&#x2192;</div>
                                ]
                            },
                            { 
                                value: 'link',
                                label: [
                                    <div className="aawp-display-variant-img"><img src={aawp_data.icons.link} key="aawp-look-selector-links-image" alt="Text Links" /></div>,
                                    <p className="aawp-display-variant-label" key="aawp-look-selector-links-label"> { __( 'Text Links', 'aawp' ) } </p>,
                                    <p className="aawp-display-variant-description">{__('Place customizable text links anywhere inside your normal page text by using our shortcodes.', 'aawp')}</p>,
                                    <div class="aawp-display-variant-arrow">&#x2192;</div>
                                ]
                            },
                            { 
                                value: 'table', 
                                label: [
                                    <div className="aawp-display-variant-img"><img src={aawp_data.icons.table} key="aawp-look-selector-table-image" alt="Table" /></div>,
                                    <p className="aawp-display-variant-label" key="aawp-look-selector-table-label"> { __( 'Comparison Tables', 'aawp' ) } </p>,
                                    <p className="aawp-display-variant-description">{__('Compare multiple products with each other by creating a comparison table with our handy table builder.', 'aawp')}</p>,
                                    <div class="aawp-display-variant-arrow">&#x2192;</div>
                                ]
                            }
                        ]}
                        onChange= { (value) => { 
                            setAttributes( { look: value } );
                            const isEditorSidebarOpened = wp.data.select( 'core/edit-post' ).isEditorSidebarOpened();
                            if ( ! isEditorSidebarOpened ) {
                                wp.data.dispatch( 'core/edit-post' ).openGeneralSidebar('edit-post/document');
                            }
                        } }
                    />
                </Placeholder>                
            );
        }

        return (
            <div { ...useBlockProps() }>
                {jsx}
            </div>
        );
}
