import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import PauseIcon from '@mui/icons-material/Pause';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import DeleteIcon from '@mui/icons-material/Delete';
import { useState } from 'react';

export default function ClipButtonRow({
  isPlaying,
  collectionNames,
  onPlayPause,
  onMove,
  onDelete,
}: {
  isPlaying: boolean;
  collectionNames: string[];
  onPlayPause: () => void;
  onMove?: (collectionName: string) => void;
  onDelete?: () => void;
}) {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  return (
    <div className="flex justify-end">
      <button
        type="button"
        className="bg-plum hover:bg-plumDark text-white font-bold h-11 w-11 rounded-md ml-1"
        onClick={onPlayPause}
      >
        {isPlaying ? <PauseIcon /> : <PlayArrowIcon />}
      </button>
      <div className="relative inline-block">
        <button
          type="button"
          className="bg-plum hover:bg-plumDark text-white font-bold h-11 w-11 rounded-md ml-1"
          onClick={() => setDropdownOpen((prev) => !prev)}
        >
          {dropdownOpen ? <ArrowDownwardIcon /> : <ArrowForwardIcon />}
        </button>
        {dropdownOpen && (
          <div className="absolute z-10 mt-2 w-40 bg-midnight rounded-md shadow-lg">
            {collectionNames.map((name) => (
              <button
                key={name}
                type="button"
                className="block w-full text-left px-4 py-2 text-white hover:bg-plumDark"
                onClick={() => {
                  setDropdownOpen(false);
                  if (onMove) onMove(name);
                }}
              >
                {name}
              </button>
            ))}
          </div>
        )}
      </div>
      <button
        type="button"
        className="bg-plum hover:bg-plumDark text-white font-bold h-11 w-11 rounded-md ml-1"
        onClick={() => onDelete && onDelete()}
      >
        <DeleteIcon />
      </button>
    </div>
  );
}
