import React, { useEffect } from 'react';
import { __ } from '@wordpress/i18n';
import { DefaultStep, PreviousStepLink } from '../../components/index';
import { useStateValue } from '../../store/store';
import './style.scss';
const { imageDir, isBrizyEnabled } = starterTemplates;
const PageBuilder = () => {
const [ { currentIndex }, dispatch ] = useStateValue();
useEffect( () => {
const startTime = localStorage.getItem( 'st-import-start' );
const endTime = localStorage.getItem( 'st-import-end' );
if ( startTime || endTime ) {
localStorage.removeItem( 'st-import-start' );
localStorage.removeItem( 'st-import-end' );
}
} );
const update = ( builder ) => {
const content = new FormData();
content.append( 'action', 'astra-sites-change-page-builder' );
content.append( '_ajax_nonce', astraSitesVars._ajax_nonce );
content.append( 'page_builder', builder );
fetch( ajaxurl, {
method: 'post',
body: content,
} );
dispatch( {
type: 'set',
builder,
currentIndex: currentIndex + 1,
} );
};
const handleKeyPress = ( e, value ) => {
e = e || window.event;
if ( e.keyCode === 37 ) {
//Left Arrow
if ( e.target.previousSibling ) {
e.target.previousSibling.focus();
}
} else if ( e.keyCode === 39 ) {
//Right Arrow
if ( e.target.nextSibling ) {
e.target.nextSibling.focus();
}
} else if ( e.key === 'Enter' ) {
//Enter
update( value );
}
};
return (
<DefaultStep
content={
<div className="page-builder-screen-wrap middle-content">
<h1>{ __( 'Select Page Builder', 'astra-sites' ) }</h1>
<p className="screen-description">
{ __(
'Please choose your preferred page builder from the list below.',
'astra-sites'
) }
</p>
<div className="page-builder-wrap ist-fadeinUp">
<div
className="page-builder-item d-flex-center-align"
onClick={ () => {
update( 'gutenberg' );
} }
tabIndex="0"
onKeyDown={ ( event ) =>
handleKeyPress( event, 'gutenberg' )
}
>
<div className="elementor-image-wrap image-wrap">
<img
src={ `${ imageDir }block-editor.svg` }
alt={ __( 'Block Editor', 'astra-sites' ) }
/>
</div>
<h6>{ __( 'Block Editor', 'astra-sites' ) }</h6>
</div>
<div
className="page-builder-item d-flex-center-align"
onClick={ () => {
update( 'elementor' );
} }
tabIndex="0"
onKeyDown={ ( event ) =>
handleKeyPress( event, 'elementor' )
}
>
<div className="elementor-image-wrap image-wrap">
<img
src={ `${ imageDir }elementor.svg` }
alt={ __( 'Elementor', 'astra-sites' ) }
/>
</div>
<h6>{ __( 'Elementor', 'astra-sites' ) }</h6>
</div>
<div
className="page-builder-item d-flex-center-align"
onClick={ () => {
update( 'beaver-builder' );
} }
tabIndex="0"
onKeyDown={ ( event ) =>
handleKeyPress( event, 'beaver-builder' )
}
>
<div className="beaver-builder-image-wrap image-wrap">
<img
src={ `${ imageDir }beaver-builder.svg` }
alt={ __(
'Beaver Builder',
'astra-sites'
) }
/>
</div>
<h6>{ __( 'Beaver Builder', 'astra-sites' ) }</h6>
</div>
{ isBrizyEnabled === '1' && (
<div
className="page-builder-item d-flex-center-align"
onClick={ () => {
update( 'brizy' );
} }
tabIndex="0"
onKeyDown={ ( event ) =>
handleKeyPress( event, 'brizy' )
}
>
<div className="brizy-image-wrap image-wrap">
<img
src={ `${ imageDir }brizy.svg` }
alt={ __( 'Brizy', 'astra-sites' ) }
/>
</div>
<h6>{ __( 'Brizy', 'astra-sites' ) }</h6>
</div>
) }
</div>
</div>
}
actions={
<>
<PreviousStepLink before>
{ __( 'Back', 'astra-sites' ) }
</PreviousStepLink>
</>
}
/>
);
};
export default PageBuilder;