'use client';

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter
} from '@/components/ui/dialog';

import PollPicker from './poll-picker';
import { Button } from '@/components/ui/button';
import { useState } from 'react';

type Props = {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  onSubmit: (pollId: string | null) => void;
  initialValue: string | null;
};

export default function PollSettingsDialog({
  open,
  onOpenChange,
  initialValue,
  onSubmit
}: Props) {
  const [selectedPollId, setSelectedPollId] = useState<string | null>(
    initialValue
  );

  const handleSelectPollId = (pollId: string | null) => {
    setSelectedPollId(pollId);
  };

  const handleConfirm = () => {
    onSubmit(selectedPollId);
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Poll settings</DialogTitle>
          <DialogDescription>
            Chose your poll from the list below:
          </DialogDescription>
        </DialogHeader>

        <PollPicker
          className='max-h-[40vh] overflow-y-auto'
          selectPollId={selectedPollId}
          handleSelectPollId={handleSelectPollId}
        />

        <DialogFooter>
          <Button onClick={handleConfirm} disabled={!selectedPollId}>
            Save
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}