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

const SidePanel = ({ attributes, setAttributes }) => {
	const {
		animationType = 'fadeIn',
		animationDistance = 50,
		animationDuration = 1000,
		animationDelay = 0,
		triggerPoint = 50,
		scrollBehavior = 'followScroll'
	} = attributes;

	return (
		<InspectorControls>
			<PanelBody title={__("Animation Settings", "orphic-ui")}>
				<SelectControl
					label={__("Animation Type", "orphic-ui")}
					value={animationType}
					options={[
						{ label: "Fade In", value: "fadeIn" },
						{ label: "Fade In Top", value: "fadeInTop" },
						{ label: "Fade In Bottom", value: "fadeInBottom" },
						{ label: "Fade In Left", value: "fadeInLeft" },
						{ label: "Fade In Right", value: "fadeInRight" },
					]}
					onChange={(value) => setAttributes({ animationType: value })}
				/>

				<SelectControl
					label={__("Scroll Behavior", "orphic-ui")}
					value={scrollBehavior}
					options={[
						{ label: "Follow scroll", value: "followScroll" },
						{ label: "Play on view", value: "playOnView" },
					]}
					onChange={(value) => setAttributes({ scrollBehavior: value })}
				/>

				{animationType !== 'fadeIn' && (
					<RangeControl
						label={__("Animation Distance (px)", "orphic-ui")}
						value={animationDistance}
						onChange={(value) => setAttributes({ animationDistance: value })}
						min={0}
						max={200}
					/>
				)}

				<TextControl
					label={__("Animation Duration (ms)", "orphic-ui")}
					type="number"
					value={animationDuration}
					onChange={(value) => setAttributes({ animationDuration: parseInt(value) })}
				/>

				<TextControl
					label={__("Animation Delay (ms)", "orphic-ui")}
					type="number"
					value={animationDelay}
					onChange={(value) => setAttributes({ animationDelay: parseInt(value) })}
				/>

				<RangeControl
					label={__("Trigger Point (%)", "orphic-ui")}
					value={triggerPoint}
					onChange={(value) => setAttributes({ triggerPoint: value })}
					min={0}
					max={100}
				/>

			</PanelBody>
		</InspectorControls>
	);
};

export default SidePanel;
