import './style.css';
import {
    InspectorControls,
    MediaUpload,
    MediaUploadCheck,
    useBlockProps
} from '@wordpress/block-editor';

import {
    PanelBody,
    SelectControl,
    TextControl,
    RangeControl,
    Button
} from '@wordpress/components';

import ServerSideRender from '@wordpress/server-side-render';

export default function Edit({ attributes, setAttributes }) {
    const {
        sign = 'aries',
        section = 'guidance',
        language = 'en',
        heroImageUrl = '',
        heroImageAlt = '',
        heroImageTextWrap = 'none',
        heroImageMaxWidth = '40%',
    } = attributes;

    const signs = [
        { label: 'Aries', value: 'aries' },
        { label: 'Taurus', value: 'taurus' },
        { label: 'Gemini', value: 'gemini' },
        { label: 'Cancer', value: 'cancer' },
        { label: 'Leo', value: 'leo' },
        { label: 'Virgo', value: 'virgo' },
        { label: 'Libra', value: 'libra' },
        { label: 'Scorpio', value: 'scorpio' },
        { label: 'Sagittarius', value: 'sagittarius' },
        { label: 'Capricorn', value: 'capricorn' },
        { label: 'Aquarius', value: 'aquarius' },
        { label: 'Pisces', value: 'pisces' },
    ];

    const sections = [
        { label: 'Guidance', value: 'guidance' },
        { label: 'Advice', value: 'advice' },
        { label: 'Conclusion', value: 'conclusion' },
        { label: 'Mercury Item', value: 'mercury-item' },
        { label: 'Venus Item', value: 'venus-item' },
        { label: 'Mars Item', value: 'mars-item' },
        { label: 'Jupiter Item', value: 'jupiter-item' },
        { label: 'Saturn Item', value: 'saturn-item' },
        { label: 'Uranus Item', value: 'uranus-item' },
        { label: 'Neptune Item', value: 'neptune-item' },
        { label: 'Pluto Item', value: 'pluto-item' },
        { label: 'Moon Item', value: 'moon-item' },
        { label: 'Sun Item', value: 'sun-item' }
    ];

    const blockProps = useBlockProps({
        className: 'ez-horoscope-block',
        style: { border: '1px solid #ddd', padding: '10px', borderRadius: '6px' },
    });

    return (
        <>
            <InspectorControls>

                <PanelBody title="Horoscope Section Settings" initialOpen={true}>
                    <SelectControl
                        label="Zodiac Sign"
                        value={sign}
                        options={signs}
                        onChange={(value) => setAttributes({ sign: value })}
                    />

                    <SelectControl
                        label="Section"
                        value={section}
                        options={sections}
                        onChange={(value) => setAttributes({ section: value })}
                    />

                    <TextControl
                        label="Language"
                        value={language}
                        onChange={(value) => setAttributes({ language: value })}
                    />
                </PanelBody>

                <PanelBody title="Image Settings" initialOpen={false}>
                    <MediaUploadCheck>
                        <MediaUpload
                            onSelect={(media) =>
                                setAttributes({
                                    heroImageUrl: media.url,
                                    heroImageAlt: media.alt || '',
                                })
                            }
                            allowedTypes={['image']}
                            render={({ open }) => (
                                <div style={{ marginBottom: '10px' }}>
                                    {heroImageUrl ? (
                                        <>
                                            <img
                                                src={heroImageUrl}
                                                alt={heroImageAlt}
                                                style={{
                                                    maxWidth: '100%',
                                                    borderRadius: '4px',
                                                    marginBottom: '5px',
                                                }}
                                            />
                                            <Button
                                                isDestructive
                                                variant="secondary"
                                                onClick={() =>
                                                    setAttributes({
                                                        heroImageUrl: '',
                                                        heroImageAlt: '',
                                                    })
                                                }
                                            >
                                                Remove Image
                                            </Button>
                                        </>
                                    ) : (
                                        <Button variant="primary" onClick={open}>
                                            Select Hero Image
                                        </Button>
                                    )}
                                </div>
                            )}
                        />
                    </MediaUploadCheck>

                    <TextControl
                        label="Alt Text"
                        value={heroImageAlt}
                        onChange={(value) => setAttributes({ heroImageAlt: value })}
                    />

                    <SelectControl
                        label="Text Wrapping"
                        value={heroImageTextWrap}
                        options={[
                            { label: 'None', value: 'none' },
                            { label: 'Wrap Left', value: 'left' },
                            { label: 'Wrap Right', value: 'right' },
                        ]}
                        onChange={(value) => setAttributes({ heroImageTextWrap: value })}
                    />

                    <RangeControl
                        label="Max Image Width (%)"
                        value={parseInt(heroImageMaxWidth.replace('%', ''))}
                        onChange={(value) => setAttributes({ heroImageMaxWidth: value + '%' })}
                        min={10}
                        max={100}
                        step={5}
                    />
                </PanelBody>
            </InspectorControls>

            <div {...blockProps}>
                <ServerSideRender
                    block="ezhoroscope/daily-horoscope-sections"
                    attributes={attributes}
                />
            </div>
        </>
    );
}
