/**
 * 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",
  "connsoeurship",
  "double agent",
  "forensics",
  "black box",
];

export default function Legend({ visible, selected, onSelect }) {
  return (
    <div className="legend" style={{ opacity: visible ? 1 : 0 }}>
      {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>
  );
}