import React from 'react';
import SettingsSection from './SettingsSection';
import NumberInput from '../../../components/NumberInput';
import ToggleInput from '../../../components/ToggleInput';

/**
 * Media & Assets Settings Component
 * @param root0
 * @param root0.settings
 * @param root0.updateSetting
 */
const MediaAssetsSettings = ( { settings, updateSetting } ) => {
	return (
		<SettingsSection
			title="Media & Assets"
			description="Settings for media files, images, and site branding"
		>
			<div className="helix-settings-grid">
				<NumberInput
					label="Site Logo"
					description="The site logo (Media ID). Upload a logo in Media Library and enter its ID here."
					value={ settings.siteLogo }
					onChange={ ( value ) => updateSetting( 'siteLogo', value ) }
					min={ 0 }
				/>

				<NumberInput
					label="Site Icon (Favicon)"
					description="The site icon/favicon (Media ID). Upload an icon in Media Library and enter its ID here."
					value={ settings.siteIcon }
					onChange={ ( value ) => updateSetting( 'siteIcon', value ) }
					min={ 0 }
				/>

				{ /* Image Sizes Section - Header spans full width */ }
				<div className="helix-settings-subsection-header">
					<h4>Image Sizes</h4>
				</div>

				{ /* Thumbnail dimensions - side by side */ }
				<NumberInput
					label="Thumbnail Width"
					description="Maximum width of thumbnail images in pixels."
					value={ settings.thumbnailSizeW }
					onChange={ ( value ) =>
						updateSetting( 'thumbnailSizeW', value )
					}
					min={ 0 }
					max={ 2000 }
				/>

				<NumberInput
					label="Thumbnail Height"
					description="Maximum height of thumbnail images in pixels."
					value={ settings.thumbnailSizeH }
					onChange={ ( value ) =>
						updateSetting( 'thumbnailSizeH', value )
					}
					min={ 0 }
					max={ 2000 }
				/>

				{ /* Medium dimensions - side by side */ }
				<NumberInput
					label="Medium Width"
					description="Maximum width of medium-sized images in pixels."
					value={ settings.mediumSizeW }
					onChange={ ( value ) =>
						updateSetting( 'mediumSizeW', value )
					}
					min={ 0 }
					max={ 2000 }
				/>

				<NumberInput
					label="Medium Height"
					description="Maximum height of medium-sized images in pixels."
					value={ settings.mediumSizeH }
					onChange={ ( value ) =>
						updateSetting( 'mediumSizeH', value )
					}
					min={ 0 }
					max={ 2000 }
				/>

				{ /* Large dimensions - side by side */ }
				<NumberInput
					label="Large Width"
					description="Maximum width of large-sized images in pixels."
					value={ settings.largeSizeW }
					onChange={ ( value ) =>
						updateSetting( 'largeSizeW', value )
					}
					min={ 0 }
					max={ 4000 }
				/>

				<NumberInput
					label="Large Height"
					description="Maximum height of large-sized images in pixels."
					value={ settings.largeSizeH }
					onChange={ ( value ) =>
						updateSetting( 'largeSizeH', value )
					}
					min={ 0 }
					max={ 4000 }
				/>

				<ToggleInput
					label="Organize my uploads into month- and year-based folders"
					description="Organize uploaded files into date-based folder structure."
					value={ settings.uploadsUseYearmonthFolders }
					onChange={ ( value ) =>
						updateSetting( 'uploadsUseYearmonthFolders', value )
					}
				/>
			</div>
		</SettingsSection>
	);
};

export default MediaAssetsSettings;
