import PropTypes from 'prop-types';
import React from 'react';

import { useAppSelector } from 'flavours/glitch/store';

const ThemeComponent = ({ children }) => {
  const theme = useAppSelector(
    (state) => state.getIn(['local_settings', 'theme']) ?? 'mastodon-light',
  );

  let href;
  switch (true) {
  case theme === 'mastodon':
    href = '';
    break;
  case theme === 'mastodon-light':
    href = '/packs/css/skins/glitch/mastodon-light/common.css';
    break;
  case theme === 'contrast':
    href = '/packs/css/skins/glitch/contrast/common.css';
    break;
  }

  return (
    <>
      {href !== '' ? <link rel='stylesheet' media='all' href={href} /> : null}
      {children}
    </>
  );
};

ThemeComponent.propTypes = {
  children: PropTypes.node,
};

export { ThemeComponent };