/**
 * @name Media Grid Focus
 * @description On a profile's Media tab, hides the right column, widens the page and tightens the gaps so the photo and video grid fills the window. Other pages are unchanged.
 * @version 1.1.1
 * @author wayBetter
 * @permissions network:none
 */
const ATTR = 'data-bt-media-grid';

module.exports = class MediaGridFocus {
  static isMediaTab(pathname) {
    return /^\/[A-Za-z0-9_]{1,15}\/media\/?$/.test(pathname);
  }

  start() {
    const api = window.wayBetter.api;
    this.scope = api.scope();
    // Scoped by an attribute on <html> that is only present on /<handle>/media.
    this.scope.css('media-grid-focus', `
      html[${ATTR}] [data-testid="sidebarColumn"] { display: none !important; }
      /* The main area takes the free width next to X's nav (whatever the nav's width: 275px, 88px or
         none), and the page fills it up to 1400px. A fixed "100vw - 88px" was wider than the pane
         next to X's 275px nav and scrolled the page sideways. */
      html[${ATTR}] main[role="main"] { flex-grow: 1000 !important; min-width: 0 !important; }
      html[${ATTR}] main[role="main"] > div { width: min(1400px, 100%) !important; max-width: none !important; }
      html[${ATTR}] main[role="main"] > div > div,
      html[${ATTR}] [data-testid="primaryColumn"] { max-width: none !important; width: 100% !important; flex-grow: 1 !important; }
      html[${ATTR}] [data-testid="primaryColumn"] section li,
      html[${ATTR}] [data-testid="primaryColumn"] section [data-testid="cellInnerDiv"] a[href*="/photo/"],
      html[${ATTR}] [data-testid="primaryColumn"] section [data-testid="cellInnerDiv"] a[href*="/video/"] { padding: 1px !important; margin: 0 !important; }
    `);
    this.scope.onRouteChange(() => this.sync());
    this.scope.defer(() => document.documentElement.removeAttribute(ATTR));
    this.sync();
  }

  stop() {
    this.scope.dispose();
  }

  sync() {
    document.documentElement.toggleAttribute(ATTR, MediaGridFocus.isMediaTab(location.pathname));
  }
};