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

import Content from './components/Content';
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import { withSelect } from '@wordpress/data';
import { getEntityRecord } from '@wordpress/core-data';
import { compose } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { showAlert } from '../utils/alertHelper';

const App = (props) => {
	const hash = window.location.hash;
	const hashValue = hash.replace('#', '');

	if ('object' !== typeof props.options || 0 === Object.keys(props.options).length) {
		return (
			<div className='edbi-loading-screen' style={{ height: '100vh' }}>
				<img src={EDBIData.preloaderImg} />
			</div>
		);
	}

	const [activeItem, setActiveItem] = useState(hashValue || 'accounts');
	// const [ formData, setFormData ] = useState(EDBIData.settings || {});

	const [settings, setSettings] = useState(props.options.edbi_settings);
	const [isSaving, setSaving] = useState(false);

	// console.log('settings', settings);

	useEffect(() => {
		if (isSaving) {
			const data = { edbi_settings: settings };
			wp.data
				.dispatch('core')
				.saveSite(data)
				.then((response) => {
					setSaving(false);
					// console.log('response', response);
					showAlert({
						position: 'top-end',
						title: __('Saved', 'easy-dropbox-integration'),
						icon: 'success',
						showConfirmButton: false,
						toast: true,
						timer: 3000,
						timerProgressBar: true,
					});
				})
				.catch((e) => {
					setSaving(false);
					console.error(e);
					showAlert({
						position: 'top-end',
						toast: true,
						title: __('Error', 'easy-dropbox-integration'),
						icon: 'error',
						timer: 3000,
						timerProgressBar: true,
						showConfirmButton: false,
					});
				});
		}
	}, [isSaving]);

	return (
		<div className='edbi-page'>
			<Header
				title={__('Settings', 'easy-dropbox-integration')}
				settings={settings}
				setSettings={setSettings}
				isSaving={isSaving}
				setSaving={setSaving}
			/>
			<div className='w-full edbi-shortcode-config'>
				<div className='edbi-page__body row'>
					<Sidebar
						activeItem={activeItem}
						setActiveItem={setActiveItem}
						settings={settings}
					/>
					<div className='edbi-page__content '>
						<Content
							activeItem={activeItem}
							settings={settings}
							setSettings={setSettings}
							isSaving={isSaving}
							setSaving={setSaving}
						/>
					</div>
				</div>
			</div>
		</div>
	);
};

export default compose(
	withSelect((select) => {
		const optionKeys = ['edbi_settings'];

		const settings = select('core').getEntityRecord('root', 'site');
		const options = {};

		if (settings) {
			optionKeys.forEach((key) => {
				if (settings[key]) {
					options[key] = settings[key];
				}
			});
		}

		console.log( 'options', options )

		return {
			options,
		};
	})
)(App);