"use client"

import type { ISilenceSettingsStepProps } from "./SilenceSettingsStep.d"
import type { JSX } from "react"

import cs from "classnames"
import { FunctionComponent, useCallback, useEffect, useState } from "react"

import { useWizard } from "@shared/context/WizardContext"
import { Button, Slider } from "@shared/ui"

import styles from "./SilenceSettingsStep.module.scss"

export const SilenceSettingsStep: FunctionComponent<
	ISilenceSettingsStepProps
> = ({ className }): JSX.Element => {
	const {
		primaryFileKey,
		silenceSettings,
		startSilenceDetect,
		goBack,
	} = useWizard()
	const [localSettings, setLocalSettings] = useState(silenceSettings)

	useEffect(() => {
		setLocalSettings(silenceSettings)
	}, [silenceSettings])

	const handleSubmit = useCallback(() => {
		if (!primaryFileKey) return
		void startSilenceDetect(localSettings)
	}, [localSettings, primaryFileKey, startSilenceDetect])

	return (
		<div
			className={cs(styles.root, className)}
			data-testid="SilenceSettingsStep"
		>
			<div className={styles.content}>
				<div className={styles.header}>
					<h2 className={styles.title}>Параметры обнаружения тишины</h2>
					<p className={styles.description}>
						Настройте параметры для автоматического обнаружения
						тихих участков в видео
					</p>
				</div>

				<div className={styles.fields}>
					<Slider
						label="Мин. длительность тишины"
						value={localSettings.min_silence_duration_ms}
						min={100}
						max={2000}
						step={50}
						unit="мс"
						helpText="Минимальная длительность тихого участка для обнаружения"
						onChange={(v) =>
							setLocalSettings({
								...localSettings,
								min_silence_duration_ms: v,
							})
						}
					/>

					<Slider
						label="Порог тишины"
						value={localSettings.silence_threshold_db}
						min={6}
						max={40}
						step={2}
						unit="дБ"
						helpText="Уровень громкости ниже которого звук считается тишиной"
						onChange={(v) =>
							setLocalSettings({
								...localSettings,
								silence_threshold_db: v,
							})
						}
					/>

					<Slider
						label="Отступ"
						value={localSettings.padding_ms}
						min={0}
						max={500}
						step={25}
						unit="мс"
						helpText="Дополнительный отступ по краям тихих участков"
						onChange={(v) =>
							setLocalSettings({
								...localSettings,
								padding_ms: v,
							})
						}
					/>
				</div>
			</div>

			{/* Footer */}
			<div className={styles.footer}>
				<Button variant="outline" onClick={goBack}>
					Назад
				</Button>
				<Button
					variant="primary"
					onClick={handleSubmit}
					disabled={!primaryFileKey}
				>
					Далее
				</Button>
			</div>
		</div>
	)
}
