import React, { FC } from "react";

// TODO: When themes are made import the theme from user settings context. Refactor to use whatever those SVGs are.

interface DemoStickersProps {
  stickerVal: StickerVal;
}

const DemoStickers: FC<DemoStickersProps> = ({
  stickerVal
}: DemoStickersProps) => {
  if (stickerVal === null) {
    return <span aria-label="spacer">&nbsp;</span>;
  }
  interface StickerToEmoji {
    [key: string]: JSX.Element;
  }

  let key = "0";

  if (stickerVal > 0) {
    key = "1";
  } else if (stickerVal < 0) {
    key = "-1";
  }

  const stickerToEmoji: StickerToEmoji = {
    "1": (
      <span role="img" aria-label="Sun">
        ☀️
      </span>
    ),
    "0": (
      <span role="img" aria-label="Cloud">
        ☁️
      </span>
    ),
    "-1": (
      <span role="img" aria-label="Raining Cloud">
        🌧️
      </span>
    )
  };

  return stickerToEmoji[`${key}`];
};

export default DemoStickers;
