import MusicSheet, { defaultSheet } from "@/renderer/core/music-sheet";
import Base from "../Base";
import "./index.scss";
import { setFallbackAlbum } from "@/renderer/utils/img-on-error";
import albumImg from "@/assets/imgs/album-cover.jpg";
import addImg from "@/assets/imgs/add.png";
import { hideModal, showModal } from "../..";
import { Trans, useTranslation } from "react-i18next";

interface IAddMusicToSheetProps {
  musicItems: IMusic.IMusicItem | IMusic.IMusicItem[];
}

export default function AddMusicToSheet(props: IAddMusicToSheetProps) {
  const { musicItems } = props;
  const { t } = useTranslation();

  const allSheets = MusicSheet.frontend.useAllSheets();
  return (
    <Base withBlur={false}>
      <div className="modal--add-music-to-sheet-container shadow backdrop-color">
        <Base.Header>
          <span>
            {t("modal.add_to_my_sheets")}{" "}
            <span className="music-length">
              (
              <Trans
                i18nKey={"modal.total_music_num"}
                values={{
                  number: Array.isArray(musicItems) ? musicItems.length : 1,
                }}
              ></Trans>
              )
            </span>
          </span>
        </Base.Header>
        <div className="music-sheets">
          <div
            className="sheet-item"
            role="button"
            onClick={() => {
              showModal("AddNewSheet", {
                initMusicItems: musicItems,
              });
            }}
          >
            <img src={addImg}></img>
            <span>{t("modal.create_local_sheet")}</span>
          </div>
          {allSheets.map((sheet) => (
            <div
              className="sheet-item"
              key={sheet.id}
              role="button"
              onClick={() => {
                MusicSheet.frontend.addMusicToSheet(musicItems, sheet.id);
                hideModal();
              }}
            >
              <img
                src={sheet.artwork ?? albumImg}
                onError={setFallbackAlbum}
              ></img>
              <span>
                {sheet.id === defaultSheet.id
                  ? t("media.default_favorite_sheet_name")
                  : sheet.title}
              </span>
            </div>
          ))}
        </div>
      </div>
    </Base>
  );
}
