import Condition from "@/renderer/components/Condition";
import { defaultTag } from ".";
import "./tag-panel.scss";

interface ITagPanelProps {
  show: boolean;
  tagsGroups: IMusic.IMusicSheetGroupItem[];
  onTagClick?: (tag: IMedia.IUnique) => void;
}

export default function TagPanel(props: ITagPanelProps) {
  const { show, onTagClick, tagsGroups } = props;

  return (
    <div className="tag-panel--container shadow backdrop-color" data-show={show}>
      <div className="tag-group--container">
        <div
          role="button"
          className="tag-group--tag"
          data-type="normalButton"
          title={defaultTag.title}
          onClick={() => {
            onTagClick?.(defaultTag);
          }}
        >
          {defaultTag.title}
        </div>
      </div>
      {tagsGroups?.map?.((tagGroup, index) => (
        <div key={index} className="tag-group--container">
          <Condition condition={tagGroup.title}>
            <div className="tag-group--title">{tagGroup.title}</div>
          </Condition>
          <div className="tag-group--tags">
            {tagGroup.data.map((tag) => (
              <div
                key={tag.id}
                role="button"
                data-type="normalButton"
                className="tag-group--tag"
                title={tag.title}
                onClick={() => {
                  onTagClick?.(tag);
                }}
              >
                {tag.title}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}
