import { useCallback, useState } from "react";
import {
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownToggle,
} from "reactstrap";

import v0 from "src/assets/v0.png";
import v1 from "src/assets/v1.png";
import v3 from "src/assets/v3.png";

import scss from "src/note/NoteVarietyInput.module.scss";

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

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

  const NoteVariety = useCallback(
    ({ noteVariety }: { noteVariety: number }) => {
      switch (noteVariety) {
        case 0:
          return <img src={v0} className={scss.noteVariety} alt="" />;
        case 1:
          return <img src={v1} className={scss.noteVariety} alt="" />;
        case 3:
          return <img src={v3} className={scss.noteVariety} alt="" />;
        default:
          return null;
      }
    },
    [],
  );

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

export default NoteVarietyInput;