import React, { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

import CreateShortCode from './components/CreateShortCode';
import Header from './components/Header';

import ShortCodes from './components/contents/ShortCodes';
import EditShortCode from './components/EditShortCode';
import { getShortCodeDefaultConfig } from '../utils/common';

const App = () => {
	const hash = window.location.hash;
	const hashValue = hash.replace('#', '');
	const [activeItem, setActiveItem] = useState(hashValue || 'types');
	const [save, setSave] = useState(false);
	const [isSaving, setIsSaving] = useState(false);

	const [shortCodeTitle, setShortCodeTitle] = useState('');

	const [shortCodeConfig, setShortCodeConfig] = useState({
		type: 'gallery',
		status: 'active',
		source: {
			all: false,
			privateFiles: false,
			items: [],
		},
		settings: {
			...getShortCodeDefaultConfig('gallery')?.config,
		},
		permission: {
			displayFor: 'everyone',
			displayForUsers: {
				users: [],
				everyone: false,
				except: [],
			},
			showDeniedMsg: true,
			deniedMsg: __('Permission Denied!', 'easy-dropbox-integration'),
		},
		notification: {
			uploadNotification: false,
			recipients: '%admin_email%',
			skipCurrentUserNotification: true,
		},
		// uploadImmediately: true,
		isFormUploader: false,
	});

	const [currentTab, setCurrentTab] = useState('shortcodes');

	const { activeAccount, ajaxNonce } = EDBIData;

	useEffect(() => {
		if (window.location.search.includes('edit')) {
			setCurrentTab('edit');
		}

		if (window.location.search.includes('create')) {
			setCurrentTab('create');
		}
	}, [currentTab]);

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

	return (
		<div className='edbi-page'>
			<Header
				type={currentTab}
				currentTab={currentTab}
				setCurrentTab={setCurrentTab}
				save={save}
				setSave={setSave}
				shortCodeTitle={shortCodeTitle}
				setShortCodeTitle={setShortCodeTitle}
				shortCodeConfig={shortCodeConfig}
				setShortCodeConfig={setShortCodeConfig}
				isSaving={isSaving}
				setIsSaving={setIsSaving}
			/>
			<div className={'shortcodes' === currentTab ? 'edbi-page__con' : 'edbi-page__body'}>
				{currentTab === 'shortcodes' && (
					<ShortCodes
						currentTab={currentTab}
						setCurrentTab={setCurrentTab}
						setShortCodeConfig={setShortCodeConfig}
						setShortCodeTitle={setShortCodeTitle}
					/>
				)}
				{currentTab === 'create' && (
					<CreateShortCode
						activeItem={activeItem}
						setActiveItem={setActiveItem}
						save={save}
						setSave={setSave}
						shortCodeConfig={shortCodeConfig}
						setShortCodeConfig={setShortCodeConfig}
						shortCodeTitle={shortCodeTitle}
						isSaving={isSaving}
						setIsSaving={setIsSaving}
						setShortCodeTitle={setShortCodeTitle}
						actionType='create'
						scbType='shortcode'
					/>
				)}
				{currentTab === 'edit' && (
					<EditShortCode
						activeItem={activeItem}
						setActiveItem={setActiveItem}
						save={save}
						setSave={setSave}
						isSaving={isSaving}
						setIsSaving={setIsSaving}
						shortCodeConfig={shortCodeConfig}
						setShortCodeConfig={setShortCodeConfig}
						shortCodeTitle={shortCodeTitle}
						setShortCodeTitle={setShortCodeTitle}
						actionType='edit'
						scbType='shortcode'
					/>
				)}
			</div>
		</div>
	);
};

export default App;