/**
 * Category list in the corner
 */

import React, { useState, useEffect } from "react";

var categories = [
  // tag ID = array offset + 1
  "1620s",
  "Painting",
  "Blunt",
  "National Gallery of Canada",
  "Art Gallery of Ontario",
  "Courtauld Institute",
  "Stankievech",
  "Connosieurship",
  "Double Agent",
  "Forensics",
  "Black Box",
];

export default function Legend({ visible, selected, onSelect }) {
  return (
    <div className={visible ? "legend visible" : "legend"}>
      {selected && (
        <div className="removeSelection" onClick={() => onSelect(selected)}>
          {"View all"}
        </div>
      )}
      {categories.map((category, index) => (
        <div
          key={category}
          className={
            selected
              ? selected === index + 1
                ? "category selected"
                : "category unselected"
              : "category"
          }
          onClick={() => onSelect(index + 1)}
        >
          {category}
        </div>
      ))}
    </div>
  );
}