"use client";

import { useActionState } from "react";
import {
  deleteVideoDirAction,
  type DeleteDirActionResult,
} from "../../videoActions";
import { SeededInput } from "../../../../../../components/forms/Field";

export function DeleteVideoDirSection({
  slug,
  videoId,
}: {
  slug: string;
  videoId: string;
}) {
  const action = deleteVideoDirAction.bind(null, slug, videoId);
  const [state, formAction] = useActionState<DeleteDirActionResult, FormData>(
    action,
    undefined,
  );
  return (
    <div className="flex flex-col gap-3">
      <p className="text-sm text-muted-foreground">
        Removes data/{videoId}/ and all of its contents. Type the video id to
        confirm.
      </p>
      <form
        action={formAction}
        aria-label={`delete video directory ${videoId}`}
        className="flex flex-wrap items-start gap-2"
      >
        <SeededInput
          state={state}
          name="confirmId"
          initial=""
          required
          placeholder={videoId}
          aria-label="confirm video id"
          className="rounded border border-border bg-card px-2 py-1 text-sm font-mono"
        />
        <button
          type="submit"
          className="px-3 py-1.5 rounded-md bg-destructive text-destructive-foreground text-sm font-medium hover:bg-destructive/90"
        >
          Delete directory
        </button>
        {state?.error && (
          <p
            className="basis-full text-sm text-destructive"
            aria-label="delete directory error"
          >
            {state.error}
          </p>
        )}
      </form>
    </div>
  );
}