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

import { getShortCodeDefaultConfig } from '../utils/common';
import ShortCodeConfig from './components/ShortCodeConfig';

const ShortCodeModal = ({
	data,
	setData,
	save,
	setSave,
	type = 'gallery',
	isFormUploader = '',
	uploadImmediately = false,
}) => {
	const [activeItem, setActiveItem] = useState('source');
	const [isSaving, setIsSaving] = useState(false);

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

	const [shortCodeConfig, setShortCodeConfig] = useState({
		type: type,
		status: 'active',
		source: {
			all: false,
			privateFiles: false,
			items: [],
		},
		settings: {
			...getShortCodeDefaultConfig(type)?.config,
		},
	});

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

	const { activeAccount, ajaxNonce } = EDBIData;

	return (
		<div className='edbi-page'>
			<div className={'shortcodes' === currentTab ? 'edbi-page__con' : 'edbi-page__body'}>
				<ShortCodeConfig
					activeItem={activeItem}
					setActiveItem={setActiveItem}
					save={save}
					setSave={setSave}
					data={data}
					setData={setData}
					isSaving={isSaving}
					setIsSaving={setIsSaving}
					shortCodeConfig={shortCodeConfig}
					setShortCodeConfig={setShortCodeConfig}
					shortCodeTitle={shortCodeTitle}
					setShortCodeTitle={setShortCodeTitle}
					actionType='edit'
					scbType='modal'
					isFormUploader={isFormUploader}
					uploadImmediately={uploadImmediately}
					// sbSelectedItems={{}}
				/>
			</div>
		</div>
	);
};

export default ShortCodeModal;