"use client"

import type { IDeleteProjectModalProps } from "./DeleteProjectModal.d"
import type { JSX } from "react"

import { FunctionComponent } from "react"

import { Button, Modal } from "@shared/ui"

import { useDeleteProject } from "./useDeleteProject"
import styles from "./DeleteProjectModal.module.scss"

export const DeleteProjectModal: FunctionComponent<
	IDeleteProjectModalProps
> = ({ open, onOpenChange, project, onDeleted }): JSX.Element => {
	const { mutate, isPending } = useDeleteProject({
		onSuccess: async () => {
			await onDeleted?.()
			onOpenChange?.(false)
		},
		onError: (error) => {
			console.error("Delete project failed:", error)
		},
	})

	const handleDelete = (): void => {
		mutate({
			params: { path: { project_id: project.id } },
		})
	}

	return (
		<Modal
			open={open}
			onOpenChange={onOpenChange}
			title="Удалить проект"
			description="Это действие нельзя отменить"
		>
			<div className={styles.root} data-testid="DeleteProjectModal">
				<p className={styles.message}>
					Вы уверены, что хотите удалить проект{" "}
					<span className={styles.projectName}>{project.name}</span>?
				</p>

				<div className={styles.actions}>
					<Button
						type="button"
						variant="outline"
						disabled={isPending}
						onClick={() => onOpenChange?.(false)}
					>
						Отмена
					</Button>
					<Button
						type="button"
						variant="danger"
						disabled={isPending}
						onClick={handleDelete}
					>
						Удалить
					</Button>
				</div>
			</div>
		</Modal>
	)
}
