import React, { useEffect } from 'react'; import { PhotoIcon, TrashIcon } from '@heroicons/react/24/outline'; import { __ } from '@wordpress/i18n'; import { addFilter } from '@wordpress/hooks'; import { RangeControl } from '@wordpress/components'; import { MediaUpload } from '@wordpress/media-utils'; import { useStateValue } from '../../store/store'; import { getDataUri, sendPostMessage } from '../../utils/functions'; import { initialState } from '../../store/reducer'; // import ToggleSwitch from '../../components/toggle-switch'; const SiteLogo = () => { const replaceMediaUpload = () => MediaUpload; const [ { siteLogo }, dispatch ] = useStateValue(); // const [ showTitle, setShowTitle ] = useState( true ), // toggleTitle = () => setShowTitle( ( prev ) => ! prev ); addFilter( 'editor.MediaUpload', 'core/edit-post/components/media-upload/replace-media-upload', replaceMediaUpload ); const onSelectImage = ( media ) => { const mediaData = { id: media.id, url: media.url, width: siteLogo.width, }; if ( window.location.protocol === 'http:' ) { getDataUri( media.url, function ( data ) { mediaData.dataUri = data; updateValues( mediaData ); } ); } else { updateValues( mediaData ); } }; const dispatchPostMessage = ( action, data ) => { sendPostMessage( { param: action, data, }, 'astra-starter-templates-preview' ); }; const updateValues = ( data ) => { dispatch( { type: 'set', siteLogo: data, } ); dispatchPostMessage( 'siteLogo', data ); }; const removeImage = () => { updateValues( initialState.siteLogo ); }; const onWidthChange = ( width ) => { const newLogoOptions = { ...siteLogo, width, }; dispatch( { type: 'set', siteLogo: newLogoOptions, } ); dispatchPostMessage( 'siteLogo', newLogoOptions ); }; // const handleOnChangeToggleTitle = () => { // dispatchPostMessage( 'siteTitle', ! showTitle ); // toggleTitle(); // }; useEffect( () => { if ( !! astraSitesVars?.isRTLEnabled ) { const rangeControl = document.querySelector( '.components-range-control__wrapper' ); if ( rangeControl === null ) { return; } // Range control slider styling for RTL. const currentValue = rangeControl.children[ 3 ].style.left; rangeControl.children[ 3 ].style.marginRight = '-10px'; rangeControl.children[ 3 ].style.removeProperty( 'margin-left' ); rangeControl.children[ 3 ].style.right = currentValue; rangeControl.children[ 4 ].style.removeProperty( 'transform' ); rangeControl.children[ 4 ].style.removeProperty( 'left' ); rangeControl.children[ 4 ].style.right = currentValue; rangeControl.children[ 4 ].style.transform = 'translateX(50%)'; } } ); return ( <>