import { __ } from '@wordpress/i18n';
import { useSettings } from '../../contexts/SettingsContext';
import { isTrue } from '../../Helpers';
import useProGate from '../../hooks/useProGate';
import SettingRow, { NewBadge } from '../../components/SettingRow';

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

// "Display product images" master switch with featured image / ALT text / gallery options.
const ProductImagesSection = () => {
	const { options, updateOptions } = useSettings();
	const { isPro } = useProGate();
	const featured = isTrue( options.show_product_images );
	const gallery = isTrue( options.show_product_gallery );
	const enabled = featured || gallery;

	// Legacy toggleProductImagesMaster(): off clears every image option, on defaults to the featured image.
	const toggleMaster = ( checked ) => {
		if ( ! checked ) {
			updateOptions( { show_product_images: 0, show_product_gallery: 0, show_product_image_alt: 0 } );
		} else if ( ! featured && ! gallery ) {
			updateOptions( { show_product_images: 1 } );
		}
	};

	return (
		<SettingRow
			name="product_images_master"
			label={ __( 'Display product images in Google Sheets', TEXT_DOMAIN ) }
			pro
			className="ssgsw-product-images-section"
			checked={ enabled }
			onToggle={ toggleMaster }
			description={ __( 'When enabled, product images will be added as columns in your spreadsheet.', TEXT_DOMAIN ) }
		>
			{ enabled && isPro && (
				<div className="ssgsw-product-images-options">
					<p className="ssgsw-product-images-options__title">{ __( 'Images to include', TEXT_DOMAIN ) }</p>

					<SettingRow
						name="show_product_images"
						label={ __( 'Featured image', TEXT_DOMAIN ) }
						pro
						className="ssgsw-product-images-option ssgsw-product-images-option--featured"
						// Legacy onFeaturedImageToggle(): ALT text only makes sense with a featured image.
						onToggle={ ( value ) => updateOptions( value ? { show_product_images: true } : { show_product_images: false, show_product_image_alt: 0 } ) }
						description={ __( 'The main product image (WooCommerce featured image). Synced in the Image column.', TEXT_DOMAIN ) }
					>
						{ featured && (
							<SettingRow
								name="show_product_image_alt"
								label={ __( 'Image alt text', TEXT_DOMAIN ) }
								pro
								className="ssgsw-product-images-nested"
								description={ __( 'Sync and manage alt text for the featured image from Google Sheets.', TEXT_DOMAIN ) }
							/>
						) }
					</SettingRow>

					<SettingRow
						name="show_product_gallery"
						label={ __( 'Gallery images', TEXT_DOMAIN ) }
						pro
						badges={ <NewBadge /> }
						className="ssgsw-product-images-option"
						description={ __( 'Additional product images from the WooCommerce gallery.', TEXT_DOMAIN ) }
					>
						{ gallery && (
							<div className="ssgsw-gallery-column-count">
								<label htmlFor="product_gallery_column_count">{ __( 'Gallery image columns', TEXT_DOMAIN ) }</label>
								<select
									id="product_gallery_column_count"
									name="product_gallery_column_count"
									className="ssgsw_addons-input"
									value={ String( options.product_gallery_column_count || 2 ) }
									onChange={ ( event ) => updateOptions( { product_gallery_column_count: Number( event.target.value ) } ) }
									aria-describedby="ssgsw-gallery-count-help"
								>
									{ Array.from( { length: 10 }, ( _, index ) => String( index + 1 ) ).map( ( count ) => (
										<option key={ count } value={ count }>
											{ count }
										</option>
									) ) }
								</select>
								<p id="ssgsw-gallery-count-help">{ __( 'Select how many gallery image columns to add to your sheet.', TEXT_DOMAIN ) }</p>
							</div>
						) }
					</SettingRow>

					{ gallery && (
						<div className="ssgsw-notice-info">
							{ __(
								'FlexStock will create columns like Gallery 1, Gallery 2, up to the number above. Any extra gallery images beyond this limit will be ignored.',
								TEXT_DOMAIN
							) }
						</div>
					) }
				</div>
			) }
		</SettingRow>
	);
};

export default ProductImagesSection;