import name from '../block.json';
import customLogoURL, { ReactComponent as customLogo } from "../img/logo-dark-sm.svg";

jQuery(document).ready( () => {
    const {registerBlockType} = wp.blocks;
    const {InspectorControls} = wp.blockEditor;
    const {PanelBody, PanelRow, SelectControl, ButtonGroup, Button} = wp.components;

    registerBlockType(name.name, {
        icon: {
            background: '#ffffff',
            foreground: '#ffffff',
            src: customLogo
        } ,
        attributes: {
            blockImage: {
                type: "string",
                default: customLogoURL
            },
            uuid: {
                type: "string",
                default: ""
            },
            type: {
                type: "string",
                default: "native"
            }
        },
        edit: (props) => {
            const {attributes, setAttributes} = props;

            const hasNative = MONDIAD_PHP_VAR.nativeAds && MONDIAD_PHP_VAR.nativeAds.length > 0;
            const hasBanner = MONDIAD_PHP_VAR.bannerAds && MONDIAD_PHP_VAR.bannerAds.length > 0;
            const currentType = (attributes.type === 'native' && hasNative && 'native') ||
                (attributes.type === 'banner' && hasBanner && 'banner') ||
                (hasNative && 'native') ||
                (hasBanner && 'banner') ||
                null;

            // set default type if the block was created before the ad zones were created
            if (currentType !== null && attributes.type !== currentType) {
                setAttributes({...attributes, type: currentType});
            }

            const noAdsText = 'No ads available. Please add at least one native or banner Ad Zone';
            let adChoicesControl = <ButtonGroup>
                <Button
                  variant={currentType === 'native' ? 'primary' : 'secondary'}
                  disabled={!hasNative}
                  onClick = {() => setAttributes({...attributes, type: 'native'})
                }>Native</Button>
                <Button
                  variant={currentType === 'banner' ? 'primary' : 'secondary'}
                  disabled={!hasBanner}
                  onClick = {() => setAttributes({...attributes, type: 'banner'})}
                >Banner</Button>
            </ButtonGroup>
            if (currentType === null) {
                adChoicesControl = <div>{noAdsText}</div>;
            }

            const nativeChoices = (MONDIAD_PHP_VAR.nativeAds || []).map (item => ({
                value: item.adZoneUuidId, label: item.name
            })).sort((a, b) => a.label.localeCompare(b.label));

            const bannerChoices = (MONDIAD_PHP_VAR.bannerAds || []).map (item => ({
                value: item.adZoneUuidId, label: item.name
            })).sort((a, b) => a.label.localeCompare(b.label));

            // set default uuid if the block was created before the ad zones were created
            if (!attributes.uuid && currentType !== null) {
                if (currentType === 'native') {
                    setAttributes({...attributes, uuid: nativeChoices[0].value});
                }
                if (currentType === 'banner') {
                    setAttributes({...attributes, uuid: bannerChoices[0].value});
                }
            }

            return (
                <div>
                    <InspectorControls>
                        <PanelBody
                            title="Mondiad settings"
                            initialOpen={true}
                        >
                            <PanelRow>{adChoicesControl}</PanelRow>

                            {currentType === 'native' && <PanelRow key='native'>
                                <SelectControl
                                    label="Select native Ad"
                                    value={attributes.uuid}
                                    options={nativeChoices}
                                    onChange={(newval) => setAttributes({...attributes, uuid: newval})}
                                />
                            </PanelRow>}

                            {currentType === 'banner' && <PanelRow key='banner'>
                                <SelectControl
                                  label="Select banner Ad"
                                  value={attributes.uuid}
                                  options={bannerChoices}
                                  onChange={(newval) => setAttributes({...attributes, uuid: newval})}
                                />
                            </PanelRow>}

                        </PanelBody>
                    </InspectorControls>
                    {currentType !== null && attributes.uuid && <div style={{width: '200px', height: '100px', border: '1px dotted lightblue'}}>
                        Mondiad {currentType} ad will be here
                    </div>}
                    {currentType !== null && !attributes.uuid && <div>Please select an ad</div>}
                    {currentType === null && <div>{noAdsText}</div>}
                </div>
            );
        },
        save: (props) => {
            const {attributes} = props;
            const type = attributes.type || 'native';
            if (!attributes.uuid) {
                return '';
            }
            return <div>[mondiad-{type}-ad uuid='{attributes.uuid}']</div>;
        }
    });
})