const { InspectorControls, useBlockProps, InnerBlocks } = wp.blockEditor;
const { PanelBody, SelectControl, TextControl, ToggleControl, RangeControl } = wp.components;
const { useEffect, useState } = wp.element;
import { useSelect } from '@wordpress/data';
import ServerSideRender from '@wordpress/server-side-render';
import { __ } from '@wordpress/i18n';

const edit = (props) => {
    const { className, setAttributes, attributes } = props;
    const blockProps = useBlockProps();

    const lists = useSelect(select => {
        return select('core').getEntityRecords('taxonomy', 'nous_list', {
            per_page: -1,
            orderby: 'name',
            order: 'asc'
        }) || [];
    }, []);

    return (
        <div className={className} {...blockProps}>
            <InspectorControls>
                <PanelBody title={__("Settings", "avecnous-people-lists")} initialOpen={true}>
                    <SelectControl
                        label={__("Content", "avecnous-people-lists")}
                        value={attributes.content}
                        options={[
                            { label: __("None", "avecnous-people-lists"), value: "none" },
                            { label: __("Description", "avecnous-people-lists"), value: "description" },
                            { label: __("Biography", "avecnous-people-lists"), value: "biography" },
                        ]}
                        onChange={(value) => setAttributes({ content: value })}
                    />
                    <TextControl
                        label={__("Title", "avecnous-people-lists")}
                        value={attributes.title}
                        onChange={(value) => setAttributes({ title: value })}
                    />
                    <SelectControl
                        label={__("List", "avecnous-people-lists")}
                        value={attributes.list}
                        options={lists.map(list => ({ label: list.name, value: list.slug }))} 
                        onChange={(value) => setAttributes({ list: value })}
                    />
                    <RangeControl
                        label={__("Number of people", "avecnous-people-lists")}
                        value={attributes.limit}
                        onChange={(value) => setAttributes({ limit: value })}
                        min={0}
                        max={100}
                    />
                    <RangeControl
                        label={__("Offset", "avecnous-people-lists")}
                        value={attributes.index}
                        onChange={(value) => setAttributes({ index: value })}
                        min={1}
                        max={100}
                    />
                    <RangeControl
                        label={__("Columns", "avecnous-people-lists")}
                        value={attributes.columns}
                        onChange={(value) => setAttributes({ columns: value })}
                        min={1}
                        max={12}
                    />
                    <ToggleControl
                        label={__("Show rank in list", "avecnous-people-lists")}
                        checked={attributes.show_rank}
                        onChange={(value) => setAttributes({ show_rank: value })}
                    />

                    <SelectControl
                        label={__("Social medias", "avecnous-people-lists")}
                        value={attributes.social}
                        options={[
                            { label: __("None", "avecnous-people-lists"), value: "none" },
                            { label: __("Text", "avecnous-people-lists"), value: "text" },
                            { label: __("Icon", "avecnous-people-lists"), value: "icon" },
                            { label: __("Media", "avecnous-people-lists"), value: "media" },
                            { label: __("Name", "avecnous-people-lists"), value: "name" },
                        ]}
                        onChange={(value) => setAttributes({ social: value })}
                    />
                    <SelectControl
                        label={__("Template", "avecnous-people-lists")}
                        value={attributes.template}
                        options={Object.keys(NousPeopleLists.templates).map((t=>({label:NousPeopleLists.templates[t].name,value:t})))}
                        onChange={(value) => setAttributes({ template: value })}
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender
                block="avecnous-people-lists/list"
                attributes={attributes}
            />
        </div>
    );
};

export default edit;