import React from 'react';
import { useAddonState } from '@storybook/api';
import { addons, types } from '@storybook/addons';
import { IconButton } from '@storybook/components';

const ADDON_ID = 'addon-rtl';

const getIframe = (() => {
  let cached: HTMLIFrameElement | null = null;

  return () => {
    if (cached) return cached;

    cached = document.getElementById('storybook-preview-iframe') as HTMLIFrameElement;
    return cached;
  };
})();

const RTLButton = () => {
  const [rtl, setRTL] = useAddonState(ADDON_ID, false);

  const handleClick = () => {
    const previewEl = getIframe();
    const wrapperEl = previewEl.contentDocument!.body;
    const nextRTL = wrapperEl.getAttribute('dir') !== 'rtl';

    setRTL(nextRTL);
    wrapperEl.setAttribute('dir', nextRTL ? 'rtl' : 'ltr');
  };

  return (
    <IconButton
      active={rtl}
      onClick={handleClick}
      style={{ fontWeight: 'bold' }}
    >
      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
        <path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" fill="currentColor" />
      </svg>
    </IconButton>
  );
};

addons.register(ADDON_ID, (/* api */) => {
  addons.add('addon-rtl/tool', {
    title: '',
    type: types.TOOL,
    match: ({ viewMode }) => viewMode === 'story',
    render: () => <RTLButton />,
  });
});