import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl, ToggleControl, SelectControl, CheckboxControl } from '@wordpress/components';
import { useEffect, useState } from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';
import './editor.scss';

export default function Edit({ attributes, setAttributes }) {
    const blockProps = useBlockProps();
    const [availableTypes, setAvailableTypes] = useState({});

    useEffect(() => {
        apiFetch({ path: '/jvb/v1/types' }).then(types => {
            setAvailableTypes(JSON.parse(types));
        });
    }, []);

    return (
        <>
            <InspectorControls>
                <PanelBody title={__('Feed Settings', 'jvb')}>
                    <TextControl
                        label={__('Title', 'jvb')}
                        value={attributes.title}
                        onChange={(title) => setAttributes({ title })}
                    />

                    <ToggleControl
                        label={__('Inherit Current Query', 'jvb')}
                        help={__('Inherit filters from the current archive or taxonomy query', 'jvb')}
                        checked={attributes.inheritQuery}
                        onChange={(inheritQuery) => setAttributes({ inheritQuery })}
                    />

                    {!attributes.inheritQuery && (
                        <div className="feed-content-types">
                            <p className="components-base-control__label">
                                {__('Content Types', 'jvb')}
                            </p>
                            <div className="checkbox-list">
                                {Object.entries(availableTypes).map(([id, label]) => (
                                    <CheckboxControl
                                        key={id}
                                        label={label}
                                        checked={attributes.contentTypes.includes(id)}
                                        onChange={(isChecked) => {
                                            const newTypes = isChecked
                                                ? [...attributes.contentTypes, id]
                                                : attributes.contentTypes.filter(t => t !== id);
                                            setAttributes({contentTypes: newTypes});
                                        }}
                                    />
                                ))}
                            </div>
                            <div className="select-all-wrapper">
                                <CheckboxControl
                                    label={__('Select All', 'jvb')}
                                    checked={attributes.contentTypes.length === Object.keys(availableTypes).length}
                                    onChange={(isChecked) => {
                                        setAttributes({
                                            contentTypes: isChecked ? Object.keys(availableTypes) : []
                                        });
                                    }}
                                />
                            </div>
                        </div>
                    )}

                    <SelectControl
                        label={__('Items Per Page', 'jvb')}
                        value={attributes.itemsPerPage}
                        options={[
                            {label: '12', value: 12},
                            {label: '24', value: 24},
                            {label: '36', value: 36}
                        ]}
                        onChange={(itemsPerPage) => setAttributes({itemsPerPage: parseInt(itemsPerPage)})}
                    />

                    <SelectControl
                        label={__('Default Order', 'jvb')}
                        value={attributes.defaultOrder}
                        options={[
                            {label: __('Newest First', 'jvb'), value: 'date_desc' },
                            { label: __('Oldest First', 'jvb'), value: 'date_asc' },
                            { label: __('Random', 'jvb'), value: 'random' }
                        ]}
                        onChange={(defaultOrder) => setAttributes({ defaultOrder })}
                    />
                </PanelBody>
            </InspectorControls>

            <div {...blockProps}>
                <div className="feed-block-preview">
                    <h2>{attributes.title}</h2>
                    <div className="feed-filters">
                        <div className="filter-preview">
                            {attributes.contentTypes.map(type => (
                                <span key={type} className="content-type-badge">
                                    {availableTypes[type]}
                                </span>
                            ))}
                        </div>
                    </div>
                    <div className="feed-grid-placeholder">
                        {[...Array(6)].map((_, i) => (
                            <div key={i} className="grid-item-placeholder" />
                        ))}
                    </div>
                </div>
            </div>
        </>
    );
}