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

const SidePanel = ({ attributes, setAttributes }) => {
	const { slidesPerPage, autoplayInterval, showArrows, autoWidth, slideWidth, loop, showPagination, autoplay } = attributes;

	return (
		<InspectorControls>
			<PanelBody title={__("Carousel Settings", "orphic-ui")}>
				<ToggleControl
					label={__("Show Navigation Arrows", "orphic-ui")}
					checked={showArrows}
					onChange={(value) => setAttributes({ showArrows: value })}
				/>
				<ToggleControl
					label={__("Show Pagination", "orphic-ui")}
					checked={showPagination}
					onChange={(value) => setAttributes({ showPagination: value })}
				/>
				<ToggleControl
					label={__("Loop Slides", "orphic-ui")}
					checked={loop}
					onChange={(value) => setAttributes({ loop: value })}
				/>
				<ToggleControl
					label={__("Autoplay", "orphic-ui")}
					checked={autoplay}
					onChange={(value) => setAttributes({ autoplay: value })}
				/>
				{autoplay && (
					<RangeControl
						label={__("Autoplay Interval (ms)", "orphic-ui")}
						value={autoplayInterval}
						onChange={(value) => setAttributes({ autoplayInterval: value })}
						min={0}
						max={10000}
						step={500}
					/>
				)}
				<RangeControl
					label={__("Slides Per Page", "orphic-ui")}
					value={slidesPerPage}
					onChange={(value) => setAttributes({ slidesPerPage: value })}
					min={1}
					max={6}
					step={1}
				/>
			</PanelBody>

			<PanelBody title={__("Slide Width Settings", "orphic-ui")}>
				<ToggleControl
					label={__("Auto Width", "orphic-ui")}
					help={
						autoWidth
							? __("Slide width is calculated based on slides per page", "orphic-ui")
							: __("Custom slide width", "orphic-ui")
					}
					checked={autoWidth}
					onChange={(value) => setAttributes({ autoWidth: value })}
				/>
				{!autoWidth && (
					<RangeControl
						label={__("Slide Width (px)", "orphic-ui")}
						value={slideWidth}
						onChange={(value) => setAttributes({ slideWidth: value })}
						min={200}
						max={800}
						step={10}
					/>
				)}
			</PanelBody>
		</InspectorControls>
	);
};

export default SidePanel;
