import React from "react";
import "./style.scoped.scss";
import PlayIcon from "../../assets/play_icon_2.svg";
import { styled } from "@mui/material/styles";
import Checkbox from "@mui/material/Checkbox";
import { useDispatch } from "react-redux";
import {
actionClearQueue,
actionSetTrack,
} from "../../redux/actions/creators/audio";
import { removeAudioExtension } from "../../utils/regex";
import { actionTrackToDelete } from "../../redux/actions/creators/tracks";
const BpIcon = styled("span")(({ theme = "dark" }) => ({
borderRadius: 3,
width: 16,
height: 16,
backgroundColor: "gray",
".Mui-focusVisible &": {
outline: "2px auto rgba(19,124,189,.6)",
outlineOffset: 2,
},
"input:hover ~ &": {
backgroundColor: "gray",
},
}));
const BpCheckedIcon = styled(BpIcon)({
backgroundColor: "gray",
"&:before": {
display: "block",
width: 16,
height: 16,
borderRadius: 3,
backgroundColor: "#106ba3",
backgroundImage:
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
content: '""',
},
"input:hover ~ &": {
backgroundColor: "#106ba3",
},
});
function BpCheckbox(props) {
return (
{title ?? "Title"}
{track.id3.artist ?? "artist"}
{track.id3.album ?? "album"}
{track.id3.year ?? "year"}
{track.id3.genre ?? "genre"}