import { useEffect, useState } from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
} from '@mui/material';

export default function NameEditDialog({
  open,
  startValue,
  onCancel,
  onSave,
}: {
  open: boolean;
  startValue: string;
  onCancel: () => void;
  onSave: (newName: string) => void;
}) {
  const [input, setInput] = useState(startValue);

  useEffect(() => {
    if (open) {
      setInput(startValue);
    }
  }, [open, startValue]);

  return (
    <Dialog
      open={open}
      onClose={onCancel}
      slotProps={{
        paper: { sx: { backgroundColor: '#1a1a1a', color: 'white' } },
      }}
    >
      <DialogTitle>Edit Clip Name</DialogTitle>
      <DialogContent>
        <TextField
          autoFocus
          multiline
          variant="standard"
          className="font-bold text-lg bg-transparent outline-none border-b border-plum focus:border-plumDark text-white mb-1 w-full text-center resize-y"
          value={input}
          onChange={(e) => {
            setInput(e.target.value);
          }}
          onFocus={(event) => event.target.select()}
          aria-label="Edit clip name"
        />
      </DialogContent>
      <DialogActions>
        <button
          type="button"
          onClick={onCancel}
          className="bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md"
        >
          Cancel
        </button>
        <button
          type="button"
          onClick={() => onSave(input)}
          className="bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md"
        >
          Save
        </button>
      </DialogActions>
    </Dialog>
  );
}
