import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
const { InspectorControls, useBlockProps } = wp.blockEditor;
import { applyFilters } from '@wordpress/hooks';
import { 
    Button,
    Icon,
    PanelBody, 
    PanelRow, 
    SelectControl,
    TextControl, 
    ToggleControl,
    __experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
import { 
    arrowDown,
    arrowUp,
} from '@wordpress/icons';
const { useEffect, useState } = wp.element;
import ServerSideRender from '@wordpress/server-side-render';
import {save_null} from '../common';
import './selector.scss';
import { StyleControl } from '@agencenous/blocss';
import DeselectControl from '../DeselectControl';

const edit = (props) => {
    const { className, setAttributes, attributes } = props;
    const { 
        enableLink,
        enableCookie,
        layout,
        blockStyle,
        label,
        showDescription,
        orderBy,
        order,
        gap,
     } = attributes;
    const blockProps = useBlockProps();

    const isReactElement = (element) => {
        if(element && element.$$typeof && element.$$typeof.toString() === 'Symbol(react.element)'){
            return element;
        }
        return null;
    }
    
    return (
        <div className={className} {...blockProps}>
            <InspectorControls>
                <PanelBody title={__("Settings")} initialOpen={true}>
                    {isReactElement(applyFilters('editor.selector.inspector.controls.settings.before', props))}
                    <ToggleControl
                        label={__("Enable Link", "personalizer")}
                        checked={enableLink}
                        onChange={(value) => setAttributes({ enableLink: value })}
                    />
                    <ToggleControl
                        label={__("Enable Cookie", "personalizer")}
                        checked={enableCookie}
                        onChange={(value) => setAttributes({ enableCookie: value })}
                    />
                    <PanelRow>
                        <SelectControl
                            label={__("Order by")}
                            value={orderBy}
                            options={[
                                { label: __("Name"), value: "name" },
                                { label: __("Order"), value: "sort_order" },
                            ]}
                            onChange={(value) => setAttributes({ orderBy: value })}
                        />
                        <Button
                            onClick={() => setAttributes( { order:  order=='asc' ? 'desc' : 'asc' } )}
                            size="small"
                        >
                            <Icon icon={arrowUp}  style={{opacity: order=='asc' ?  1 : 0.5}} />
                            <Icon icon={arrowDown} style={{opacity: order=='desc' ?  1 : 0.5}} />
                        </Button>
                    </PanelRow>
                    {isReactElement(applyFilters('editor.selector.inspector.controls.settings.after', props))}
                </PanelBody>
                <PanelBody title={__("Display")} initialOpen={true}>
                    <SelectControl
                        label={__("Layout")}
                        value={layout}
                        options={[
                            { label: __("Row"), value: "row" },
                            { label: __("List"), value: "list" },
                            { label: __("Select"), value: "select" },
                            { label: __("Drop-down"), value: "dropdown" },
                        ]}
                        onChange={(value) => setAttributes({ layout: value })}
                    />
                    <TextControl
                        label={__("Label")}
                        value={label}
                        onChange={(value) => setAttributes({ label: value })}
                    />
                    {(layout === 'select' || layout === 'dropdown') && (
                        <StyleControl
                            colors={Personalizer.colorPalette}
                            color={{background: true}}
                            value={blockStyle}
                            onChange={(value) => setAttributes({ blockStyle: value })}
                        />
                    )}
                    <ToggleControl
                        label={__("Description")}
                        checked={showDescription}
                        onChange={(value) => setAttributes({ showDescription: value })}
                    />
                    <UnitControl
                        label={__("Gap", "personalizer")}
                        value={gap}
                        onChange={(value) => setAttributes({ gap: value })}
                        labelPosition="side"
                        units={ [
                            { value: 'px', label: 'px', default: 5 },
                            { value: '%', label: '%', default: 0 },
                            { value: 'em', label: 'em', default: 0.5 },
                            { value: 'rem', label: 'rem', default: 0.5 },
                        ] }
                        isResetValueOnUnitChange={true}
                    />
                </PanelBody>
                <DeselectControl {...props} />
            </InspectorControls>
            <ServerSideRender
                block="personalizer/selector" 
                attributes={attributes}
            />
        </div>
    );
};

registerBlockType( 'personalizer/selector', {
    edit: edit,
    save: save_null,
} );