import gearImg from '../../assets/32x32/Gear.png';
import { __ } from '@wordpress/i18n';
import { setActiveTabWithParam } from '../../utils';
import { getShortCodeDefaultConfig } from '../../utils/common';
import { FiPlusCircle } from 'react-icons/fi';
import { FaRegCircleCheck } from 'react-icons/fa6';
import { showAlert } from '../../utils/alertHelper';
import { RiLoader2Fill } from 'react-icons/ri';
import { HiOutlineArrowLeft } from 'react-icons/hi';
import { CiEdit } from 'react-icons/ci';
import { PiEye } from 'react-icons/pi';
import { useContext } from '@wordpress/element';
import { ThemeContext } from '../../file-browser/Provider/Context';

const Header = (props) => {
	// const [isSaving, setIsSaving] = useState(false);
	const { activeAccount, accounts, version } = EDBIData;
	const {
		currentTab,
		setCurrentTab,
		title,
		type,
		save,
		setSave,
		isSaving,
		setIsSaving,
		shortCodeTitle,
		setShortCodeTitle,
		shortCodeConfig,
		setShortCodeConfig,
	} = props;

	const {
		setSelectedItems,
	} = useContext(ThemeContext);

	const saveSettings = () => {};

	return (
		<div className='edbi-shortcode-header'>
			<div className='edbi-header__left'>
				<div className='edbi-header__left__img__container'>
					<img
						className='edbi-header__left__img'
						src={gearImg}
						alt={__('Gear', 'easy-dropbox-integration')}
					/>
				</div>
				<h2 className='edbi-header__left__title'>
					{title || __('ShortCode Builder', 'easy-dropbox-integration')}
					<span className='edbi-version'>v{version}</span>
				</h2>
			</div>

			<div className='edbi-header__right'>
				{('create' === type || 'edit' === type) && (
					<form className='edbi-header__left__form'>
						<CiEdit className='edbi-edit-icon' />

						<input
							autoFocus
							type='text'
							placeholder={__('Enter ShortCode Title', 'easy-dropbox-integration')}
							value={shortCodeTitle}
							onChange={(e) => setShortCodeTitle(e.target.value)}
						/>
					</form>
				)}

				{'create' === type || 'edit' === type ? (
					<>
						<button
							className='edbi-button'
							onClick={() => {
								setShortCodeTitle('');
								setShortCodeConfig({
									type: 'gallery',
									source: {
										all: false,
										privateFiles: false,
										items: [],
									},
									settings: {
										...getShortCodeDefaultConfig('gallery')?.config,
									},
								});
								setActiveTabWithParam('shortcodes', setCurrentTab);

								// remove url param #.
								window.location.hash = '';

							}}
						>
							<HiOutlineArrowLeft className='edbi-add-icon' />
							{__('Back', 'easy-dropbox-integration')}
						</button>
						{'edit' === type && (
							<button
								className='edbi-button edbi-button--preview'
								onClick={() => {
									// Get the shortcode ID from URL
									const params = new URLSearchParams(window.location.search);
									const id = params.get('edit');
									if (id) {
										const previewUrl = `${EDBIData?.siteUrl}/edbi-modules/${id}/`;
										window.open(previewUrl, '_blank');
									}
								}}
								title={__('Preview', 'easy-dropbox-integration')}
							>
								<PiEye className='edbi-add-icon' />
								{__('Preview', 'easy-dropbox-integration')}
							</button>
						)}
						<button
							className='edbi-button edbi-button--primary '
							onClick={() => {
								// Validate title before saving
								if (!shortCodeTitle || shortCodeTitle.trim() === '') {
									showAlert({
										title: __('Title Required', 'easy-dropbox-integration'),
										text: __(
											'Please enter a title for this shortcode before saving.',
											'easy-dropbox-integration'
										),
										icon: 'warning',
										showCancelButton: false,
										confirmButtonText: __('OK', 'easy-dropbox-integration'),
									});
									return;
								}

								setIsSaving(true);

								setTimeout(() => {
									setSave(!save);
									setIsSaving(false);
								}, 2000);
							}}
							disabled={isSaving}
						>
							{isSaving ? (
								<>
									<RiLoader2Fill className='edbi-add-icon edbi-loading_icon' />
									{__('Saving.....', 'easy-dropbox-integration')}
								</>
							) : (
								<>
									<FaRegCircleCheck className='edbi-add-icon' />
									{__('Save', 'easy-dropbox-integration')}
								</>
							)}
						</button>
						{/* {
								'create' === type && (
									<button className='px-5 py-3 text-sm text-white rounded-md bg-primary' onClick={
										saveSettings
									}>
										<i className='mr-2 dashicons dashicons-plus-alt'></i>
										Save
									</button>
								)
							}

							{
								'update' === type && (
									<button className='px-5 py-3 text-sm text-white rounded-md bg-primary' onClick={
										saveSettings
									}>
										<i className='mr-2 dashicons dashicons-plus-alt'></i>
										Update
									</button>
								)
							} */}
					</>
				) : (
					<button
						className='edbi-button edbi-button--primary'
						onClick={() => {
							window.location.hash = '#types';
							setActiveTabWithParam('create', setCurrentTab)

							setSelectedItems({
								files: [],
								folders: [],
							})
						}}
					>
						<FiPlusCircle className='edbi-add-icon' />
						{__('Add New ShortCode', 'easy-dropbox-integration')}
					</button>
				)}
			</div>
		</div>
	);
};

export default Header;