import { useState } from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from "reactstrap";
import toNoteVariety from "src/note/NoteVariety";

const NoteVarietyInput = ({
  noteVariety,
  setNoteVariety,
}: {
  noteVariety: number;
  setNoteVariety: (noteVariety: number) => void;
}) => {
  const [isNoteVarietyOpened, setNoteVarietyOpened] = useState(false);

  const onInput = (noteVariety: number) => () => {
    setNoteVariety(noteVariety);
  };

  return (
    <Dropdown
      isOpen={isNoteVarietyOpened}
      toggle={() => {
        setNoteVarietyOpened(!isNoteVarietyOpened);
      }}
    >
      <DropdownToggle caret>{toNoteVariety(noteVariety)}</DropdownToggle>
      <DropdownMenu>
        <DropdownItem onClick={onInput(0)}>{toNoteVariety(0)}</DropdownItem>
        <DropdownItem onClick={onInput(1)}>{toNoteVariety(1)}</DropdownItem>
        <DropdownItem onClick={onInput(3)}>{toNoteVariety(3)}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
};

export default NoteVarietyInput;