import { h, Component, ComponentChild } from 'preact';
import classes from './MarginalAnnotations.module.scss';
import type { backgroundRpcServer } from '../background';
import type { AnnotationSourceDescriptor } from '../storage/AnnotationSource';
import { RpcClient } from 'webextension-rpc';
import rssIcon from '../assets/icons/rss.svg';
import infoIcon from '../assets/icons/info.svg';
import downloadIcon from '../assets/icons/download.svg';

const backgroundRpc = new RpcClient<typeof backgroundRpcServer>();
const addAnnotationSource = backgroundRpc.func('addAnnotationSource');
const removeSource = backgroundRpc.func('removeSource');
const refreshAnnotationSource = backgroundRpc.func('refreshAnnotationSource');

interface ToolbarButtonsProps {
  discoveredSources: (AnnotationSourceDescriptor & { subscribed: boolean })[];
  onChange: () => void;
}

interface ToolbarButtonsState {
  showAll: boolean;
}

export class ToolbarButtons extends Component<
  ToolbarButtonsProps,
  ToolbarButtonsState
> {
  render(
    { discoveredSources, onChange }: ToolbarButtonsProps,
    {}: ToolbarButtonsState,
  ) {
    const buttons: ComponentChild[] = [];
    for (const source of discoveredSources) {
      let explanationSummary, explanationFull;
      if (source.type === 'container') {
        explanationSummary = (
          <span>
            <img src={rssIcon} /> This page provides an annotation source{' '}
            <i>“{source.title}”</i>. <img src={infoIcon} />
          </span>
        );
        explanationFull = `If you subscribe to it, annotations published by this website will be stored in your browser, and displayed on the web pages they target. Its annotations are automatically refreshed periodically.`;
      } else if (source.type === 'embeddedJsonld') {
        explanationSummary = (
          <span>
            This page contains embedded annotations. <img src={infoIcon} />
          </span>
        );
        explanationFull = `If you import them, they will be stored in your browser, and displayed on the web pages they target. Note they will not be refreshed automatically.`;
      }
      buttons.push(
        <details class={classes.hiddenWhenClosed}>
          <summary>{explanationSummary}</summary>
          {explanationFull}
        </details>,
      );

      if (source.subscribed) {
        if (source.type === 'container') {
          buttons.push(
            <button
              title="Unsubscribe from this annotation source (forget its annotations)"
              onClick={async () => {
                await removeSource(source);
                onChange();
              }}
            >
              ❌<span class={classes.hiddenWhenClosed}> Unsubscribe</span>
            </button>,
            <button
              title="Refresh annotations from this source."
              onClick={() => refreshAnnotationSource(source, true)}
            >
              🗘<span class={classes.hiddenWhenClosed}> Refresh</span>
            </button>,
          );
        } else if (source.type === 'embeddedJsonld') {
          buttons.push(
            <button
              title="Remove annotations from this source."
              onClick={async () => {
                await removeSource(source);
                onChange();
              }}
            >
              ❌<span class={classes.hiddenWhenClosed}> Remove</span>
            </button>,
            <button
              title="Refresh annotations from this source."
              onClick={() => refreshAnnotationSource(source, true)}
            >
              🗘<span class={classes.hiddenWhenClosed}> Refresh</span>
            </button>,
          );
        }
      } else {
        if (source.type === 'container') {
          buttons.push(
            <button
              onClick={async () => {
                await addAnnotationSource(source);
                onChange();
              }}
              title="Subscribe to annotations from this website."
            >
              <img src={rssIcon} class={classes.icon} />
              <span class={classes.hiddenWhenClosed}> Subscribe</span>
            </button>,
          );
        } else if (source.type === 'embeddedJsonld') {
          buttons.push(
            <button
              onClick={async () => {
                await addAnnotationSource(source);
                onChange();
              }}
              title="Import the annotations embedded in this page."
            >
              <img src={downloadIcon} class={classes.icon} />
              <span class={classes.hiddenWhenClosed}> Import annotations</span>
            </button>,
          );
        }
      }
    }
    return buttons.length > 0 ? buttons : null;
  }
}

// TODO Refresh components properly. instead of reload the whole page. :)
function pageReload() {
  window.location = window.location;
}