import {
    registerBlockType,
    PlainText,
} from "@wordpress/blocks";

import {
    InspectorControls,
} from "@wordpress/editor";

import {
    Fragment,
} from "@wordpress/element";


import {
    SelectControl,
    TextControl,
    RadioControl,
    RangeControl,
    ToggleControl,
} from "@wordpress/components";

const { __ } = wp.i18n;

registerBlockType("syn/block-syn",{
    title: syn_block.title,
    description: syn_block.description,
    icon: "screenoptions",
    category: "widgets",
    attributes: {
        network: { type: "string" },
        username: { type: "string" },
        search: { type: "string" },
        ref: { type: "string" },
        order_by: { type: "string" },
        order: { type: "string" },
        per_page: { type: "number" },
        display_date: { type: "bool" },
        display_username: { type: "bool" },
        display_avatar: { type: "bool" },
        display_media: { type: "bool" },
        characters: { type: "number" },
        stylesheet: { type: "string" }
    },
    
    edit({ className, attributes, setAttributes, isSelected, }) {
        const {
            network,
            username,
            search,
            ref,
            order_by,
            order,
            per_page,
            characters,
            display_date,
            display_username,
            display_avatar,
            display_media,
            stylesheet

        } = attributes;



        //SETTERS

        const setNetwork = (network) => setAttributes({ network });
        const setUsername = (username) => setAttributes({ username });
        const setSearch = (search) => setAttributes({ search });
        const setRef = (ref) => setAttributes({ ref });
        const setOrderBy = (order_by) => setAttributes({ order_by })
        const setOrder = (order) => setAttributes({ order });
        const setPerPage = (per_page) => setAttributes({ per_page });
        const setCharacters = (characters) => setAttributes({ characters });
        const setDisplayDate = (display_date) => setAttributes({ display_date });
        const setDisplayUsername = (display_username) => setAttributes({ display_username });
        const setDisplayAvatar = (display_avatar) => setAttributes({ display_avatar });
        const setDisplayMedia = (display_media) => setAttributes({ display_media });
        const setStylesheet = (stylesheet) => setAttributes({ stylesheet });

 

        var defaultPerPage = per_page === undefined ? 6 : per_page;
        var defaultCharacters = characters === undefined ? 0 : characters;



        var numberOfBlocks = [];


        for(let p=0; p < defaultPerPage; p++){
            
                numberOfBlocks.push(
                    <div class="wp-syn-list-preview wp-syn-list-preview-impair">{''}
                        <div class='wp-syn-head'>{display_avatar &&(
                            <span class='wp-syn-circle'></span>
                        )}
                        <span class='wp-syn-username'>{display_username &&('@username')}</span>
                        </div>
                        <div class='wp-syn-date'>{display_date &&(wp.date.dateI18n(syn_block.date_format))}</div>
                        <div>{display_media &&(
                            <div class='wp-syn-square'></div>
                        )}</div>
                        <div class='wp-syn-lorem'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum semper nibh, quis sollicitudin arcu tincidunt eget. Aliquam nunc mauris, pellentesque sit amet felis id, dignissim finibus diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
                    </div>
                    
                );   
        }

        return (
            <Fragment>

                    <InspectorControls>
                        <div><span>{syn_block.help_message} </span>
                            <a href={syn_block.help_link}>
                                {syn_block.help_label}
                            </a>
                        </div>
                        <SelectControl
                            label={__("network", 'syn')}
                            value={network}
                            onChange={setNetwork}
                            className="network"
                            options={[
                                { value: null, label: '--'},
                                { value: "twitter", label: 'twitter'},
                                { value: "facebook", label: 'facebook'},
                                { value: "instagram", label: 'instagram'}
                            ]}
                        />
                        <TextControl
                            label={__("username : ", 'syn')}
                            value={username}
                            onChange={setUsername}
                            className="username"
                            
                        />
                        <hr />
                        <TextControl
                            label={__("search :", 'syn')}
                            value={search}
                            onChange={setSearch}
                            className="search"
                            
                        />
                        <SelectControl
                            label={__("ref :", 'syn')}
                            value={ref}
                            onChange={setRef}
                            className="ref"
                            options={[
                                { value: "anything", label: '--' },
                                { value: "repost", label: 'yes' },
                                { value: "original", label: 'no' }
                            ]}
                        />

                        <TextControl
                            label={__("order by:", 'syn')}
                            value={order_by}
                            onChange={setOrderBy}
                            className="order_by"
                        />

                        <hr />
                        <SelectControl
                            label={__("order :", 'syn')}
                            value={order}
                            onChange={setOrder}
                            className="order"
                            options={[
                                { value: null, label: '--' },
                                { value: "DESC", label: "DESC" },
                                { value: "ASC", label: "ASC" }
                            ]}
                        />
                        <RangeControl
                            label={__("per page :", 'syn')}
                            value={per_page}
                            onChange={setPerPage}
                            min={1}
                            max={100}
                            default={5}
                            beforeIcon="arrow-down"
                            afterIcon="arrow-up"
                    />
                        <ToggleControl
                            label={__("display date:", 'syn')}
                            checked={display_date}
                            onChange={setDisplayDate}
                            className="display_date"
                            
                        />
                        <ToggleControl
                            label={__("display username:", 'syn')}
                            checked={display_username}
                            onChange={setDisplayUsername}
                            className="display_username"
                            
                        />
                        <ToggleControl
                            label={__("display avatar:", 'syn')}
                            checked={display_avatar}
                            onChange={setDisplayAvatar}
                            className="display_avatar"
                            
                        />
                        <ToggleControl
                            label={__("display media:", 'syn')}
                            checked={display_media}
                            onChange={setDisplayMedia}
                            className="display_media"
                            
                        />
                        <RangeControl
                            label={__("Number of Characters :", 'syn')}
                            value={characters}
                            onChange={setCharacters}
                            min={1}
                            max={100}
                            default={5}
                            beforeIcon="arrow-down"
                            afterIcon="arrow-up"
                    />
                        <SelectControl
                            label={__("Stylesheet:", 'syn')}
                            value={stylesheet}
                            onChange={setStylesheet}
                            className="stylesheet"
                            options={[
                                { value: 'wpsyn', label: "wpsyn" },
                                { value: 'theme', label: "theme" },
                            ]}
                        />

                        
                    </InspectorControls>
                
                <div class={"wp-syn-block-preview"}>
                    <div>{network}</div>
                        
                    <div class={"wp-syn-block-preview-list"}> 
                        {numberOfBlocks}
                    </div>    
                            
                    </div> 
                
            </Fragment>
        );
    },

    save({ className }) {
        return null
    },
});