import React, { useMemo, useState, useEffect } from '@wordpress/element';
import { showAlert } from '../../../utils/alertHelper';
import { formatBytes, openAuthPopup } from '../../../utils/common';
import { ProChecker } from '../../../components/ProChecker';
import { hasPro } from '../../../utils/hasPro';

import { decode } from 'js-base64';
import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { LuPlus } from 'react-icons/lu';
import { FaUser } from 'react-icons/fa';



const Accounts = (props) => {
	const { settings, setSettings, isSaving, setSaving } = props;

	const initialAccounts = useMemo(() => JSON.parse(decode(EDBIData.accounts)), []);
	const [accountList, setAccountList] = useState(initialAccounts);

	useEffect(() => {
		const handleAccountsUpdated = (event) => {
			if (event?.detail) {
				setAccountList(event.detail);
			}
		};

		window.addEventListener('edbi_accounts_updated', handleAccountsUpdated);

		return () => {
			window.removeEventListener('edbi_accounts_updated', handleAccountsUpdated);
		};
	}, []);

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

	const removeAccount = (account) => {
		showAlert({
			title: __( 'Remove Account', 'easy-dropbox-integration' ),
			text: __('Are you sure you want to remove this account?', 'easy-dropbox-integration'),
			icon: 'warning',
			showCancelButton: true,
			confirmButtonText: __('Remove', 'easy-dropbox-integration'),
			confirmButtonColor: '#d33',
			cancelButtonText: __('No', 'easy-dropbox-integration'),
			reverseButtons: true,
		}).then((result) => {
			if (result.isConfirmed) {
				// delete accounts[account];
				// setFormData({
				//     ...formData,
				//     accounts
				// })

				wp.ajax
					.post('edbi_remove_account', {
						account_id: account,
						nonce: EDBIData?.ajaxNonce,
					})
					.then((response) => {
						setAccountList((prevAccounts) => {
							const updatedAccounts = { ...prevAccounts };
							delete updatedAccounts[account];
							return updatedAccounts;
						});
						// setFormData({
						// 	...formData,
						// 	accounts,
						// });

						showAlert({
							title: __( 'Account Removed', 'easy-dropbox-integration' ),
							text: __('Account has been removed successfully', 'easy-dropbox-integration'),
							icon: 'success',
							showCancelButton: false,
							confirmButtonText: __('Ok', 'easy-dropbox-integration'),
							// confirmButtonColor: '#007bff',
						});
					})
					.catch((error) => {
						console.error(error);
						showAlert({
							title: __('Error', 'easy-dropbox-integration'),
							text: __('An error occurred while removing account', 'easy-dropbox-integration'),
							icon: 'error',
							showCancelButton: false,
							confirmButtonText: __('Ok', 'easy-dropbox-integration'),
							// confirmButtonColor: '#007bff',
						});
					});
			}
		});
	};

	return (
		<>
			<div className="edbi-settings-header">
				<div className="edbi-settings-header__title-wrapper">
					<h3>
						<FaUser style={{ marginRight: '10px' }} />
						{__('Accounts', 'easy-dropbox-integration')}
					</h3>
					<div className="edbi-settings-description">
						{__(
							'Manage your Dropbox accounts.',
							'easy-dropbox-integration'
						)}
					</div>
				</div>
			</div>
			<div className='edbi-shortcode-builder__container edbi-shortcode-settings__accounts'>
				<div className='edbi-accounts_header'>
					<h3>{__('Accounts', 'easy-dropbox-integration')}</h3>
					{settings?.advanced?.ownApp?.clientID &&
						settings?.advanced?.ownApp?.appSecret && (
							<>
								{Object.keys(accountList).length >= 1 && !hasPro ? (
									<ProChecker tooltipDirection='top'>
										<button
											className='edbi-button edbi-button--primary'
											// disabled={ !hasPro}
											onClick={() => {
												if (!hasPro) return;
												openAuthPopup();
											}}
										>
											<LuPlus />
											{__('Add Account', 'easy-dropbox-integration')}
										</button>
									</ProChecker>
								) : (
									<button
										className='edbi-button edbi-button--primary'
										onClick={() => {
											openAuthPopup();
										}}
									>
										<LuPlus style={{ fontSize: '16px' }} />
										{__('Add Account', 'easy-dropbox-integration')}
									</button>
								)}
							</>
						)}
				</div>

				<div className='edbi-accounts'>
					{Object.keys(accountList).map((account, index) => {
						const accountData = accountList[account];
						return (
							<div key={index} className='edbi-account'>
								<div key={index} className='edbi-account-info'>
									<img src={accountData.photo} alt={accountData.name} />
									<div className='edbi-account-name'>
										<h3>{accountData.name}</h3>
										<p>{accountData.email}</p>
									</div>
								</div>

								{accountData?.storage && (
									<div className='edbi-account-storage'>
										<p className='edbi-account-storage-text'>
											{formatBytes(accountData.storage.used)}{' '}
											{__('used of', 'easy-dropbox-integration')}{' '}
											{formatBytes(accountData.storage.allocated)}{' '}
											{accountData.storage.percent ? (
												<span className='edbi-account-storage-percent'>
													({accountData.storage.percent}%)
												</span>
											) : null}
										</p>
									</div>
								)}

								<button
									className='edbi-settings-remove__button'
									onClick={() => {
										removeAccount(account);
									}}
								>
									{__('Remove', 'easy-dropbox-integration')}
								</button>
							</div>
						);
					})}
				</div>
			</div>
		</>
	);
};

export default Accounts;