/**
 * WordPress dependencies
 */
import {
	__,
} from '@wordpress/i18n';

import {
	BaseControl,
	Button,
	PanelBody,
	PanelRow,
	Placeholder,
	Spinner,
	ToggleControl,
	SelectControl,
	TextControl,
} from '@wordpress/components';

import {
	Fragment,
	useEffect,
	useState,
} from '@wordpress/element';

import apiFetch from '@wordpress/api-fetch';

import {
	applyFilters,
} from '@wordpress/hooks';

/**
 * Internal dependencies
 */
import compatibleRender from '@utils/compatible-render';
import './settings/blocks-version';

import './settings.scss';

function Settings() {
	const [ isAPILoaded, setIsAPILoaded ] = useState( false );
	const [ isAPISaving, setIsAPISaving ] = useState( false );
	const [ isRegeneratingCSS, setIsRegeneratingCSS ] = useState( false );
	const [ settings, setSettings ] = useState( generateBlocksSettings.settings );

	useEffect( () => {
		setIsAPILoaded( true );
	}, [] );

	function getSetting( name, defaultVal ) {
		let result = defaultVal;

		if ( 'undefined' !== typeof settings[ name ] ) {
			result = settings[ name ];
		}

		return result;
	}

	function updateSettings( e ) {
		setIsAPISaving( true );
		const message = e.target.nextElementSibling;

		apiFetch( {
			path: '/generateblocks/v1/settings',
			method: 'POST',
			data: {
				settings,
			},
		} ).then( ( result ) => {
			setIsAPISaving( false );
			message.classList.add( 'gblocks-action-message--show' );
			message.textContent = result.response;

			if ( ! result.success || ! result.response ) {
				message.classList.add( 'gblocks-action-message--error' );
			} else {
				setTimeout( function() {
					message.classList.remove( 'gblocks-action-message--show' );
				}, 3000 );
			}
		} );
	}

	if ( ! isAPILoaded ) {
		return (
			<Placeholder className="gblocks-settings-placeholder">
				<Spinner />
			</Placeholder>
		);
	}

	return (
		<Fragment>
			<div className="generateblocks-settings-main">
				{ applyFilters( 'generateblocks.dashboard.beforeSettings', '', this ) }

				<PanelBody
					title={ __( 'Settings', 'generateblocks' ) }
				>
					<div className="gblocks-dashboard-panel-row-wrapper">
						<PanelRow className="gblocks-container-width">
							<div className="gblocks-units">px</div>

							<TextControl
								type="number"
								label={ __( 'Global max-width', 'generateblocks' ) }
								help={ !! generateBlocksSettings.gpContainerWidth
									? __( 'The global max-width is set by GeneratePress in the Customizer.', 'generateblocks' )
									: __( 'The global max-width value you can use in your blocks.', 'generateblocks' )
								}
								disabled={ !! generateBlocksSettings.gpContainerWidth }
								value={ generateBlocksSettings.gpContainerWidth || getSetting( 'container_width' ) }
								onChange={ ( value ) => {
									setSettings( {
										...settings,
										container_width: value,
									} );
								} }
							/>

							{ !! generateBlocksSettings.gpContainerWidthLink &&
							<a href={ generateBlocksSettings.gpContainerWidthLink } target="_blank" rel="noopener noreferrer" style={ { fontSize: '12px' } }>
								{ __( 'Go to option →', 'generateblocks' ) }
							</a>
							}
						</PanelRow>

						<PanelRow className="gblocks-css-print-method">
							<SelectControl
								label={ __( 'CSS Print Method', 'generateblocks' ) }
								help={ __( 'Generating your CSS in external files is better for overall performance.', 'generateblocks' ) }
								value={ getSetting( 'css_print_method' ) }
								options={ [
									{ label: __( 'External File', 'generateblocks' ), value: 'file' },
									{ label: __( 'Inline Embedding', 'generateblocks' ), value: 'inline' },
								] }
								onChange={ ( value ) => {
									setSettings( {
										...settings,
										css_print_method: value,
									} );
								} }
							/>
						</PanelRow>

						{ 'file' === getSetting( 'css_print_method' ) &&
							<PanelRow>
								<BaseControl
									id="gblocks-regenerate-css"
									className="gblocks-regenerate-css"
									help={ __( 'Force your external CSS files to regenerate next time their page is loaded.', 'generateblocks' ) }
								>
									<div className="gblocks-action-button">
										<Button
											isSecondary
											onClick={ ( e ) => {
												setIsRegeneratingCSS( true );
												const message = e.target.nextElementSibling;

												apiFetch( {
													path: '/generateblocks/v1/regenerate_css_files',
													method: 'POST',
												} ).then( ( result ) => {
													setIsRegeneratingCSS( false );
													message.classList.add( 'gblocks-action-message--show' );
													message.textContent = result.response;

													if ( ! result.success || ! result.response ) {
														message.classList.add( 'gblocks-action-message--error' );
													} else {
														setTimeout( function() {
															message.classList.remove( 'gblocks-action-message--show' );
														}, 3000 );
													}
												} );
											} }
										>
											{ isRegeneratingCSS && <Spinner /> }
											{ ! isRegeneratingCSS && __( 'Regenerate CSS Files', 'generateblocks' ) }
										</Button>

										<span className="gblocks-action-message"></span>
									</div>
								</BaseControl>
							</PanelRow>
						}

						{ !! generateBlocksSettings.useV1Blocks && (
							<>
								<PanelRow>
									<ToggleControl
										label={ __( 'Sync Responsive Previews', 'generateblocks' ) }
										help={ __( 'Sync our responsive preview controls with the editor responsive previews.', 'generateblocks' ) }
										checked={ getSetting( 'sync_responsive_previews' ) }
										onChange={ ( value ) => {
											setSettings( {
												...settings,
												sync_responsive_previews: value,
											} );
										} }
									/>
								</PanelRow>

								<PanelRow>
									<ToggleControl
										label={ __( 'Disable Google Fonts', 'generateblocks' ) }
										help={ __( 'Prevent Google Fonts from being called on your website and remove them from the font family lists.', 'generateblocks' ) }
										checked={ getSetting( 'disable_google_fonts' ) }
										onChange={ ( value ) => {
											setSettings( {
												...settings,
												disable_google_fonts: value,
											} );
										} }
									/>
								</PanelRow>
							</>
						) }

						{ applyFilters(
							'generateblocks.dashboard.settings',
							'',
							{
								settings,
								setSettings,
							}
						) }

						<div className="gblocks-action-button">
							<Button
								isPrimary
								disabled={ isAPISaving }
								onClick={ ( e ) => updateSettings( e ) }
							>
								{ isAPISaving && <Spinner /> }
								{ ! isAPISaving && __( 'Save', 'generateblocks' ) }
							</Button>

							<span className="gblocks-action-message"></span>
						</div>
					</div>
				</PanelBody>

				{ applyFilters(
					'generateblocks.dashboard.afterSettings',
					'',
					{
						setSettings,
						settings,
					}
				) }
			</div>
		</Fragment>
	);
}

window.addEventListener( 'DOMContentLoaded', () => {
	compatibleRender(
		document.getElementById( 'gblocks-block-default-settings' ),
		<Settings />
	);
} );