import { useEffect, useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { useSettings } from '../../contexts/SettingsContext';
import { getSiteAttributes, isTrue } from '../../Helpers';

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

// "Separate Attributes" checkbox and the attribute list it reveals (settings.php attribute block).
const AttributePicker = () => {
	const { options, updateOption } = useSettings();
	const attributes = getSiteAttributes();
	const allowed = Array.isArray( options.allowed_attributes ) ? options.allowed_attributes : [];
	const allSelected = attributes.length > 0 && allowed.length === attributes.length;
	const someSelected = allowed.length > 0 && ! allSelected;
	const selectAllRef = useRef( null );

	useEffect( () => {
		if ( selectAllRef.current ) {
			selectAllRef.current.indeterminate = someSelected;
		}
	}, [ someSelected ] );

	const toggleAttribute = ( slug, checked ) => {
		updateOption( 'allowed_attributes', checked ? [ ...allowed.filter( ( item ) => item !== slug ), slug ] : allowed.filter( ( item ) => item !== slug ) );
	};

	return (
		<div className="form-group ssgsw-separate-attributes">
			<label htmlFor="ssgsw-separate_attributes" className="ssgsw-plain-check">
				<input
					type="checkbox"
					id="ssgsw-separate_attributes"
					name="separate_attributes"
					checked={ isTrue( options.separate_attributes ) }
					onChange={ ( event ) => updateOption( 'separate_attributes', event.target.checked ) }
					aria-describedby="ssgsw-desc-separate_attributes"
				/>
				<span className="label-text">{ __( 'Separate Attributes', TEXT_DOMAIN ) }</span>
			</label>

			<div className="description" id="ssgsw-desc-separate_attributes">
				<p>{ __( 'Enable this to sync attributes as separate columns. You can skip specific attributes below.', TEXT_DOMAIN ) }</p>
			</div>

			{ isTrue( options.separate_attributes ) && (
				<fieldset className="ssgsw_attributes_wrap ssgsw-fieldset">
					<legend className="screen-reader-text">{ __( 'Attributes to sync as columns', TEXT_DOMAIN ) }</legend>
					<div className="ssgsw-attributes-header">
						<div className="ssgsw_attribute_item">
							<input
								ref={ selectAllRef }
								type="checkbox"
								id="select_all_attributes"
								checked={ allSelected }
								onChange={ () => updateOption( 'allowed_attributes', allSelected ? [] : attributes.map( ( attribute ) => attribute.slug ) ) }
							/>
							<label htmlFor="select_all_attributes" className="ssgsw-attributes-all">
								{ __( 'Select All Attributes', TEXT_DOMAIN ) }
							</label>
						</div>
					</div>

					<div className="ssgsw_attributes_columns">
						{ attributes.map( ( attribute ) => (
							<div className="ssgsw_attribute_item" key={ attribute.slug }>
								<input
									type="checkbox"
									id={ `attr_${ attribute.slug }` }
									value={ attribute.slug }
									checked={ allowed.includes( attribute.slug ) }
									onChange={ ( event ) => toggleAttribute( attribute.slug, event.target.checked ) }
								/>
								<label htmlFor={ `attr_${ attribute.slug }` } title={ attribute.label }>
									{ attribute.label }
								</label>
							</div>
						) ) }
					</div>
				</fieldset>
			) }
		</div>
	);
};

export default AttributePicker;