import { InspectorControls } from "@wordpress/block-editor";
import { __ } from '@wordpress/i18n';
import { PanelBody, ToggleControl, ColorPalette, SelectControl } from "@wordpress/components";

const SidePanel = ({ attributes, setAttributes }) => {
	const { direction, showShadow, shadowColor } = attributes;

	return (
		<InspectorControls>
			<PanelBody title={__('Slider Settings', 'orphic-ui')}>
				<SelectControl
					label={__('Direction', 'orphic-ui')}
					value={direction}
					options={[
						{ label: __('Left', 'orphic-ui'), value: 'left' },
						{ label: __('Right', 'orphic-ui'), value: 'right' },
					]}
					onChange={(value) => {
						setAttributes({ direction: value });
						console.log(attributes.direction);
					}}
				/>

				<ToggleControl
					label={__('Show Edge Shadow', 'orphic-ui')}
					checked={showShadow}
					onChange={(value) => setAttributes({ showShadow: value })}
				/>

				{showShadow && (
					<div>
						<p>{__('Shadow Color', 'orphic-ui')}</p>
						<ColorPalette
							value={shadowColor}
							onChange={(color) => setAttributes({ shadowColor: color })}
						/>
					</div>
				)}
			</PanelBody>
		</InspectorControls>
	);
};

export default SidePanel;
