import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { SelectControl, FontSizePicker, TextControl } from '@wordpress/components';
import { useState, useEffect } from 'react';
import './editor.scss';

export default function Edit( { attributes, setAttributes } ) {
    const { heading, pointsFontSizeLarge, headingFontSizeLarge, listStyleType } = attributes;

    const fontSizes = [
        {
            name: __( 'Small', 'key-points' ),
            slug: 'small',
            size: '12px',
        },
        {
            name: __( 'Medium', 'key-points' ),
            slug: 'medium',
            size: '16px',
        },
        {
            name: __( 'Large', 'key-points' ),
            slug: 'large',
            size: '24px',
        },
        {
            name: __( 'Extra Large', 'key-points' ),
            slug: 'x-large',
            size: '36px',
        },
    ];

    const listStyleTypeOptions = [
        { label: __( 'Disc', 'lcp' ), value: 'disc' },
        { label: __( 'Circle', 'lcp' ), value: 'circle' },
        { label: __( 'Square', 'lcp' ), value: 'square' },
        { label: __( 'None', 'lcp' ), value: 'none' },
    ];

    // Static Lorem Ipsum key points (5 unique points)
    const loremIpsumPoints = [
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
        "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    ];

    const [keyPoints, setKeyPoints] = useState(loremIpsumPoints); // Set initial key points to the Lorem Ipsum array

    return (
        <>
            {/* Inspector Controls */}
            <InspectorControls>
                {/* List Style Dropdown */}
                <SelectControl
                    label={ __( 'List Style', 'lcp' ) }
                    value={ listStyleType }
                    options={ listStyleTypeOptions }
                    onChange={ ( newValue ) => {
                        setAttributes( { listStyleType: newValue } );
                    } }
                />

                {/* Heading Input */}
                <TextControl
                    label={ __( 'Heading', 'lcp' ) }
                    value={ heading || '' }
                    onChange={ ( newHeading ) => setAttributes( { heading: newHeading } ) }
                />

                {/* Font Size Picker for Points */}
                <FontSizePicker
                    fontSizes={ fontSizes }
                    units={ ['px', 'em', 'rem', 'vw', 'vh'] }
                    value={ pointsFontSizeLarge }
                    onChange={ ( newFontSize ) => {
                        if ( typeof newFontSize === 'string' ) {
                            setAttributes( { pointsFontSizeLarge: newFontSize } );
                        }
                    } }
                    fallbackFontSize={ '16px' }
                />

                {/* Font Size Picker for Heading */}
                <FontSizePicker
                    fontSizes={ fontSizes }
                    units={ ['px', 'em', 'rem', 'vw', 'vh'] }
                    value={ headingFontSizeLarge }
                    onChange={ ( newFontSize ) => {
                        if ( typeof newFontSize === 'string' ) {
                            setAttributes( { headingFontSizeLarge: newFontSize } );
                        }
                    } }
                    fallbackFontSize={ '24px' }
                />
            </InspectorControls>

            {/* Block Content */}
            <p { ...useBlockProps() }>
                { __( 'Key Points – hello from the editor!', 'lcp' ) }
            </p>
            { heading && <h2>{ heading }</h2> }

            {/* Display key points */}
            { keyPoints && keyPoints.length > 0 && (
                <ul style={{ listStyleType: listStyleType }}>
                    {keyPoints.map((point, index) => (
                        <li key={index} style={{ fontSize: pointsFontSizeLarge }}>
                            {point}
                        </li>
                    ))}
                </ul>
            )}
        </>
    );
}