import {ConfirmButton, PrivacyLink} from '@holllo/gram';
import {Component, html} from 'htm/preact';

import {Settings} from '../../settings/settings.js';
import {updateBadge} from '../../utilities/badge.js';
import {History} from '../../utilities/history.js';

type Props = {
  history: History;
  settings: Settings;
};

type State = {
  queue: Queue.Item[];
};

export class PageMain extends Component<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = {
      queue: props.settings.queue,
    };
  }

  removeItem = async (id: number) => {
    const {settings} = this.props;
    await settings.removeQueueItem(id);
    await updateBadge(settings);
    this.setState({queue: this.props.settings.queue});
  };

  render() {
    const queueItems = this.state.queue
      .sort((a, b) => a.added.getTime() - b.added.getTime())
      .map(
        (item) => html`<${queueItem} item=${item} remove=${this.removeItem} />`,
      );

    if (queueItems.length === 0) {
      queueItems.push(html`<li>No items queued. 🤷</li>`);
    }

    const historyItems = this.props.history.queue
      .sort((a, b) => b.added.getTime() - a.added.getTime())
      .map((item) => html`<${queueItem} item=${item} />`);

    let history: HtmComponent | undefined;
    if (historyItems.length > 0) {
      history = html`
        <details class="history">
          <summary>Queue history</summary>

          <ul class="q-list">
            ${historyItems}
          </ul>
        </details>
      `;
    }

    return html`
      <main class="page-main">
        <ul class="q-list">
          ${queueItems}
        </ul>

        ${history}

        <details class="usage">
          <summary>How do I use Queue?</summary>

          <p>Adding links to your queue:</p>
          <ul>
            <li>Right-click any link or tab and click "Add to Queue".</li>
          </ul>

          <p>Opening the next link from your queue:</p>
          <ul>
            <li>Click on the extension icon to open it in the current tab.</li>
            <li>
              Right-click the extension icon and click "Open next link in new
              tab".
            </li>
          </ul>

          <p>Opening the extension page:</p>
          <ul>
            <li>Double-click the extension icon.</li>
            <li>
              Right-click the extension icon and click "Open the extension
              page".
            </li>
          </ul>

          <p>Deleting queue items:</p>
          <ul>
            <li>
              Click the red button with the ✗ and then confirm it by clicking
              again.
            </li>
          </ul>
        </details>
      </main>
    `;
  }
}

type ItemProps = {
  item: Queue.Item;
  remove?: (id: number) => Promise<void>;
};

function queueItem(props: ItemProps): HtmComponent {
  const added = props.item.added.toLocaleString();
  const {id, text, url} = props.item;
  let remove;
  if (props.remove !== undefined) {
    remove = html`
      <${ConfirmButton}
        class="confirm-button"
        click=${async () => props.remove!(id)}
        confirmClass="confirm"
        confirmText="✓"
        extraAttributes=${{title: 'Remove'}}
        text="✗"
        timeout=${5 * 1000}
      />
    `;
  }

  return html`
    <li class="q-item">
      <p class="title">
        <${PrivacyLink} href=${url}>${text ?? url}<//>
      </p>

      <div class="buttons">${remove}</div>

      <p>
        <time datetime=${added} title="Link queued on ${added}.">
          ${added}
        </time>
      </p>
    </li>
  `;
}