import { useState } from '@wordpress/element';
import { ButtonGroup, Button, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import SegmentedSlider from '../../SegmentedSlider';
import CustomRange from '../../CustomRange';

const Gallery = ({ type, value, shortCodeConfig, updateShortCodeConfig }) => {
	const [columnDevices, setColumnDevices] = useState('mobile');
	const devices = [
		{
			label: __('Mobile', 'easy-dropbox-integration'),
			value: 'mobile',
		},
		{
			label: __('Tablet', 'easy-dropbox-integration'),
			value: 'tablet',
		},
		{
			label: __('Laptop', 'easy-dropbox-integration'),
			value: 'laptop',
		},
		{
			label: __('Desktop', 'easy-dropbox-integration'),
			value: 'desktop',
		},
		{
			label: __('Large Desktop', 'easy-dropbox-integration'),
			value: 'largeDesktop',
		},
	];

	return (
		<>
			<div className='edbi-shortcode-builder__container'>
				<div>
					<div>
						<h3>{__('Gallery Layout', 'easy-dropbox-integration')}</h3>
						<ButtonGroup className='edbi-shortcode-builder__gallery-button-layout'>
							<Button
								className={`edbi-shortcode-builder__gallery-layout__button  ${
									shortCodeConfig?.settings?.gallery?.layout === 'justified'
										? 'edbi-shortcode-builder__gallery-layout__button--active'
										: ''
								}`}
								// isPrimary={
								// 	shortCodeConfig?.settings?.gallery?.layout === 'justified'
								// }
								onClick={() => {
									updateShortCodeConfig('settings', {
										...shortCodeConfig.settings,
										gallery: {
											...shortCodeConfig.settings?.gallery,
											layout: 'justified',
										},
									});
								}}
							>
								{__('Justified', 'easy-dropbox-integration')}
							</Button>
							<Button
								className={`edbi-shortcode-builder__gallery-layout__button edbi-shortcode-builder__gallery-layout__masonry ${
									shortCodeConfig?.settings?.gallery?.layout === 'masonry'
										? 'edbi-shortcode-builder__gallery-layout__button--active'
										: ''
								}`}
								// isPrimary={shortCodeConfig?.settings?.gallery?.layout === 'masonry'}
								onClick={() => {
									updateShortCodeConfig('settings', {
										...shortCodeConfig.settings,
										gallery: {
											...shortCodeConfig.settings?.gallery,
											layout: 'masonry',
										},
									});
								}}
							>
								{__('Masonry', 'easy-dropbox-integration')}
							</Button>
							<Button
								className={`edbi-shortcode-builder__gallery-layout__button  ${
									shortCodeConfig?.settings?.gallery?.layout === 'grid'
										? 'edbi-shortcode-builder__gallery-layout__button--active'
										: ''
								}`}
								// isPrimary={shortCodeConfig?.settings?.gallery?.layout === 'grid'}
								onClick={() => {
									updateShortCodeConfig('settings', {
										...shortCodeConfig.settings,
										gallery: {
											...shortCodeConfig.settings?.gallery,
											layout: 'grid',
										},
									});
								}}
							>
								{__('Grid', 'easy-dropbox-integration')}
							</Button>
						</ButtonGroup>
					</div>
					<div>
						<h3 className='edbi-shortcode-builder__columns-title'>
							{__('Columns', 'easy-dropbox-integration')}
						</h3>
						<div className='edbi-shortcode-builder__columns'>
							<div>
								<ButtonGroup className='edbi-shortcode-builder__columns-button'>
									{devices.map((device, idx) => {
										return (
											<Button
												className={`edbi-shortcode-builder__columns-button__button  ${
													columnDevices === device.value
														? 'edbi-shortcode-builder__columns-button__button--active'
														: ''
												} ${
													devices.length - 1 !== idx
														? 'edbi-right-border'
														: ''
												}`}
												// isPrimary={columnDevices === device.value}
												onClick={() => {
													setColumnDevices(device.value);
													// updateShortCodeConfig('settings', {
													// 	...shortCodeConfig?.settings,
													// 	columns: {
													// 		...shortCodeConfig?.settings?.gallery?.columns,
													// 		[columnDevices]: device.value,
													// 	},
													// });
												}}
												key={device.value}
												// disabled
											>
												{device.label}
											</Button>
										);
									})}
								</ButtonGroup>
							</div>

							<SegmentedSlider
								value={shortCodeConfig?.settings?.gallery?.columns?.[columnDevices]}
								min={1}
								max={24}
								onChange={(value) => {
									updateShortCodeConfig('settings', {
										...shortCodeConfig.settings,
										gallery: {
											...shortCodeConfig.settings?.gallery,
											columns: {
												...shortCodeConfig.settings?.gallery?.columns,
												[columnDevices]: value,
											},
										},
									});
								}}
							/>
						</div>
					</div>

					<div className='edbi-shortcode-builder__aspect-ratio'>
						<h3>{__('Aspect Ratio', 'easy-dropbox-integration')}</h3>
						<ButtonGroup className='edbi-shortcode-builder__aspect-ratio-button'>
							<Button
								// isPrimary={
								// 	shortCodeConfig?.settings?.gallery?.aspectRatio === '1:1'
								// }
								className={`edbi-shortcode-builder__aspect-ratio-button__button edbi-right-border ${
									shortCodeConfig?.settings?.gallery?.aspectRatio === '1:1'
										? 'edbi-shortcode-builder__aspect-ratio-button__button--active'
										: ''
								} `}
								onClick={() => {
									updateShortCodeConfig('settings', {
										...shortCodeConfig.settings,
										gallery: {
											...shortCodeConfig.settings?.gallery,
											aspectRatio: '1:1',
										},
									});
								}}
							>
								{__('1:1', 'easy-dropbox-integration')}
							</Button>

							<Button
								// isPrimary={
								// 	shortCodeConfig?.settings?.gallery?.aspectRatio === '3:2'
								// }
								className={`edbi-shortcode-builder__aspect-ratio-button__button  edbi-right-border ${
									shortCodeConfig?.settings?.gallery?.aspectRatio === '3:2'
										? 'edbi-shortcode-builder__aspect-ratio-button__button--active'
										: ''
								}`}
								onClick={() => {
									updateShortCodeConfig('settings', {
										...shortCodeConfig.settings,
										gallery: {
											...shortCodeConfig.settings?.gallery,
											aspectRatio: '3:2',
										},
									});
								}}
							>
								{__('3:2', 'easy-dropbox-integration')}
							</Button>

							<Button
								// isPrimary={
								// 	shortCodeConfig?.settings?.gallery?.aspectRatio === '4:3'
								// }
								className={`edbi-shortcode-builder__aspect-ratio-button__button  edbi-right-border ${
									shortCodeConfig?.settings?.gallery?.aspectRatio === '4:3'
										? 'edbi-shortcode-builder__aspect-ratio-button__button--active'
										: ''
								}`}
								onClick={() => {
									updateShortCodeConfig('settings', {
										...shortCodeConfig.settings,
										gallery: {
											...shortCodeConfig.settings?.gallery,
											aspectRatio: '4:3',
										},
									});
								}}
							>
								{__('4:3', 'easy-dropbox-integration')}
							</Button>

							<Button
								// isPrimary={
								// 	shortCodeConfig?.settings?.gallery?.aspectRatio === '9:16'
								// }
								className={`edbi-shortcode-builder__aspect-ratio-button__button  edbi-right-border ${
									shortCodeConfig?.settings?.gallery?.aspectRatio === '9:16'
										? 'edbi-shortcode-builder__aspect-ratio-button__button--active'
										: ''
								}`}
								onClick={() => {
									updateShortCodeConfig('settings', {
										...shortCodeConfig.settings,
										gallery: {
											...shortCodeConfig.settings?.gallery,
											aspectRatio: '9:16',
										},
									});
								}}
							>
								{__('9:16', 'easy-dropbox-integration')}
							</Button>

							<Button
								// isPrimary={
								// 	shortCodeConfig?.settings?.gallery?.aspectRatio === '16:9'
								// }
								className={`edbi-shortcode-builder__aspect-ratio-button__button  edbi-right-border ${
									shortCodeConfig?.settings?.gallery?.aspectRatio === '16:9'
										? 'edbi-shortcode-builder__aspect-ratio-button__button--active'
										: ''
								}`}
								onClick={() => {
									updateShortCodeConfig('settings', {
										...shortCodeConfig.settings,
										gallery: {
											...shortCodeConfig.settings?.gallery,
											aspectRatio: '16:9',
										},
									});
								}}
							>
								{__('16:9', 'easy-dropbox-integration')}
							</Button>

							<Button
								// isPrimary={
								// 	shortCodeConfig?.settings?.gallery?.aspectRatio === '21:9'
								// }
								className={`edbi-shortcode-builder__aspect-ratio-button__button  ${
									shortCodeConfig?.settings?.gallery?.aspectRatio === '21:9'
										? 'edbi-shortcode-builder__aspect-ratio-button__button--active'
										: ''
								}`}
								onClick={() => {
									updateShortCodeConfig('settings', {
										...shortCodeConfig.settings,
										gallery: {
											...shortCodeConfig.settings?.gallery,
											aspectRatio: '21:9',
										},
									});
								}}
							>
								{__('21:9', 'easy-dropbox-integration')}
							</Button>
						</ButtonGroup>
					</div>
				</div>
			</div>

			<div className='edbi-shortcode-builder__container'>
				<div className='edbi-shortcode-builder__settings-fields__item'>
					<CustomRange
						id='gallery-margin'
						label={__('Margin', 'easy-dropbox-integration')}
						value={shortCodeConfig?.settings?.gallery?.margin ?? 0}
						min={0}
						max={100}
						step={1}
						activeColor='rgba(88, 32, 229, 1)' // <- change controller/filled color here
						trackColor='rgba(38, 47, 64, 0.1)' // <- change the unfilled track color here
						onChange={(value) => {
							updateShortCodeConfig('settings', {
								...shortCodeConfig.settings,
								gallery: {
									...shortCodeConfig.settings?.gallery,
									margin: value,
								},
							});
						}}
					/>
				</div>
				<div className='edbi-shortcode-builder__thumbnail-view'>
					<h3>{__('Thumbnail View', 'easy-dropbox-integration')}</h3>
					<ButtonGroup className='edbi-shortcode-builder__thumbnail-view__buttons'>
						<Button
							className={`edbi-shortcode-builder__thumbnail-view__button ${
								shortCodeConfig?.settings?.gallery?.thumbnailView === 'rounded'
									? 'edbi-shortcode-builder__thumbnail-view__button--active'
									: ''
							} `}
							onClick={() => {
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									gallery: {
										...shortCodeConfig.settings?.gallery,
										thumbnailView: 'rounded',
									},
								});
							}}
						>
							{__('Rounded', 'easy-dropbox-integration')}
						</Button>
						<Button
							className={`edbi-shortcode-builder__thumbnail-view__button ${
								shortCodeConfig?.settings?.gallery?.thumbnailView === 'square'
									? 'edbi-shortcode-builder__thumbnail-view__button--active'
									: ''
							} `}
							onClick={() => {
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									gallery: {
										...shortCodeConfig.settings?.gallery,
										thumbnailView: 'square',
									},
								});
							}}
						>
							{__('Square', 'easy-dropbox-integration')}
						</Button>
					</ButtonGroup>
				</div>
			</div>

			<div className='edbi-shortcode-builder__container'>
				<div className='edbi-shortcode-builder__overlay__header'>
					<h3>{__('Enable Overlay?', 'easy-dropbox-integration')}</h3>
					<ToggleControl
						checked={shortCodeConfig?.settings?.gallery?.overlay}
						onChange={(value) => {
							updateShortCodeConfig('settings', {
								...shortCodeConfig.settings,
								gallery: {
									...shortCodeConfig.settings?.gallery,
									overlay: value,
								},
							});
						}}
					/>
				</div>
				{shortCodeConfig?.settings?.gallery?.overlay && (
					<div className='edbi-shortcode-builder__overlay'>
						<h3>{__('Display', 'easy-dropbox-integration')}</h3>
						<ButtonGroup className='edbi-shortcode-builder__overlay__buttons'>
							<Button
								className={`edbi-shortcode-builder__overlay__button ${
									shortCodeConfig?.settings?.gallery?.overlayDisplay === 'always'
										? 'edbi-shortcode-builder__overlay__button--active'
										: ''
								} `}
								onClick={() => {
									updateShortCodeConfig('settings', {
										...shortCodeConfig.settings,
										gallery: {
											...shortCodeConfig.settings?.gallery,
											overlayDisplay: 'always',
										},
									});
								}}
							>
								{__('Always', 'easy-dropbox-integration')}
							</Button>
							<Button
								className={`edbi-shortcode-builder__overlay__button ${
									shortCodeConfig?.settings?.gallery?.overlayDisplay === 'onHover'
										? 'edbi-shortcode-builder__overlay__button--active'
										: ''
								} `}
								onClick={() => {
									updateShortCodeConfig('settings', {
										...shortCodeConfig.settings,
										gallery: {
											...shortCodeConfig.settings?.gallery,
											overlayDisplay: 'onHover',
										},
									});
								}}
							>
								{__('On Hover', 'easy-dropbox-integration')}
							</Button>
						</ButtonGroup>

						<div className='edbi-shortcode-builder__overlay__settings'>
							<ToggleControl
								label={__('Show Title?', 'easy-dropbox-integration')}
								checked={shortCodeConfig?.settings?.gallery?.showTitle}
								onChange={(value) => {
									updateShortCodeConfig('settings', {
										...shortCodeConfig.settings,
										gallery: {
											...shortCodeConfig.settings?.gallery,
											showTitle: value,
										},
									});
								}}
							/>

							<ToggleControl
								label={__('Show Size?', 'easy-dropbox-integration')}
								checked={shortCodeConfig?.settings?.gallery?.showSize}
								onChange={(value) => {
									updateShortCodeConfig('settings', {
										...shortCodeConfig.settings,
										gallery: {
											...shortCodeConfig.settings?.gallery,
											showSize: value,
										},
									});
								}}
							/>
						</div>
					</div>
				)}
			</div>
		</>
	);
};

export default Gallery;