import { useState, useCallback } from 'preact/hooks';
import type { ModalState, ValidationState, CompletionModalState } from '../types/ui';
import type { Game } from '../types/game';

export function useModal() {
  const [modal, setModal] = useState<ModalState>({ open: false, gameId: null });

  const openModal = useCallback((gameId?: number) => {
    setModal({ open: true, gameId });
  }, []);

  const closeModal = useCallback(() => {
    setModal({ open: false, gameId: null });
  }, []);

  return {
    modal,
    openModal,
    closeModal,
  };
}

export function useValidationModal() {
  const [validation, setValidation] = useState<ValidationState>({ open: false, message: '' });

  const showValidation = useCallback((message: string) => {
    setValidation({ open: true, message });
  }, []);

  const closeValidation = useCallback(() => {
    setValidation({ open: false, message: '' });
  }, []);

  return {
    validation,
    showValidation,
    closeValidation,
  };
}

export function useCompletionModal() {
  const [completionModal, setCompletionModal] = useState<CompletionModalState>({ 
    open: false, 
    game: null 
  });

  const openCompletionModal = useCallback((game: Game) => {
    setCompletionModal({ open: true, game });
  }, []);

  const closeCompletionModal = useCallback(() => {
    setCompletionModal({ open: false, game: null });
  }, []);

  return {
    completionModal,
    openCompletionModal,
    closeCompletionModal,
  };
}