import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { useSettings } from '../../contexts/SettingsContext';
import { isTrue } from '../../Helpers';
import useProGate from '../../hooks/useProGate';
import SettingRow, { UltimateBadge } from '../../components/SettingRow';
import Toggle from '../../components/Toggle';
import Modal from '../../components/Modal';
import ScheduleFields from './ScheduleFields';
import FilterBuilder from './FilterBuilder';

const TEXT_DOMAIN = 'stock-sync-with-google-sheet-for-woocommerce';

/**
 * "Preference" card: add products from sheet, formula sync (+ schedule), bulk edit, sheet filters.
 *
 * @param {Object}   props
 * @param {Array}    props.filters         Filter rows.
 * @param {Function} props.onFiltersChange Receives new filter rows.
 */
const PreferenceSection = ( { filters, onFiltersChange } ) => {
	const { options, updateOption } = useSettings();
	const { isPro, showLockedMessage } = useProGate();
	const [ confirmBulkEditOff, setConfirmBulkEditOff ] = useState( false );
	const live = options.selected_sync_mode === 'live-sync';

	return (
		<div className="ssgs-dashboard__block">
			<h4 className="title">{ __( 'Preference', TEXT_DOMAIN ) }</h4>

			<SettingRow
				name="add_products_from_sheet"
				label={ __( 'Add new products from Google Sheet', TEXT_DOMAIN ) }
				pro
				disabled={ ! live }
				checked={ isTrue( options.add_products_from_sheet ) && live }
				descriptionContent={
					live ? (
						<p>{ __( 'Enable this feature to add new products from Google Sheet', TEXT_DOMAIN ) }</p>
					) : (
						<p className="ssgsw-text-danger">
							{ __( 'This feature is only available for live sync. It is currently disabled because you have selected "Schedule Auto Sync" mode.', TEXT_DOMAIN ) }
						</p>
					)
				}
			/>

			<SettingRow
				name="formula_active"
				label={ __( 'Formula Feature', TEXT_DOMAIN ) }
				pro
				badges={ <span className="ssgs-badge ssgsw-badge-beta">{ __( 'Beta', TEXT_DOMAIN ) }</span> }
				description={ __( 'Enable Formula feature in Google sheets', TEXT_DOMAIN ) }
			>
				{ isTrue( options.formula_active ) && isPro && live && (
					<div className="sync-modes__scheduled">
						<div className="entry-title">
							<h3>{ __( 'Scheduled Sync Frequency', TEXT_DOMAIN ) }</h3>
							<p className="description">{ __( 'Choose how often you want to sync your store and sheet. You set the schedule, we’ll do the rest.', TEXT_DOMAIN ) }</p>
						</div>
						<ScheduleFields
							prefix="ssgsw-formula"
							intervalKey="cron_formula_perdic_sync"
							dayKey="perdic_formula_sync_day"
							timeKey="perdic_formula_sync_time"
						/>
					</div>
				) }
			</SettingRow>

			{ /* Turning bulk edit off asks for confirmation first (legacy show_disable_popup). */ }
			<SettingRow
				name="bulk_edit_option"
				label={ __( 'Bulk edit on Google Sheet', TEXT_DOMAIN ) }
				toggleClassName="check2"
				checked={ isTrue( options.bulk_edit_option ) && ! confirmBulkEditOff }
				onToggle={ ( value ) => ( value ? updateOption( 'bulk_edit_option', true ) : setConfirmBulkEditOff( true ) ) }
				description={ __( 'Enable this feature to bulk edit WooCommerce product data from Google Sheets', TEXT_DOMAIN ) }
			/>

			<div className={ `form-group${ isPro ? '' : ' ssgsw-promo' }` }>
				<label htmlFor="ssgsw-filter_active" className={ isPro ? undefined : 'ssgsw-promo' }>
					<Toggle
						id="ssgsw-filter_active"
						name="filter_active"
						checked={ isTrue( options.filter_active ) }
						onChange={ ( value ) => updateOption( 'filter_active', value ) }
						locked={ ! isPro }
						onLockedClick={ showLockedMessage }
						describedBy="ssgsw-desc-filter_active"
					/>
					<span className="filter-header">{ __( 'Sheet Filters', TEXT_DOMAIN ) }</span>
					{ ! isPro && <UltimateBadge /> }
				</label>
				<p className="filter-description filter-description_extra" id="ssgsw-desc-filter_active">
					{ __( 'Select filters according to your criteria. Products will be displayed in the Google Sheet as per your selected filter items.', TEXT_DOMAIN ) }
				</p>
			</div>

			{ isTrue( options.filter_active ) && <FilterBuilder filters={ filters } onChange={ onFiltersChange } /> }

			{ confirmBulkEditOff && (
				<Modal
					onClose={ () => setConfirmBulkEditOff( false ) }
					renderTitle={ ( id ) => (
						<>
							<button type="button" className="close ssgs_close_button" onClick={ () => setConfirmBulkEditOff( false ) } aria-label={ __( 'Close', TEXT_DOMAIN ) }>
								&times;
							</button>
							<div className="profile-section">
								<div className="profile-details">
									<h3 id={ id } className="profile-title">
										{ __( '⚠️ Wait', TEXT_DOMAIN ) }
									</h3>
									<p className="ssgsw_extra_class">
										{ __(
											'We recommend keeping this feature enabled at all times. It will help you to swiftly update your data and seamlessly sync it with WooCommerce. Disabling this feature may expose you to unintended changes while editing multiple products on Google Sheets. Do you still want to disable it?',
											TEXT_DOMAIN
										) }
									</p>
								</div>
							</div>
						</>
					) }
				>
					<div className="ssgs_first_section">
						<div className="ssgs_button_section">
							<button
								type="button"
								className="ssgsw_save_changes ssgsw_save_changes23"
								onClick={ () => {
									updateOption( 'bulk_edit_option', false );
									setConfirmBulkEditOff( false );
								} }
							>
								{ __( ' Disable at my risk', TEXT_DOMAIN ) }
							</button>
							<button type="button" className="ssgsw_save_close1 ssgsw-react-primary-button" onClick={ () => setConfirmBulkEditOff( false ) }>
								{ __( 'Keep Enabled', TEXT_DOMAIN ) }
							</button>
						</div>
					</div>
				</Modal>
			) }
		</div>
	);
};

export default PreferenceSection;