import React from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { IconButton, Tooltip } from '@material-ui/core';

import { ReactComponent as BWS } from './logo_BWS.svg';
import { ReactComponent as DMS } from './logo_DMS.svg';
import { ReactComponent as EDG } from './logo_EDG.svg';
import { Themes } from './themes';
import { selectBanner, setBanner } from './themeSlice';

const bannerIcon = {
  EDG,
  BWS,
  DMS,
};
const BannerSelect = () => {
  const banner = useSelector(selectBanner);
  const dispatch = useDispatch();
  const Icon = bannerIcon[banner];
  return (
    <Tooltip title="Toggle Banner Theme">
      <IconButton
        aria-label="Toggle theme"
        onClick={() => {
          const banners = Object.keys(bannerIcon) as Array<keyof Themes>;
          const bannerIndex = banners.indexOf(banner);
          dispatch(
            setBanner(bannerIndex < 2 ? banners[bannerIndex + 1] : banners[0]),
          );
        }}
        edge="end"
      >
        <Icon width="1.5rem" height="1.5rem" />
      </IconButton>
    </Tooltip>
  );
};

export default BannerSelect;