import { theme } from '../client/themes'

const initScript = `
(function() {
  var theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  document.body.setAttribute('data-theme', theme);
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
    document.body.setAttribute('data-theme', e.matches ? 'dark' : 'light');
  });
  function sendHeight() {
    var container = document.querySelector('.Container');
    if (!container) return;
    var rect = container.getBoundingClientRect();
    var height = rect.bottom + 20;
    window.parent.postMessage({ type: 'resize-iframe', height: height }, '*');
  }
  sendHeight();
  setTimeout(sendHeight, 50);
  setTimeout(sendHeight, 200);
  setTimeout(sendHeight, 500);
  new ResizeObserver(sendHeight).observe(document.body);
  window.addEventListener('load', sendHeight);
})();
`

export const baseStyles = `
body {
  background: ${theme('colors-bg')};
  margin: 0;
}
`

export const ToolScript = () => <script dangerouslySetInnerHTML={{ __html: initScript }} />
