const { __ } = wp.i18n;
const { useState, useEffect, useContext, useRef } = wp.element;
import { AppContext } from "../../AppContext";
import Utils from "../../Utils";
// import Icon from '../Icon';
import ImageGallery from "./ImageGallery";
// import PexelsBrowser from "./PexelsBrowser";
// import UnsplashBrowser from "./UnsplashBrowser";


const ImagePicker = ( { element, canvas, propDataChanged, ...props } ) => {

    const isPro = useContext( AppContext );
    const [currentElement, setCurrentElement] = useState( element );
    // const [showModalUnsplash, setShowModalUnsplash] = useState( false );
    // const [showModalPexels, setShowModalPexels] = useState( false );
    const [showGallery, setShowGallery] = useState( false );
    const [showUrlInput, setShowUrlInput] = useState( false );
    const [sourceType, setSourceType] = useState( element.sourceType || null );

    const mediaUploaderRef = useRef( null );

    useEffect( () => {
        setCurrentElement( element );
        setSourceType( element.sourceType || null );
    }, [element] );

    const getMediaName = ( url ) => {
        if ( !url ) {
            return "";
        }
        var filename = url.substring( url.lastIndexOf( '/' ) + 1 );
        return filename;
    };

    const mediaPop = () => {

        var frame = window.safiWpMedia;
        //   var frame2 = wp.media( {
        //     title: 'Select or Upload an image',
        //     button: {
        //         text: 'Use this image'
        //     },
        //     multiple: false  // Set to true to allow multiple files to be selected
        // } );
        // console.log( frame.on );
        // console.log( frame, frame2 );
        // console.log( frame.on( 'select' ) );
        // // if ( frame ) {
        //   frame.open();
        //   return;
        // }

        const onSelect = () => {

            // Get media attachment details from the frame state
            var attachment = frame.state().get( 'selection' ).first().toJSON();
            // console.log( attachment );

            if ( attachment ) {

                if ( attachment.type !== 'image' ) {
                    alert( 'Selected file must be an image !' );
                    return false;
                }

                //sets the media URL back to the parent
                const data = {
                    sourceType: "media",
                    srcMedia: attachment.url,
                    originalHeight: attachment.height,
                    originalWidth: attachment.width,
                    // height: attachment.height,
                    // width: attachment.width,
                }

                // that.setState( data );


                propDataChanged( data );

                frame.off( 'select', onSelect );
                // frame.remove();
                // frame.detach();
            }
        }

        // When an image is selected in the media frame...
        frame.on( 'select', onSelect );

        // Finally, open the modal on click
        frame.open();

        return false;
    };

    const renderImageSource = () => {

        if ( currentElement.sourceType === 'media' ) {
            return (
                <div>
                    {currentElement.srcMedia &&
                        <img
                            src={currentElement.srcMedia}
                            className="safi-image-picker-thumb"
                            title={getMediaName( currentElement.srcMedia ) || ''}
                        />
                    }
                </div>
            );
        }

        else if ( currentElement.sourceType === 'url' ) {
            let src = null;
            // if ( currentElement.sourceFrom && currentElement.sourceFrom === "unsplash" ) {
            //     // src = srcUrl + "&q=90&w=" + ( props.width * 2 ).toString();
            //     src = currentElement.srcUrl + "&q=90&w=" + ( canvas?.width || "" ).toString();
            // } else {
            //     src = currentElement.srcUrl;
            // }
            src = Utils.getImageDisplayUrl( currentElement.sourceFrom, currentElement.srcUrl, canvas?.width );

            return (
                <div>
                    {src &&
                        <img
                            src={src}
                            className="safi-image-picker-thumb"
                            title={getMediaName( currentElement.srcUrl ) || ''}
                        />
                    }
                </div>
            );
        }
    };

    const isValidUrl = ( urlString ) => {
        try {
            return Boolean( new URL( urlString ) );
        }
        catch ( e ) {
            return false;
        }
    }

    const handleUrlInput = ( e ) => {
        if ( e.keyCode === 13 ) { //enter
            const url = e.target.value;
            if ( isValidUrl( url ) ) {

                const dataChanged = {
                    sourceType: "url",
                    srcUrl: url
                };

                propDataChanged( dataChanged );
                setShowUrlInput( false );
            } else {
                alert( "Invalid URL" );
            }
        }
    };
    // const handleSelectUnsplashImage = ( attachment ) => {

    //     // const unsplashSrc = isPro === true ? attachment.src : attachment.src + window.atob("JnE9NTAmdz0=");
    //     // console.log( attachment );
    //     const data = {
    //         sourceType: "url",
    //         sourceFrom: "unsplash",
    //         // srcUrl: unsplashSrc,
    //         srcUrl: attachment.src,
    //         // height: attachment.height,
    //         // width: attachment.width,
    //         originalHeight: attachment.originalHeight,
    //         originalWidth: attachment.originalWidth,
    //     }

    //     // that.setState( data );

    //     propDataChanged( data );
    //     setShowModalUnsplash( false );

    // }

    // const handleSelectPexelsImage = ( attachment ) => {

    //     // const unsplashSrc = isPro === true ? attachment.src : attachment.src + window.atob("JnE9NTAmdz0=");
    //     // console.log( attachment );
    //     const data = {
    //         sourceType: "url",
    //         sourceFrom: "pexels",
    //         // srcUrl: unsplashSrc,
    //         srcUrl: attachment.src,
    //         // height: attachment.height,
    //         // width: attachment.width,
    //         originalHeight: attachment.originalHeight,
    //         originalWidth: attachment.originalWidth,
    //     }

    //     propDataChanged( data );
    //     setShowModalPexels( false );
    // }

    const handleSelectGalleryImage = ( attachment ) => {

        // const unsplashSrc = isPro === true ? attachment.src : attachment.src + window.atob("JnE9NTAmdz0=");
        // console.log( attachment );
        const data = {
            sourceType: "url",
            sourceFrom: attachment.source,
            // srcUrl: unsplashSrc,
            srcUrl: attachment.url,
            // height: attachment.height,
            // width: attachment.width,
            originalHeight: attachment.originalHeight,
            originalWidth: attachment.originalWidth,
        }

        propDataChanged( data );
        setShowGallery( false );
    }

    const resetImageSource = ( e ) => {
        //newvalue
        // const dataChanged = {
        //     sourceType: null
        // };

        // propDataChanged( dataChanged );
        setSourceType( null );
    }

    const cancelChangeImage = ( e ) => {
        setSourceType( element.sourceType );
    }

    const getClasses = ( () => {
        let classes = ['safi-image-selector'];
        if ( currentElement.sourceType !== null ) {
            classes.push( "--image-selected" );
        }
        return classes.join( " " );
    } )();

    return (
        <div id="safi-image-selector" className={getClasses}>
            {sourceType === null &&
                <>
                    <p>{__( "Select a source", "wpjoli-safi" )}</p>
                    <div className="safi-image-sources flex flex-col justify-center">
                        <div>
                            <div className="uploader">
                                {/* <input id="_unique_name_button" className="button" name="_unique_name_button" type="text" value="Upload"
        onClick={mediaPop} /> */}
                                <button
                                    ref={mediaUploaderRef}
                                    id="safi-media-library-open"
                                    className="button safi-tb-btn w-full"
                                    value="Upload"
                                    onClick={mediaPop}
                                >{__( "Media Library", "wpjoli-safi" )}</button>
                            </div>
                        </div>
                        {/* <div>
                        <button
                            id="btn-browse-unsplash"
                            className={"button safi-tb-btn"}
                            // className={"button" + ( isPro === false ? " --pro" : "" )}
                            value="Browse Unsplash"
                            onClick={() => setShowModalUnsplash( !showModalUnsplash )}
                        // disabled={isPro === false}
                        >Unsplash</button>
                        <UnsplashBrowser
                            isVisible={showModalUnsplash}
                            onSelect={handleSelectUnsplashImage}
                            canvas={canvas}
                            onClose={() => setShowModalUnsplash( false )}
                        />
                    </div> */}
                        {/* Pexels */}
                        {/* <div>
                        <button
                            id="btn-browse-pexels"
                            className={"button safi-tb-btn"}
                            // className={"button" + ( isPro === false ? " --pro" : "" )}
                            value="Browse Pexels"
                            onClick={() => setShowModalPexels( !showModalPexels )}
                        // disabled={isPro === false}
                        >Pexels</button>
                        <PexelsBrowser
                            isVisible={showModalPexels}
                            onSelect={handleSelectPexelsImage}
                            canvas={canvas}
                            onClose={() => setShowModalPexels( false )}
                        />
                    </div> */}
                        <div>
                            <button
                                id="btn-browse-gallery"
                                className={"button safi-tb-btn w-full"}
                                // className={"button" + ( isPro === false ? " --pro" : "" )}
                                value="Browse Gallery"
                                onClick={() => setShowGallery( !showGallery )}
                            // disabled={isPro === false}
                            >
                                Gallery (Stock Photos)
                            </button>
                            {/* {showGallery && */}
                            <ImageGallery
                                className="panel-image-gallery"
                                isVisible={showGallery}
                                onSelect={handleSelectGalleryImage}
                                canvas={canvas}
                                onClose={() => setShowGallery( false )}
                            />
                            {/* } */}
                        </div>
                        <div>
                            <button
                                id="btn-image-from-url"
                                className={"button safi-tb-btn w-full" + ( isPro === false ? " --pro" : "" )}
                                value="Image from URL"
                                onClick={() => setShowUrlInput( !showUrlInput )}
                                disabled={isPro === false}
                            >URL</button>
                        </div>
                    </div>
                    {element.sourceType !== null &&
                        <div className="flex py-2 justify-center">
                            <span className="safi-btn-link" onClick={cancelChangeImage} >Cancel</span>
                        </div>
                    }
                </>
            }
            {showUrlInput &&
                <input type="text" name="" id="safi-img-url" placeholder={"https://..."} onKeyDown={e => handleUrlInput( e )} autoFocus />
            }
            {/* {currentElement.sourceType !== null &&
                <p>Selected image:</p>
            } */}
            {
                sourceType !== null &&
                <div className="safi-image-name">
                    {renderImageSource()}
                    {currentElement.sourceType !== null &&
                        <div className="flex flex-1 flex-center">
                            <button className="button safi-tb-btn" value="Change image" onClick={resetImageSource} >Change image</button>
                        </div>
                    }
                </div>
            }
        </div>
    );
};

export default ImagePicker;