import { ButtonGroup, Button, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const MediaPlayer = ({ shortCodeConfig, updateShortCodeConfig }) => {
	const mediaPlayerConfig = shortCodeConfig?.settings?.mediaPlayer || {};

	return (
		<>
			{/* Playlist Settings */}
			<div className='edbi-shortcode-builder__container'>
				<div className='edbi-shortcode-builder__overlay__header'>
					<h3>{__('Show Playlist', 'easy-dropbox-integration')}</h3>
					<ToggleControl
						checked={mediaPlayerConfig.showPlaylist ?? true}
						onChange={(value) => {
							updateShortCodeConfig('settings', {
								...shortCodeConfig.settings,
								mediaPlayer: {
									...mediaPlayerConfig,
									showPlaylist: value,
								},
							});
						}}
					/>
				</div>

				{mediaPlayerConfig.showPlaylist && (
					<>
						{/* Playlist Style */}
						<div className='edbi-shortcode-builder__thumbnail-view'>
							<h3>{__('Playlist Style', 'easy-dropbox-integration')}</h3>
							<ButtonGroup className='edbi-shortcode-builder__thumbnail-view__buttons'>
								<Button
									className={`edbi-shortcode-builder__thumbnail-view__button ${
										mediaPlayerConfig.playlistStyle === 'list'
											? 'edbi-shortcode-builder__thumbnail-view__button--active'
											: ''
									} ${mediaPlayerConfig.playlistStyle !== 'list' ? 'edbi-right-border' : ''}`}
									onClick={() => {
										updateShortCodeConfig('settings', {
											...shortCodeConfig.settings,
											mediaPlayer: {
												...mediaPlayerConfig,
												playlistStyle: 'list',
											},
										});
									}}
								>
									{__('List', 'easy-dropbox-integration')}
								</Button>
								<Button
									className={`edbi-shortcode-builder__thumbnail-view__button ${
										mediaPlayerConfig.playlistStyle === 'grid'
											? 'edbi-shortcode-builder__thumbnail-view__button--active'
											: ''
									}`}
									onClick={() => {
										updateShortCodeConfig('settings', {
											...shortCodeConfig.settings,
											mediaPlayer: {
												...mediaPlayerConfig,
												playlistStyle: 'grid',
											},
										});
									}}
								>
									{__('Grid', 'easy-dropbox-integration')}
								</Button>
							</ButtonGroup>
						</div>

						{/* Playlist Position */}
						<div className='edbi-shortcode-builder__thumbnail-view'>
							<h3>{__('Playlist Position', 'easy-dropbox-integration')}</h3>
							<ButtonGroup className='edbi-shortcode-builder__thumbnail-view__buttons'>
								<Button
									className={`edbi-shortcode-builder__thumbnail-view__button ${
										mediaPlayerConfig.playlistPosition === 'left'
											? 'edbi-shortcode-builder__thumbnail-view__button--active'
											: ''
									} ${mediaPlayerConfig.playlistPosition !== 'left' ? 'edbi-right-border' : ''}`}
									onClick={() => {
										updateShortCodeConfig('settings', {
											...shortCodeConfig.settings,
											mediaPlayer: {
												...mediaPlayerConfig,
												playlistPosition: 'left',
											},
										});
									}}
								>
									{__('Left', 'easy-dropbox-integration')}
								</Button>
								<Button
									className={`edbi-shortcode-builder__thumbnail-view__button ${
										mediaPlayerConfig.playlistPosition === 'right'
											? 'edbi-shortcode-builder__thumbnail-view__button--active'
											: ''
									} ${mediaPlayerConfig.playlistPosition !== 'right' ? 'edbi-right-border' : ''}`}
									onClick={() => {
										updateShortCodeConfig('settings', {
											...shortCodeConfig.settings,
											mediaPlayer: {
												...mediaPlayerConfig,
												playlistPosition: 'right',
											},
										});
									}}
								>
									{__('Right', 'easy-dropbox-integration')}
								</Button>
								<Button
									className={`edbi-shortcode-builder__thumbnail-view__button ${
										mediaPlayerConfig.playlistPosition === 'bottom'
											? 'edbi-shortcode-builder__thumbnail-view__button--active'
											: ''
									}`}
									onClick={() => {
										updateShortCodeConfig('settings', {
											...shortCodeConfig.settings,
											mediaPlayer: {
												...mediaPlayerConfig,
												playlistPosition: 'bottom',
											},
										});
									}}
								>
									{__('Bottom', 'easy-dropbox-integration')}
								</Button>
							</ButtonGroup>
						</div>
					</>
				)}
			</div>

			<div className='edbi-shortcode-builder__container'>
				<div className='edbi-shortcode-builder__overlay__header'>
					<h3>{__('Playback Settings', 'easy-dropbox-integration')}</h3>
				</div>
				<div className='edbi-shortcode-builder__overlay__settings'>
					<ToggleControl
						label={__('Autoplay', 'easy-dropbox-integration')}
						checked={mediaPlayerConfig.autoplay ?? false}
						onChange={(value) => {
							updateShortCodeConfig('settings', {
								...shortCodeConfig.settings,
								mediaPlayer: {
									...mediaPlayerConfig,
									autoplay: value,
								},
							});
						}}
					/>
				</div>
			</div>

			{/* Playlist Options */}
			{mediaPlayerConfig.showPlaylist && (
				<div className='edbi-shortcode-builder__container'>
					<div className='edbi-shortcode-builder__overlay__settings'>
						<ToggleControl
							label={__('Opened Playlist', 'easy-dropbox-integration')}
							checked={mediaPlayerConfig.openedPlaylist ?? true}
							onChange={(value) => {
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									mediaPlayer: {
										...mediaPlayerConfig,
										openedPlaylist: value,
									},
								});
							}}
						/>

						<ToggleControl
							label={__('Show Playlist Toggle', 'easy-dropbox-integration')}
							checked={mediaPlayerConfig.showPlaylistToggle ?? true}
							onChange={(value) => {
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									mediaPlayer: {
										...mediaPlayerConfig,
										showPlaylistToggle: value,
									},
								});
							}}
						/>

						<ToggleControl
							label={__('Show Next/Prev Buttons', 'easy-dropbox-integration')}
							checked={mediaPlayerConfig.showNextPrev ?? true}
							onChange={(value) => {
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									mediaPlayer: {
										...mediaPlayerConfig,
										showNextPrev: value,
									},
								});
							}}
						/>
					</div>
				</div>
			)}

			{/* Playlist Item Display Options */}
			{mediaPlayerConfig.showPlaylist && (
				<div className='edbi-shortcode-builder__container'>
					<div className='edbi-shortcode-builder__overlay__header'>
						<h3>{__('Playlist Item Display', 'easy-dropbox-integration')}</h3>
					</div>

					<div className='edbi-shortcode-builder__overlay__settings'>
						<ToggleControl
							label={__('Show Number Prefix', 'easy-dropbox-integration')}
							checked={mediaPlayerConfig.showNumberPrefix ?? true}
							onChange={(value) => {
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									mediaPlayer: {
										...mediaPlayerConfig,
										showNumberPrefix: value,
									},
								});
							}}
						/>

						<ToggleControl
							label={__('Show Duration', 'easy-dropbox-integration')}
							checked={mediaPlayerConfig.showDuration ?? true}
							onChange={(value) => {
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									mediaPlayer: {
										...mediaPlayerConfig,
										showDuration: value,
									},
								});
							}}
						/>

						<ToggleControl
							label={__('Show File Size', 'easy-dropbox-integration')}
							checked={mediaPlayerConfig.showFileSize ?? false}
							onChange={(value) => {
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									mediaPlayer: {
										...mediaPlayerConfig,
										showFileSize: value,
									},
								});
							}}
						/>

						<ToggleControl
							label={__('Show Modified Date', 'easy-dropbox-integration')}
							checked={mediaPlayerConfig.showModifiedDate ?? false}
							onChange={(value) => {
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									mediaPlayer: {
										...mediaPlayerConfig,
										showModifiedDate: value,
									},
								});
							}}
						/>
					</div>
				</div>
			)}

			{/* Sorting Options */}
			<div className='edbi-shortcode-builder__container'>
				<div className='edbi-shortcode-builder__overlay__header'>
					<h3>{__('Sorting', 'easy-dropbox-integration')}</h3>
				</div>

				{/* Sort By */}
				<div className='edbi-shortcode-builder__thumbnail-view'>
					<h3>{__('Sort By', 'easy-dropbox-integration')}</h3>
					<ButtonGroup className='edbi-shortcode-builder__thumbnail-view__buttons'>
						<Button
							className={`edbi-shortcode-builder__thumbnail-view__button ${
								mediaPlayerConfig.sortBy === 'name'
									? 'edbi-shortcode-builder__thumbnail-view__button--active'
									: ''
							} ${mediaPlayerConfig.sortBy !== 'name' ? 'edbi-right-border' : ''}`}
							onClick={() => {
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									mediaPlayer: {
										...mediaPlayerConfig,
										sortBy: 'name',
									},
								});
							}}
						>
							{__('Name', 'easy-dropbox-integration')}
						</Button>
						<Button
							className={`edbi-shortcode-builder__thumbnail-view__button ${
								mediaPlayerConfig.sortBy === 'date'
									? 'edbi-shortcode-builder__thumbnail-view__button--active'
									: ''
							} ${mediaPlayerConfig.sortBy !== 'date' ? 'edbi-right-border' : ''}`}
							onClick={() => {
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									mediaPlayer: {
										...mediaPlayerConfig,
										sortBy: 'date',
									},
								});
							}}
						>
							{__('Date', 'easy-dropbox-integration')}
						</Button>
						<Button
							className={`edbi-shortcode-builder__thumbnail-view__button ${
								mediaPlayerConfig.sortBy === 'size'
									? 'edbi-shortcode-builder__thumbnail-view__button--active'
									: ''
							} ${mediaPlayerConfig.sortBy !== 'size' ? 'edbi-right-border' : ''}`}
							onClick={() => {
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									mediaPlayer: {
										...mediaPlayerConfig,
										sortBy: 'size',
									},
								});
							}}
						>
							{__('Size', 'easy-dropbox-integration')}
						</Button>
						<Button
							className={`edbi-shortcode-builder__thumbnail-view__button ${
								mediaPlayerConfig.sortBy === 'duration'
									? 'edbi-shortcode-builder__thumbnail-view__button--active'
									: ''
							}`}
							onClick={() => {
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									mediaPlayer: {
										...mediaPlayerConfig,
										sortBy: 'duration',
									},
								});
							}}
						>
							{__('Duration', 'easy-dropbox-integration')}
						</Button>
					</ButtonGroup>
				</div>

				{/* Sort Order */}
				<div className='edbi-shortcode-builder__thumbnail-view'>
					<h3>{__('Sort Order', 'easy-dropbox-integration')}</h3>
					<ButtonGroup className='edbi-shortcode-builder__thumbnail-view__buttons'>
						<Button
							className={`edbi-shortcode-builder__thumbnail-view__button ${
								mediaPlayerConfig.sortOrder === 'asc'
									? 'edbi-shortcode-builder__thumbnail-view__button--active'
									: ''
							} ${mediaPlayerConfig.sortOrder !== 'asc' ? 'edbi-right-border' : ''}`}
							onClick={() => {
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									mediaPlayer: {
										...mediaPlayerConfig,
										sortOrder: 'asc',
									},
								});
							}}
						>
							{__('Ascending', 'easy-dropbox-integration')}
						</Button>
						<Button
							className={`edbi-shortcode-builder__thumbnail-view__button ${
								mediaPlayerConfig.sortOrder === 'desc'
									? 'edbi-shortcode-builder__thumbnail-view__button--active'
									: ''
							}`}
							onClick={() => {
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									mediaPlayer: {
										...mediaPlayerConfig,
										sortOrder: 'desc',
									},
								});
							}}
						>
							{__('Descending', 'easy-dropbox-integration')}
						</Button>
					</ButtonGroup>
				</div>
			</div>
		</>
	);
};

export default MediaPlayer;