const { __ } = wp.i18n;
const { useState, useEffect, useContext, useRef, memo } = wp.element;

// import { AppContext } from "../../AppContext";
import Icon from "../Icon";
import Utils from "../../Utils";


const SVGModal = ( {
    code,
    className,
    isVisible,
    elementId,
    onSave,
    onClose,
    ...props } ) => {
    // const isPro = useContext( AppContext );

    // const userOptions = { ...options } || {};
    const [codeVal, setCodeVal] = useState( code );

    const [svgErrors, setSvgErrors] = useState( false );

    useEffect( () => {
        // const newOptions = { ...options } || {};
        // setSettings( { ...defaultOptions, ...newOptions } );
        setCodeVal( code );
    }, [code, elementId] );

    const updateSVG = ( e ) => {
        const value = e.target.value;
        const svgValidation = Utils.validateSVG( value );

        setSvgErrors( svgValidation === true ? false : ["Invalid SVG"] );

        // valSvg = value;
        // setValSvg( value );

        setCodeVal( value );
        if ( svgValidation === true ) {
        }
    };
    const getStyles = ( () => {
        return {
            display: isVisible ? "flex" : "none",
        };
    } )();


    return (
        <div className="safi-cover-bg" style={getStyles}>
            <div
                id="magic-image-settings"
                className={`safi-modal-window ${className || ""}`}
            >
                {/* Container */}
                <div className="safi-magic-image-container flex flex-col h-full">
                    {/* HEader */}
                    <div className="safi-magic-image-settings--header relative flex justify-center items-center px-5">
                        <h2>{__( "SVG Code", "wpjoli-safi" )}</h2>
                        <div className="close-btn flex-center" onClick={onClose} style={{
                            top: '50%',
                            right: '10px',
                            transform: 'translateY(-50%)',
                        }}>
                            <div className="close-symbol"></div>
                        </div>
                    </div>

                    <div className="flex flex-1 gap-4 py-4 px-5">
                        <div className="safi-magic-image-settings--container flex-1">
                            <textarea
                                // id="safi-svg-code"
                                className="safi-plain safi-svg-code --safi-scroll-thin"
                                name="prop-css"
                                placeholder="<svg>....</svg> (Paste your svg here)"
                                value={codeVal}
                                onChange={updateSVG}
                                style={svgErrors !== false ? {
                                    border: "1px solid #d63638",
                                    boxShadow: "0 0 5px 1px #d63638",
                                } : {}}
                            // onBlur={( e ) => propDataChanged( { svgCode: e.target.value } )}
                            />
                            {svgErrors !== false &&
                                <ol className="css-errors mt-2">
                                    {svgErrors.map( ( error ) => {
                                        return ( <li>{error}</li> );
                                    } )}
                                </ol>
                            }

                        </div>
                    </div>

                    {/* Footer */}
                    <div className="flex justify-end py-4 px-5">
                        <button
                            className="safi-tb-btn safi-btn-primary safi-btn-md"
                            onClick={() => onSave( codeVal )}
                            disabled={svgErrors !== false}
                        >Save</button>
                    </div>
                </div>

                {/* Auto-select settings */}

                {/* <div className="safi-close " onClick={onClose} >
                    <Icon icon="close" />
                </div> */}
            </div>
        </div>
    );
};

export default SVGModal;