import React from 'react';
import { totalQuestionsPerRound } from '../../utils/quizHelpers';
import { Portal } from '../components/Portal';

type RoundDialogProps = {
  dialogType: 'round' | 'question';
  currentRound: number;
  setIsDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
  setQuestionNumber: React.Dispatch<React.SetStateAction<number>>;
};

export function RoundDialog({
  dialogType,
  currentRound,
  setIsDialogOpen,
  setQuestionNumber
}: RoundDialogProps) {
  const rounds = [1, 2, 3, 4];
  const startOfRoundMap = [1, 11, 21, 31];

  const handleSelectRound = (round: number) => {
    // Round 1 => Q1, Round 2 => Q11, Round 3 => Q21, Round 4 => Q31
    const newQuestionNumber = startOfRoundMap[round - 1];
    setQuestionNumber(newQuestionNumber);
    setIsDialogOpen(false);
  };

  const handleSelectQuestion = (num: number) => {
    // If currentRound=1 => start=1, Round 2 => start=11, Round 3 => start=21, Round 4 => start=31
    const startOfRound = startOfRoundMap[currentRound - 1];
    setQuestionNumber(startOfRound + (num - 1));
    setIsDialogOpen(false);
  };

  const renderOptions = () => {
    if (dialogType === 'round') {
      return (
        <div className="grid grid-cols-4 gap-2">
          {rounds.map((round) => (
            <button
              key={round}
              onClick={() => handleSelectRound(round)}
              className="p-4 bg-gray-200 rounded hover:bg-gray-300 text-xl"
            >
              {round}
            </button>
          ))}
        </div>
      );
    }

    const totalForCurrentRound =
      currentRound in totalQuestionsPerRound
        ? totalQuestionsPerRound[currentRound as keyof typeof totalQuestionsPerRound]
        : 10;

    const questions = Array.from(
      { length: totalForCurrentRound },
      (_, i) => i + 1
    );

    return (
      <div className="grid grid-cols-4 gap-2">
        {questions.map((num) => (
          <button
            key={num}
            onClick={() => handleSelectQuestion(num)}
            className="p-4 bg-gray-200 rounded hover:bg-gray-300 text-xl"
          >
            {num}
          </button>
        ))}
      </div>
    );
  };

  return (
    <Portal>
      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div className="bg-white p-6 rounded-lg shadow-lg max-w-lg w-full">
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-2xl font-bold">
              {dialogType === 'round' ? 'Избери кръг' : 'Избери въпрос'}
            </h2>
            <button
              onClick={() => setIsDialogOpen(false)}
              className="text-gray-500 hover:text-gray-700"
            >
              ✕
            </button>
          </div>
          {renderOptions()}
        </div>
      </div>
    </Portal>
  );
}