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

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

import { selectType, setSelectedType } from './themeSlice';

const TypeSelect = () => {
  const type = useSelector(selectType);
  const dispatch = useDispatch();

  return (
    <Tooltip title={`Switch To ${type === 'light' ? 'Dark' : 'Light'} Theme`}>
      <IconButton
        aria-label="Toggle light/dark theme"
        onClick={() =>
          dispatch(setSelectedType(type === 'light' ? 'dark' : 'light'))
        }
        edge="end"
      >
        {type === 'light' ? <Brightness4 /> : <Brightness7 />}
      </IconButton>
    </Tooltip>
  );
};

export default TypeSelect;