console.info(
  `%c COMPACT-CUSTOM-HEADER \n%c     Version 1.4.9     `,
  "color: orange; font-weight: bold; background: black",
  "color: white; font-weight: bold; background: dimgray"
);

class CompactCustomHeader {
  constructor() {
    this.LitElement = Object.getPrototypeOf(
      customElements.get("ha-panel-lovelace")
    );
    this.hass = document.querySelector("home-assistant").hass;
    this.fireEvent = (node, type, detail, options = {}) => {
      detail = detail === null || detail === undefined ? {} : detail;
      const event = new Event(type, {
        bubbles: options.bubbles === undefined ? true : options.bubbles,
        cancelable: Boolean(options.cancelable),
        composed: options.composed === undefined ? true : options.composed
      });
      event.detail = detail;
      node.dispatchEvent(event);
      return event;
    };

    let ll = document.querySelector("home-assistant");
    ll = ll && ll.shadowRoot;
    ll = ll && ll.querySelector("home-assistant-main");
    this.main = ll;
    ll = ll && ll.shadowRoot;
    ll = ll && ll.querySelector("app-drawer-layout partial-panel-resolver");
    this.panelResolver = ll;
    ll = (ll && ll.shadowRoot) || ll;
    ll = ll && ll.querySelector("ha-panel-lovelace");
    ll = ll && ll.shadowRoot;
    ll = ll && ll.querySelector("hui-root");
    this.lovelace = ll.lovelace;
    this.root = ll.shadowRoot;

    this.frontendVersion = Number(window.frontendVersion);
    this.newSidebar = this.frontendVersion >= 20190710;
    this.header = this.root.querySelector("app-header");
    this.editMode = this.header.className == "edit-mode";
    this.view = this.root.querySelector("ha-app-layout #view");

    this.sidebarClosed = false;
    this.firstRun = true;
    this.buttons = {};
    this.prevColor = {};

    this.defaultConfig = {
      header: true,
      disable: false,
      yaml_editor: false,
      menu: "show",
      voice: "show",
      notifications: "show",
      options: "show",
      clock_format: 12,
      clock_am_pm: true,
      clock_date: false,
      date_locale: this.hass.language,
      chevrons: false,
      redirect: true,
      background: "",
      hide_tabs: "",
      show_tabs: "",
      edit_mode_show_tabs: false,
      default_tab: "",
      default_tab_template: "",
      kiosk_mode: false,
      sidebar_swipe: true,
      sidebar_closed: false,
      disable_sidebar: false,
      hide_help: false,
      hide_config: false,
      hide_unused: false,
      tab_color: {},
      button_color: {},
      statusbar_color: "",
      swipe: false,
      swipe_amount: "15",
      swipe_animate: "none",
      swipe_skip: "",
      swipe_wrap: true,
      swipe_prevent_default: false,
      swipe_skip_hidden: true,
      warning: true,
      compact_header: true,
      view_css: "",
      time_css: "",
      date_css: "",
      header_css: "",
      tab_css: {},
      button_css: {}
    };

    this.cchConfig = this.buildConfig(
      this.lovelace.config.cch || {},
      this.hass.user.name
    );
  }

  run() {
    const tabContainer = this.root.querySelector("paper-tabs");
    const tabs = tabContainer
      ? Array.from(tabContainer.querySelectorAll("paper-tab"))
      : [];
    let disabled =
      window.location.href.includes("disable_cch") || this.cchConfig.disable;

    if (this.firstRun || this.buttons == undefined) {
      this.buttons = this.getButtonElements(tabContainer);
    }
    if (!this.buttons.menu || !this.buttons.options || this.editMode) return;
    if (!disabled) {
      this.insertEditMenu(tabs);
      this.hideMenuItems();
      this.styleHeader(tabContainer, tabs);
      this.styleButtons(tabs, tabContainer);
      if (this.firstRun) this.sidebarMod();
      this.hideTabs(tabContainer, tabs);
      for (let button in this.buttons) {
        if (this.cchConfig[button] == "clock") this.insertClock(button);
      }
      if (!this.editMode) this.tabContainerMargin(tabContainer);
      if (this.cchConfig.swipe) this.swipeNavigation(tabs, tabContainer);
      if (this.firstRun) this.defaultTab(tabs, tabContainer);
    }
    if (this.firstRun) {
      this.observers(tabContainer, tabs, disabled);
      this.breakingChangeNotification();
    }
    this.firstRun = false;
    this.fireEvent(this.header, "iron-resize");
  }

  buildConfig(config, user_name) {
    let exceptionConfig = {};
    let highestMatch = 0;
    // Count number of matching conditions and choose config with most matches.
    if (config.exceptions) {
      config.exceptions.forEach(exception => {
        const matches = countMatches(exception.conditions, user_name);
        if (matches > highestMatch) {
          highestMatch = matches;
          exceptionConfig = exception.config;
        }
      });
    }
    // If exception config uses hide_tabs and main config uses show_tabs,
    // delete show_tabs and vice versa.
    if (
      exceptionConfig.hide_tabs &&
      config.show_tabs &&
      exceptionConfig.hide_tabs.length &&
      config.show_tabs.length
    ) {
      delete config.show_tabs;
    } else if (
      exceptionConfig.show_tabs &&
      config.hide_tabs &&
      exceptionConfig.show_tabs.length &&
      config.hide_tabs.length
    ) {
      delete config.hide_tabs;
    }

    return { ...this.defaultConfig, ...config, ...exceptionConfig };

    function countMatches(conditions, user_name) {
      const userVars = {
        user: user_name,
        user_agent: navigator.userAgent
      };
      let count = 0;
      for (const cond in conditions) {
        if (cond == "user" && conditions[cond].includes(",")) {
          conditions[cond].split(/[ ,]+/).forEach(user => {
            if (userVars[cond] == user) count++;
          });
        } else {
          if (
            userVars[cond] == conditions[cond] ||
            (cond == "query_string" &&
              window.location.search.includes(conditions[cond])) ||
            (cond == "user_agent" &&
              userVars[cond].includes(conditions[cond])) ||
            (cond == "media_query" &&
              window.matchMedia(conditions[cond]).matches)
          ) {
            count++;
          } else {
            return 0;
          }
        }
      }
      return count;
    }
  }

  observers(tabContainer, tabs, disabled) {
    // Watch for changes in Lovelace.
    const callback = mutations => {
      // Theme changed.
      if (mutations[0].target.nodeName == "HTML") {
        mutations = [mutations[0]];
        this.styleHeader(tabContainer, tabs);
        this.conditionalStyling(tabs);
        return;
      }
      mutations.forEach(({ addedNodes, target }) => {
        if (addedNodes.length && target.nodeName == "PARTIAL-PANEL-RESOLVER") {
          // Navigated back to lovelace from elsewhere in HA.
          this.buttons = this.getButtonElements();
          this.run();
        } else if (target.className == "edit-mode" && addedNodes.length) {
          // Entered edit mode.
          this.editMode = true;
          if (!disabled) this.removeStyles(tabContainer, tabs, this.header);
          this.buttons.options = this.root.querySelector("paper-menu-button");
          this.insertEditMenu(tabs);
          this.fireEvent(this.header, "iron-resize");
        } else if (target.nodeName == "APP-HEADER" && addedNodes.length) {
          // Exited edit mode.
          let editor = this.root
            .querySelector("ha-app-layout")
            .querySelector("editor");
          if (editor) {
            this.root.querySelector("ha-app-layout").removeChild(editor);
          }
          for (let node of addedNodes) {
            if (node.nodeName == "APP-TOOLBAR") {
              this.editMode = false;
              this.buttons = this.getButtonElements();
              this.root.querySelectorAll("[id^='cch']").forEach(style => {
                style.remove();
              });
              setTimeout(() => {
                this.run();
                if (!disabled) this.conditionalStyling(tabs, this.header);
              }, 100);
            }
          }
        } else if (
          // Viewing unused entities
          this.frontendVersion < 20190911 &&
          addedNodes.length &&
          !addedNodes[0].nodeName == "HUI-UNUSED-ENTITIES"
        ) {
          let editor = this.root
            .querySelector("ha-app-layout")
            .querySelector("editor");
          if (editor) {
            this.root.querySelector("ha-app-layout").removeChild(editor);
          }
          if (this.cchConfig.conditional_styles) {
            this.buttons = this.getButtonElements(tabContainer);
            this.conditionalStyling(tabs, this.header);
          }
        } else if (target.id == "view" && addedNodes.length) {
          // Navigating to new tab/view.
          this.run();
          if (tabContainer) this.scrollTabIconIntoView();
        }
      });
    };
    let observer = new MutationObserver(callback);
    observer.observe(this.panelResolver, { childList: true });
    observer.observe(document.querySelector("html"), { attributes: true });
    observer.observe(this.view, { childList: true });
    observer.observe(this.root.querySelector("app-header"), {
      childList: true
    });

    if (!disabled) {
      // Watch for changes in entities.
      window.hassConnection.then(({ conn }) => {
        conn.socket.onmessage = () => {
          if (this.cchConfig.conditional_styles && !this.editMode) {
            this.conditionalStyling(tabs, this.header);
          }
        };
      });
    }
  }

  getButtonElements(disabled) {
    let buttons = {};
    buttons.options = this.root.querySelector("paper-menu-button");
    if (!this.editMode) {
      buttons.menu = this.root.querySelector("ha-menu-button");
      buttons.voice =
        this.root.querySelector("ha-start-voice-button") ||
        this.root.querySelector('[icon="hass:microphone"]');
      if (!this.newSidebar) {
        buttons.notifications = this.root.querySelector(
          "hui-notifications-button"
        );
      }
    }
    // Remove space taken up by "hidden" menu button anytime we get buttons.
    if (
      buttons.menu &&
      buttons.menu.style.visibility == "hidden" &&
      !disabled
    ) {
      buttons.menu.style.display = "none";
    } else if (buttons.menu) {
      buttons.menu.style.display = "";
    }
    return buttons;
  }

  tabContainerMargin(tabContainer) {
    let marginRight = 0;
    let marginLeft = 15;
    for (const button in this.buttons) {
      if (!this.buttons[button]) continue;
      let paperIconButton =
        this.buttons[button].querySelector("paper-icon-button") ||
        this.buttons[button].shadowRoot.querySelector("paper-icon-button");
      let visible = paperIconButton
        ? this.buttons[button].style.display !== "none" &&
          !paperIconButton.hasAttribute("hidden")
        : this.buttons[button].style.display !== "none";
      if (this.cchConfig[button] == "show" && visible) {
        if (button == "menu") marginLeft += 45;
        else marginRight += 45;
      } else if (this.cchConfig[button] == "clock" && visible) {
        const clockWidth =
          (this.cchConfig.clock_format == 12 && this.cchConfig.clock_am_pm) ||
          this.cchConfig.clock_date
            ? 110
            : 80;
        if (button == "menu") marginLeft += clockWidth + 15;
        else marginRight += clockWidth;
      }
    }
    if (tabContainer) {
      tabContainer.style.marginRight = `${marginRight}px`;
      tabContainer.style.marginLeft = `${marginLeft}px`;
    }
  }

  scrollTabIconIntoView() {
    let paperTabs = this.root.querySelector("paper-tabs");
    let currentTab = paperTabs.querySelector(".iron-selected");
    if (!paperTabs || !currentTab) return;
    let tab = currentTab.getBoundingClientRect();
    let container = paperTabs.shadowRoot
      .querySelector("#tabsContainer")
      .getBoundingClientRect();
    // If tab's icon isn't in view scroll it in.
    if (container.right < tab.right || container.left > tab.left) {
      if ("scrollMarginInline" in document.documentElement.style) {
        currentTab.scrollIntoView({ inline: "center" });
      } else if (Element.prototype.scrollIntoViewIfNeeded) {
        currentTab.scrollIntoViewIfNeeded(true);
      } else {
        currentTab.scrollIntoView();
      }
    }
  }

  hideMenuItems() {
    // Hide items in options menu.
    if (
      this.cchConfig.hide_help ||
      this.cchConfig.hide_config ||
      this.cchConfig.hide_unused
    ) {
      const localized = (item, string) => {
        let localString = this.hass.localize(
          `ui.panel.lovelace.menu.${string}`
        );
        return (
          item.innerHTML.includes(localString) ||
          item.getAttribute("aria-label") == localString
        );
      };
      this.buttons.options
        .querySelector("paper-listbox")
        .querySelectorAll("paper-item")
        .forEach(item => {
          if (
            (this.cchConfig.hide_help && localized(item, "help")) ||
            (this.cchConfig.hide_unused &&
              localized(item, "unused_entities")) ||
            (this.cchConfig.hide_config && localized(item, "configure_ui"))
          ) {
            item.parentNode.removeChild(item);
          }
        });
    }
  }

  insertEditMenu(tabs, disabled) {
    if (
      this.buttons.options &&
      (this.editMode ||
        (this.lovelace.mode == "yaml" && this.cchConfig.yaml_editor))
    ) {
      // If any tabs are hidden, add "show all tabs" option.
      if (this.cchConfig.hide_tabs && !this.cchConfig.edit_mode_show_tabs) {
        let show_tabs = document.createElement("paper-item");
        show_tabs.setAttribute("id", "show_tabs");
        show_tabs.addEventListener("click", () => {
          for (let i = 0; i < tabs.length; i++) {
            tabs[i].style.removeProperty("display");
          }
        });
        show_tabs.innerHTML = "Show all tabs";
        this.insertMenuItem(
          this.buttons.options.querySelector("paper-listbox"),
          show_tabs
        );
      }

      // Add menu item to open CCH settings.
      let cchSettings = document.createElement("paper-item");
      cchSettings.setAttribute("id", "cch_settings");
      cchSettings.addEventListener("click", () => this.showEditor());
      cchSettings.innerHTML = "CCH Settings";
      this.insertMenuItem(
        this.buttons.options.querySelector("paper-listbox"),
        cchSettings
      );
      if (!disabled) this.hideMenuItems();
    }
  }

  removeStyles(tabContainer, tabs, { style }) {
    this.root.querySelector("app-header").style.backgroundColor = "#455a64";
    this.root.querySelectorAll("[id^='cch']").forEach(style => {
      style.remove();
    });
    if (this.cchConfig.tab_css) {
      for (let [key, value] of Object.entries(this.cchConfig.tab_css)) {
        key = this.getViewIndex(key);
        value = value.replace(/: /g, ":").replace(/; /g, ";");
        let css = tabs[key].style.cssText
          .replace(/: /g, ":")
          .replace(/; /g, ";");
        tabs[key].style.cssText = css.replace(value, "");
      }
    }
    if (this.cchConfig.header_css) {
      let value = this.cchConfig.header_css
        .replace(/: /g, ":")
        .replace(/; /g, ";");
      let css = style.cssText.replace(/: /g, ":").replace(/; /g, ";");
      style.cssText = css.replace(value, "");
    }
    if (tabContainer) {
      tabContainer.style.marginLeft = "";
      tabContainer.style.marginRight = "";
    }
    this.view.style = "";
    for (let i = 0; i < tabs.length; i++) {
      tabs[i].style.color = "";
    }
    if (this.cchConfig.edit_mode_show_tabs) {
      for (let i = 0; i < tabs.length; i++) {
        tabs[i].style.removeProperty("display");
      }
    }
    let viewStyle = document.createElement("style");
    viewStyle.setAttribute("id", "cch_view_styling");
    viewStyle.innerHTML = `
    hui-view {
      min-height: 100vh;
    }
    hui-panel-view {
      min-height: calc(100vh - 52px);
    }
    `;
    this.root.appendChild(viewStyle);
  }

  styleHeader(tabContainer, tabs) {
    // Fix for old background config option.
    if (typeof this.cchConfig.background == "boolean") {
      this.cchConfig.background = "";
    }
    this.prevColor.background =
      this.cchConfig.background ||
      getComputedStyle(document.body).getPropertyValue("--cch-background") ||
      getComputedStyle(document.body).getPropertyValue("--primary-color");
    let statusBarColor =
      this.cchConfig.statusbar_color || this.prevColor.background;
    // Match mobile status bar color to header color.
    let themeColor = document.querySelector('[name="theme-color"]');
    let themeColorApple =
      document.querySelector(
        '[name="apple-mobile-web-app-status-bar-style"]'
      ) || document.createElement("meta");
    colorStatusBar(statusBarColor);
    // If browser is idle or in background sometimes theme-color needs reset.
    let observeStatus = new MutationObserver(() => {
      if (themeColor.content != statusBarColor) colorStatusBar(statusBarColor);
    });
    if (this.firstRun) {
      observeStatus.observe(themeColor, {
        attributes: true,
        attributeFilter: ["content"]
      });
    }

    // Adjust view size & padding for new header size.
    if (!this.cchConfig.header || this.cchConfig.kiosk_mode) {
      this.header.style.display = "none";
      this.view.style.minHeight = "100vh";
      if (
        this.frontendVersion >= 20190911 &&
        !this.root.querySelector("#cch_view_styling")
      ) {
        let viewStyle = document.createElement("style");
        viewStyle.setAttribute("id", "cch_view_styling");
        viewStyle.innerHTML = `
        hui-view {
          ${this.cchConfig.view_css ? this.cchConfig.view_css : ""}
        }
        hui-panel-view {
          ${this.cchConfig.view_css ? this.cchConfig.view_css : ""}
        }
        `;
        this.root.appendChild(viewStyle);
      }
    } else {
      this.view.style.minHeight = "100vh";
      this.view.style.marginTop = "-48.5px";
      this.view.style.paddingTop = "48.5px";
      this.view.style.boxSizing = "border-box";
      this.header.style.background = this.prevColor.background;
      this.conditionalStyling(tabs, this.header);
      this.header.querySelector("app-toolbar").style.background = "transparent";
      if (
        this.frontendVersion >= 20190911 &&
        !this.root.querySelector("#cch_view_styling")
      ) {
        let viewStyle = document.createElement("style");
        viewStyle.setAttribute("id", "cch_view_styling");
        viewStyle.innerHTML = `
        hui-view {
          margin-top: -48.5px;
          padding-top: 52px;
          min-height: 100vh;
          ${this.cchConfig.view_css ? this.cchConfig.view_css : ""}
        }
        hui-panel-view {
          margin-top: -52px;
          padding-top: 52px;
          min-height: calc(100vh - 52px);
          ${this.cchConfig.view_css ? this.cchConfig.view_css : ""}
        }
        `;
        this.root.appendChild(viewStyle);
      }
    }

    // Match sidebar elements to header's size.
    if (this.newSidebar && this.cchConfig.compact_header) {
      let sidebar = this.main.shadowRoot.querySelector("ha-sidebar").shadowRoot;
      sidebar.querySelector(".menu").style = "height:49px;";
      sidebar.querySelector("paper-listbox").style =
        "height:calc(100% - 180px);";
    }

    // Current tab icon color.
    let conditionalTabs = this.cchConfig.conditional_styles
      ? JSON.stringify(this.cchConfig.conditional_styles).includes("tab")
      : false;
    if (
      !this.root.querySelector("#cch_iron_selected") &&
      !this.editMode &&
      !conditionalTabs &&
      tabContainer
    ) {
      let style = document.createElement("style");
      style.setAttribute("id", "cch_iron_selected");
      style.innerHTML = `
              .iron-selected {
                ${
                  this.cchConfig.active_tab_color
                    ? `color: ${`${
                        this.cchConfig.active_tab_color
                      } !important`}`
                    : "var(--cch-active-tab-color)"
                }
              }
            `;
      tabContainer.appendChild(style);
    }

    // Style current tab indicator.
    let indicator = this.cchConfig.tab_indicator_color;
    if (
      indicator &&
      !this.root.querySelector("#cch_header_colors") &&
      !this.editMode
    ) {
      let style = document.createElement("style");
      style.setAttribute("id", "cch_header_colors");
      style.innerHTML = `
            paper-tabs {
              ${
                indicator
                  ? `--paper-tabs-selection-bar-color: ${indicator} !important`
                  : "var(--cch-tab-indicator-color) !important"
              }
            }
          `;
      this.root.appendChild(style);
    }

    // Tab's icon color.
    let all_tabs_color =
      this.cchConfig.all_tabs_color || "var(--cch-all-tabs-color)";
    if (
      (this.cchConfig.tab_color &&
        Object.keys(this.cchConfig.tab_color).length) ||
      all_tabs_color
    ) {
      for (let i = 0; i < tabs.length; i++) {
        tabs[i].style.color = this.cchConfig.tab_color[i] || all_tabs_color;
      }
    }

    // Add custom css.
    if (this.cchConfig.tab_css) {
      for (let [key, value] of Object.entries(this.cchConfig.tab_css)) {
        key = this.getViewIndex(key);
        if (tabs[key]) tabs[key].style.cssText += value;
      }
    }
    if (this.cchConfig.header_css)
      this.header.style.cssText += this.cchConfig.header_css;
    if (this.cchConfig.view_css && this.frontendVersion < 20190911) {
      this.view.style.cssText += this.cchConfig.view_css;
    }

    if (tabContainer) {
      // Shift the header up to hide unused portion.
      this.root.querySelector("app-toolbar").style.marginTop = this.cchConfig
        .compact_header
        ? "-64px"
        : "";

      tabs.forEach(({ style }) => {
        style.marginTop = "-1px";
      });

      // Show/hide tab navigation chevrons.
      if (!this.cchConfig.chevrons) {
        let chevron = tabContainer.shadowRoot.querySelectorAll(
          '[icon^="paper-tabs:chevron"]'
        );
        chevron[0].style.display = "none";
        chevron[1].style.display = "none";
      } else {
        // Remove space taken up by "not-visible" chevron.
        let style = document.createElement("style");
        style.setAttribute("id", "cch_chevron");
        style.innerHTML = `
              .not-visible {
                display:none;
              }
            `;
        tabContainer.shadowRoot.appendChild(style);
      }
    }
    function colorStatusBar(statusBarColor) {
      themeColor = document.querySelector("meta[name=theme-color]");
      themeColor.setAttribute("content", statusBarColor);
      themeColor.setAttribute("default-content", statusBarColor);
      if (
        !document.querySelector(
          '[name="apple-mobile-web-app-status-bar-style"]'
        )
      ) {
        themeColorApple.name = "apple-mobile-web-app-status-bar-style";
        themeColorApple.content = statusBarColor;
        document.getElementsByTagName("head")[0].appendChild(themeColorApple);
      } else {
        themeColorApple.setAttribute("content", statusBarColor);
      }
    }
  }

  styleButtons({ length }, tabContainer) {
    let topMargin =
      length > 0 && this.cchConfig.compact_header ? "margin-top:111px;" : "";
    let topMarginMenu =
      length > 0 && this.cchConfig.compact_header ? "margin-top:115px;" : "";
    // Reverse buttons object so "menu" is first in the overflow menu.
    this.buttons = this.reverseObject(this.buttons);
    for (const button in this.buttons) {
      if (!this.buttons[button]) continue;
      if (button == "options" && this.cchConfig[button] == "overflow") {
        this.cchConfig[button] = "show";
      }
      let buttonStyle = `
        z-index:1;
        ${
          button == "menu"
            ? `padding: 8px 0; margin-bottom:5px; ${topMarginMenu}`
            : "padding: 8px;"
        }
        ${
          button == "voice" && this.cchConfig["voice"] == "clock"
            ? "width: 100px; padding:4px;"
            : ""
        }
        ${button == "menu" ? "" : topMargin}
        ${button == "options" ? "margin-right:-5px;" : ""}
      `;
      if (
        this.cchConfig[button] == "show" ||
        this.cchConfig[button] == "clock"
      ) {
        if (button == "menu") {
          let paperIconButton = this.buttons[button].querySelector(
            "paper-icon-button"
          )
            ? this.buttons[button].querySelector("paper-icon-button")
            : this.buttons[button].shadowRoot.querySelector(
                "paper-icon-button"
              );
          if (!paperIconButton) continue;
          paperIconButton.style.cssText = buttonStyle;
        } else {
          this.buttons[button].style.cssText = buttonStyle;
        }
      } else if (this.cchConfig[button] == "overflow") {
        const menu_items = this.buttons.options.querySelector("paper-listbox");
        let paperIconButton = this.buttons[button].querySelector(
          "paper-icon-button"
        )
          ? this.buttons[button].querySelector("paper-icon-button")
          : this.buttons[button].shadowRoot.querySelector("paper-icon-button");
        if (paperIconButton && paperIconButton.hasAttribute("hidden")) {
          continue;
        }
        const id = `menu_item_${button}`;
        if (!menu_items.querySelector(`#${id}`)) {
          const wrapper = document.createElement("paper-item");
          wrapper.setAttribute("id", id);
          wrapper.innerText = this.getTranslation(button);
          wrapper.appendChild(this.buttons[button]);
          wrapper.addEventListener("click", () => {
            paperIconButton.click();
          });
          paperIconButton.style.pointerEvents = "none";
          this.insertMenuItem(menu_items, wrapper);
          if (button == "notifications" && !this.newSidebar) {
            let style = document.createElement("style");
            style.innerHTML = `
                  .indicator {
                    top: 5px;
                    right: 0px;
                    width: 10px;
                    height: 10px;
                    ${
                      this.cchConfig.notify_indicator_color
                        ? `background-color:${
                            this.cchConfig.notify_indicator_color
                          }`
                        : ""
                    }
                  }
                  .indicator > div{
                    display:none;
                  }
                `;
            paperIconButton.parentNode.appendChild(style);
          }
        }
      } else if (this.cchConfig[button] == "hide") {
        this.buttons[button].style.display = "none";
      }
      // Hide menu button if hiding the sidebar.
      if (
        this.newSidebar &&
        (this.cchConfig.kiosk_mode || this.cchConfig.disable_sidebar)
      ) {
        this.buttons.menu.style.display = "none";
      }
    }

    // Remove empty space taken up by hidden menu button.
    if (this.buttons.menu && this.newSidebar && this.firstRun) {
      new MutationObserver(() => {
        if (this.buttons.menu.style.visibility == "hidden") {
          this.buttons.menu.style.display = "none";
        } else {
          this.buttons.menu.style.display = "";
        }
        this.tabContainerMargin(tabContainer);
      }).observe(this.buttons.menu, {
        attributes: true,
        attributeFilter: ["style"]
      });
    }

    // Use color vars set in HA theme.
    this.buttons.menu.style.color = "var(--cch-button-color-menu)";
    if (!this.newSidebar) {
      this.buttons.notifications.style.color =
        "var(--cch-button-color-notifications)";
    }
    if (this.buttons.voice) this.buttons.voice.style.color = "var(--cch-button-color-voice)";
    this.buttons.options.style.color = "var(--cch-button-color-options)";
    if (this.cchConfig.all_buttons_color) {
      this.root.querySelector("app-toolbar").style.color =
        this.cchConfig.all_buttons_color || "var(--cch-all-buttons-color)";
    }

    // Use colors set in CCH config.
    for (const button in this.buttons) {
      if (this.cchConfig.button_color[button]) {
        this.buttons[button].style.color = this.cchConfig.button_color[button];
      }
    }

    // Notification indicator's color for HA 0.96 and above.
    if (
      this.newSidebar &&
      this.cchConfig.menu != "hide" &&
      !this.buttons.menu.shadowRoot.querySelector("#cch_dot")
    ) {
      let style = document.createElement("style");
      style.setAttribute("id", "cch_dot");
      let indicator =
        this.cchConfig.notify_indicator_color ||
        getComputedStyle(this.header).getPropertyValue(
          "--cch-tab-indicator-color"
        ) ||
        "";
      let border = getComputedStyle(this.header)
        .getPropertyValue("background")
        .includes("url")
        ? "border-color: transparent !important"
        : `border-color: ${getComputedStyle(this.header).getPropertyValue(
            "background-color"
          )} !important;`;
      style.innerHTML = `
          .dot {
            ${topMargin}
            z-index: 2;
            ${indicator ? `background: ${indicator} !important` : ""}
            ${border}
          }
      `;
      this.buttons.menu.shadowRoot.appendChild(style);
    } else if (
      // Notification indicator's color for HA 0.95 and below.
      this.cchConfig.notify_indicator_color &&
      this.cchConfig.notifications == "show" &&
      !this.newSidebar
    ) {
      let style = document.createElement("style");
      style.innerHTML = `
            .indicator {
              background-color:${this.cchConfig.notify_indicator_color ||
                "var(--cch-notify-indicator-color)"} !important;
              color: ${this.cchConfig.notify_text_color ||
                "var(--cch-notify-text-color), var(--primary-text-color)"};
            }
          `;
      this.buttons.notifications.shadowRoot.appendChild(style);
    }

    // Add buttons's custom css.
    let buttonCss = this.cchConfig.button_css;
    if (buttonCss) {
      for (const [key, value] of Object.entries(buttonCss)) {
        if (!this.buttons[key]) {
          continue;
        } else {
          this.buttons[key].style.cssText += value;
        }
      }
    }
  }

  getTranslation(button) {
    switch (button) {
      case "notifications":
        return this.hass.localize("ui.notification_drawer.title");
      default:
        return button.charAt(0).toUpperCase() + button.slice(1);
    }
  }

  defaultTab(tabs, tabContainer) {
    let firstTab = tabs.indexOf(tabs.filter(tab => tab.style.display == "")[0]);
    let default_tab = this.cchConfig.default_tab;
    if (typeof default_tab == "object" && !default_tab.length) return;
    let template = this.cchConfig.default_tab_template;
    if ((default_tab || template) && tabContainer) {
      if (template) default_tab = this.templateEval(template, this.hass.states);
      default_tab = this.getViewIndex(default_tab);
      let activeTab = tabs.indexOf(
        tabContainer.querySelector(".iron-selected")
      );
      if (
        activeTab != default_tab &&
        activeTab == firstTab &&
        (!this.cchConfig.redirect ||
          (this.cchConfig.redirect &&
            tabs[default_tab].style.display != "none"))
      ) {
        tabs[default_tab].click();
      }
    }
  }

  sidebarMod() {
    let menu = this.buttons.menu.querySelector("paper-icon-button");
    let sidebar = this.main.shadowRoot.querySelector("app-drawer");

    // HA 0.95 and below
    if (!this.newSidebar) {
      if (!this.cchConfig.sidebar_swipe || this.cchConfig.kiosk_mode) {
        sidebar.removeAttribute("swipe-open");
      }
      if (
        (this.cchConfig.sidebar_closed || this.cchConfig.kiosk_mode) &&
        !this.sidebarClosed
      ) {
        if (sidebar.hasAttribute("opened")) menu.click();
        this.sidebarClosed = true;
      }
      // HA 0.96 and above
    } else if (this.cchConfig.disable_sidebar || this.cchConfig.kiosk_mode) {
      sidebar.style.display = "none";
      sidebar.addEventListener(
        "mouseenter",
        event => {
          event.stopPropagation();
        },
        true
      );
      let style = document.createElement("style");
      style.type = "text/css";
      style.appendChild(
        document.createTextNode(
          ":host(:not([expanded])) {width: 0px !important;}"
        )
      );
      this.main.shadowRoot
        .querySelector("ha-sidebar")
        .shadowRoot.appendChild(style);

      style = document.createElement("style");
      style.type = "text/css";
      style.appendChild(
        document.createTextNode(":host {--app-drawer-width: 0px !important;}")
      );
      this.main.shadowRoot.appendChild(style);
    }
  }

  hideTabs(tabContainer, tabs) {
    let hidden_tabs = String(this.cchConfig.hide_tabs).length
      ? String(this.cchConfig.hide_tabs)
          .replace(/\s+/g, "")
          .split(",")
      : null;
    let shown_tabs = String(this.cchConfig.show_tabs).length
      ? String(this.cchConfig.show_tabs)
          .replace(/\s+/g, "")
          .split(",")
      : null;

    // Set the tab config source.
    if (!hidden_tabs && shown_tabs) {
      let all_tabs = [];
      shown_tabs = this.buildRanges(shown_tabs);
      for (let i = 0; i < tabs.length; i++) all_tabs.push(i);
      // Invert shown_tabs to hidden_tabs.
      hidden_tabs = all_tabs.filter(el => !shown_tabs.includes(el));
    } else {
      hidden_tabs = this.buildRanges(hidden_tabs);
    }

    // Hide tabs.
    for (const tab of hidden_tabs) {
      if (!tabs[tab]) continue;
      tabs[tab].style.display = "none";
    }

    if (this.cchConfig.redirect && tabContainer) {
      const activeTab = tabContainer.querySelector("paper-tab.iron-selected");
      const activeTabIndex = tabs.indexOf(activeTab);
      // Is the current tab hidden and is there at least one tab is visible.
      if (
        hidden_tabs.includes(activeTabIndex) &&
        hidden_tabs.length != tabs.length
      ) {
        let i = 0;
        // Find the first visible tab and navigate.
        while (hidden_tabs.includes(i)) {
          i++;
        }
        tabs[i].click();
      }
    }
    return hidden_tabs;
  }

  insertMenuItem(menu_items, element) {
    let first_item = menu_items.querySelector("paper-item");
    if (!menu_items.querySelector(`#${element.id}`)) {
      first_item.parentNode.insertBefore(element, first_item);
    }
  }

  insertClock(button) {
    if (!this.buttons[button]) return;
    const clock_button = this.buttons[button].querySelector("paper-icon-button")
      ? this.buttons[button]
      : this.buttons[button].shadowRoot;
    const clockIcon =
      clock_button.querySelector("paper-icon-button") || this.buttons[button];
    const clockIronIcon =
      clockIcon.querySelector("iron-icon") ||
      clockIcon.shadowRoot.querySelector("iron-icon");
    const clockWidth =
      (this.cchConfig.clock_format == 12 && this.cchConfig.clock_am_pm) ||
      this.cchConfig.clock_date
        ? 105
        : 80;

    if (
      !this.newSidebar &&
      this.cchConfig.notifications == "clock" &&
      this.cchConfig.clock_date &&
      !this.buttons.notifications.shadowRoot.querySelector("#cch_indicator")
    ) {
      let style = document.createElement("style");
      style.setAttribute("id", "cch_indicator");
      style.innerHTML = `
            .indicator {
              top: unset;
              bottom: -3px;
              right: 0px;
              width: 90%;
              height: 3px;
              border-radius: 0;
              ${
                this.cchConfig.notify_indicator_color
                  ? `background-color:${this.cchConfig.notify_indicator_color}`
                  : ""
              }
            }
            .indicator > div{
              display:none;
            }
          `;
      this.buttons.notifications.shadowRoot.appendChild(style);
    }

    let clockElement = clockIronIcon.parentNode.getElementById("cch_clock");
    if (this.cchConfig.menu == "clock") {
      this.buttons.menu.style.marginTop = this.cchConfig.compact_header
        ? "111px"
        : "";
      this.buttons.menu.style.zIndex = "1";
    }
    if (!clockElement) {
      clockIcon.style.cssText = `
                margin-right:-5px;
                width:${clockWidth}px;
                text-align: center;
              `;
      clockElement = document.createElement("p");
      clockElement.setAttribute("id", "cch_clock");
      let clockAlign = "center";
      let padding = "";
      let fontSize = "";
      if (this.cchConfig.clock_date && this.cchConfig.menu == "clock") {
        clockAlign = "left";
        padding = "margin-right:-20px";
        fontSize = "font-size:12pt";
      } else if (this.cchConfig.clock_date) {
        clockAlign = "right";
        padding = "margin-left:-20px";
        fontSize = "font-size:12pt";
      }
      clockElement.style.cssText = `
                margin-top: ${this.cchConfig.clock_date ? "-4px" : "2px"};
                text-align: ${clockAlign};
                ${padding};
                ${fontSize};
              `;
      clockIronIcon.parentNode.insertBefore(clockElement, clockIronIcon);
      clockIronIcon.style.display = "none";
      let style = document.createElement("style");
      style.setAttribute("id", "cch_clock");
      style.innerHTML = `
            time {
              ${this.cchConfig.time_css}
            }
            date {
              ${this.cchConfig.date_css}
            }
          `;
      clockIronIcon.parentNode.insertBefore(style, clockIronIcon);
    }

    const clockFormat = {
      hour12: this.cchConfig.clock_format != 24,
      hour: "2-digit",
      minute: "2-digit"
    };
    this.updateClock(clockElement, clockFormat);
  }

  updateClock(clock, clockFormat) {
    let date = new Date();
    let seconds = date.getSeconds();
    let locale = this.cchConfig.date_locale || this.hass.language;
    let time = date.toLocaleTimeString([], clockFormat);
    let options = {
      weekday: "short",
      month: "2-digit",
      day: "2-digit"
    };
    date = this.cchConfig.clock_date
      ? `</br><date>${date.toLocaleDateString(locale, options)}</date>`
      : "";
    if (!this.cchConfig.clock_am_pm && this.cchConfig.clock_format == 12) {
      clock.innerHTML = `<time>${time.slice(0, -3)}</time>${date}`;
    } else {
      clock.innerHTML = `<time>${time}</time>${date}`;
    }
    window.setTimeout(() => {
      this.updateClock(clock, clockFormat);
    }, (60 - seconds) * 1000);
  }

  // Abandon all hope, ye who enter here.
  conditionalStyling(tabs) {
    let _hass = document.querySelector("home-assistant").hass;
    const conditional_styles = this.cchConfig.conditional_styles;
    let tabContainer = tabs[0] ? tabs[0].parentNode : "";
    let styling = [];

    if (Array.isArray(conditional_styles)) {
      for (let i = 0; i < conditional_styles.length; i++) {
        styling.push(Object.assign({}, conditional_styles[i]));
      }
    } else {
      styling.push(Object.assign({}, conditional_styles));
    }

    function exists(configItem) {
      return configItem !== undefined && configItem !== null;
    }

    function notificationCount() {
      if (this.newSidebar) {
        let badge = this.main.shadowRoot
          .querySelector("ha-sidebar")
          .shadowRoot.querySelector("span.notification-badge");
        if (!badge) return 0;
        else return parseInt(badge.innerHTML);
      }
      let i = 0;
      let drawer = this.root
        .querySelector("hui-notification-drawer")
        .shadowRoot.querySelector(".notifications");
      for (let notification of drawer.querySelectorAll(".notification")) {
        if (notification.style.display !== "none") i++;
      }
      return i;
    }

    for (let i = 0; i < styling.length; i++) {
      let template = styling[i].template;
      let condition = styling[i].condition;

      if (template) {
        if (!template.length) template = [template];
        template.forEach(template => {
          this.templates(template, tabs, _hass, this.header);
        });
      } else if (condition) {
        let entity = styling[i].entity;
        if (_hass.states[entity] == undefined && entity !== "notifications") {
          console.log(`CCH conditional styling: ${entity} does not exist.`);
          continue;
        }
        let entState =
          entity == "notifications"
            ? notificationCount()
            : _hass.states[entity].state;
        let condState = condition.state;
        let above = condition.above;
        let below = condition.below;

        let toStyle =
          (exists(condState) && entState == condState) ||
          (exists(above) &&
            exists(below) &&
            entState > above &&
            entState < below) ||
          (exists(above) && entState > above) ||
          (exists(below) && entState < below);

        let tabIndex = styling[i].tab ? Object.keys(styling[i].tab)[0] : null;
        let tabCondition = styling[i].tab ? styling[i].tab[tabIndex] : null;
        let tabElem = tabs[this.getViewIndex(tabIndex)];
        let tabkey = `tab_${this.getViewIndex(tabIndex)}`;
        let button = styling[i].button
          ? Object.keys(styling[i].button)[0]
          : null;
        let background = styling[i].background;

        // Conditionally style tabs.
        if (toStyle && exists(tabIndex) && tabElem) {
          if (tabCondition.hide) tabElem.style.display = "none";
          if (tabCondition.color) {
            if (this.prevColor[tabkey] == undefined) {
              Object.assign(this.prevColor, {
                [tabkey]: window
                  .getComputedStyle(tabElem, null)
                  .getPropertyValue("color")
              });
            }
            tabElem.style.color = tabCondition.color;
          }
          if (tabCondition.on_icon) {
            tabElem
              .querySelector("ha-icon")
              .setAttribute("icon", tabCondition.on_icon);
          }
        } else if (!toStyle && exists(tabIndex) && tabElem) {
          if (tabCondition.hide) {
            tabElem.style.display = "";
          }
          if (tabCondition.color && this.prevColor[tabkey]) {
            tabElem.style.color = this.prevColor[tabkey];
          }
          if (tabCondition.off_icon) {
            tabElem
              .querySelector("ha-icon")
              .setAttribute("icon", tabCondition.off_icon);
          }
        }

        if (toStyle && button) {
          if (!this.buttons[button]) continue;
          let buttonCondition = styling[i].button[button];
          let buttonElem = this.buttons[button].querySelector(
            "paper-icon-button"
          )
            ? this.buttons[button].querySelector("paper-icon-button")
            : this.buttons[button].shadowRoot.querySelector(
                "paper-icon-button"
              );
          if (buttonCondition.hide) {
            buttonElem.style.display = "none";
          }
          if (buttonCondition.color) {
            if (this.prevColor.button == undefined) this.prevColor.button = {};
            if (this.prevColor.button[button] == undefined) {
              this.prevColor.button[button] = window
                .getComputedStyle(buttonElem, null)
                .getPropertyValue("color");
            }
            buttonElem.style.color = buttonCondition.color;
          }
          if (buttonCondition.on_icon) {
            let icon =
              buttonElem.querySelector("iron-icon") ||
              buttonElem.shadowRoot.querySelector("iron-icon");
            icon.setAttribute("icon", buttonCondition.on_icon);
          }
        } else if (!toStyle && button) {
          let buttonCondition = styling[i].button[button];
          let buttonElem = this.buttons[button].querySelector(
            "paper-icon-button"
          )
            ? this.buttons[button].querySelector("paper-icon-button")
            : this.buttons[button].shadowRoot.querySelector(
                "paper-icon-button"
              );
          if (buttonCondition.hide) {
            buttonElem.style.display = "";
          }
          if (
            buttonCondition.color &&
            this.prevColor.button &&
            this.prevColor.button[button]
          ) {
            buttonElem.style.color = this.prevColor.button[button];
          }
          if (buttonCondition.off_icon) {
            let icon =
              buttonElem.querySelector("iron-icon") ||
              buttonElem.shadowRoot.querySelector("iron-icon");
            icon.setAttribute("icon", buttonCondition.off_icon);
          }
        }

        // Conditionally style background.
        if (toStyle && background) {
          if (this.prevColor.background == undefined) {
            this.prevColor.background = window
              .getComputedStyle(this.header, null)
              .getPropertyValue("background");
          }
          this.header.style.background = styling[i].background;
        } else if (!toStyle && background) {
          this.header.style.background = this.prevColor.background;
        }
      }
    }
    this.tabContainerMargin(tabContainer);
  }

  templates(template, tabs, _hass, { style }) {
    let states = _hass.states;
    for (const condition in template) {
      if (condition == "tab") {
        for (const tab in template[condition]) {
          let tempCond = template[condition][tab];
          if (!tempCond.length) tempCond = [tempCond];
          tempCond.forEach(templateObj => {
            let tabIndex = this.getViewIndex(Object.keys(template[condition]));
            let styleTarget = Object.keys(templateObj);
            let tabTemplate = templateObj[styleTarget];
            let tabElement = tabs[tabIndex];
            if (styleTarget == "icon") {
              tabElement
                .querySelector("ha-icon")
                .setAttribute("icon", this.templateEval(tabTemplate, states));
            } else if (styleTarget == "color") {
              tabElement.style.color = this.templateEval(tabTemplate, states);
            } else if (styleTarget == "display") {
              this.templateEval(tabTemplate, states) == "show"
                ? (tabElement.style.display = "")
                : (tabElement.style.display = "none");
            }
          });
        }
      } else if (condition == "button") {
        for (const button in template[condition]) {
          let tempCond = template[condition][button];
          if (!tempCond.length) tempCond = [tempCond];
          tempCond.forEach(templateObj => {
            let buttonName = Object.keys(template[condition]);
            if (this.newSidebar && buttonName == "notifications") return;
            let styleTarget = Object.keys(templateObj);
            let buttonElem = this.buttons[buttonName];
            let tempCond = templateObj[styleTarget];
            let iconTarget = buttonElem.querySelector("paper-icon-button")
              ? buttonElem.querySelector("paper-icon-button")
              : buttonElem.shadowRoot.querySelector("paper-icon-button");
            if (styleTarget == "icon") {
              iconTarget.setAttribute(
                "icon",
                this.templateEval(tempCond, states)
              );
            } else if (styleTarget == "color") {
              let tar =
                iconTarget.querySelector("iron-icon") ||
                iconTarget.shadowRoot.querySelector("iron-icon");
              tar.style.color = this.templateEval(tempCond, states);
            } else if (styleTarget == "display") {
              this.templateEval(tempCond, states) == "show"
                ? (buttonElem.style.display = "")
                : (buttonElem.style.display = "none");
            }
          });
        }
      } else if (condition == "background") {
        style.background = this.templateEval(template[condition], states);
      }
    }
  }

  // Get range (e.g., "5 to 9") and build (5,6,7,8,9).
  buildRanges(array) {
    let ranges = [];
    if (!array) return [];
    const sortNumber = (a, b) => a - b;
    const range = (start, end) =>
      new Array(end - start + 1).fill(undefined).map((_, i) => i + start);
    for (let i in array) {
      if (typeof array[i] == "string" && array[i].includes("to")) {
        let split = array[i].split("to");
        if (parseInt(split[1]) > parseInt(split[0])) {
          ranges.push(range(parseInt(split[0]), parseInt(split[1])));
        } else {
          ranges.push(range(parseInt(split[1]), parseInt(split[0])));
        }
      } else if (isNaN(array[i])) {
        let views = this.lovelace.config.views;
        for (let view in views) {
          if (
            views[view]["title"] == array[i] ||
            views[view]["path"] == array[i]
          ) {
            ranges.push(parseInt(view));
          }
        }
      } else {
        ranges.push(parseInt(array[i]));
      }
    }
    return ranges.flat().sort(sortNumber);
  }

  showEditor() {
    window.scrollTo(0, 0);
    if (!this.root.querySelector("ha-app-layout editor")) {
      const container = document.createElement("editor");
      const nest = document.createElement("div");
      nest.style.cssText = `
        padding: 20px;
        max-width: 600px;
        margin: 15px auto;
        background: var(--paper-card-background-color);
        border: 6px solid var(--paper-card-background-color);
      `;
      container.style.cssText = `
        width: 100%;
        min-height: 100%;
        box-sizing: border-box;
        position: absolute;
        background: var(--background-color, grey);
        z-index: 2;
        padding: 5px;
      `;
      this.root
        .querySelector("ha-app-layout")
        .insertBefore(container, this.view);
      container.appendChild(nest);
      nest.appendChild(document.createElement("compact-custom-header-editor"));
    }
  }

  getViewIndex(viewString) {
    let views = this.lovelace.config.views;
    if (isNaN(viewString)) {
      for (let view in views) {
        if (
          views[view]["title"] == viewString ||
          views[view]["path"] == viewString
        ) {
          return view;
        }
      }
    } else {
      return parseInt(viewString);
    }
  }

  reverseObject(object) {
    let newObject = {};
    let keys = [];
    for (let key in object) keys.push(key);
    for (let i = keys.length - 1; i >= 0; i--) {
      let value = object[keys[i]];
      newObject[keys[i]] = value;
    }
    return newObject;
  }

  templateEval(template, states) {
    let entity = states;
    try {
      if (template.includes("return")) {
        return eval(`(function() {${template}}())`);
      } else {
        return eval(template);
      }
    } catch (e) {
      console.log(
        `%cCCH Template Failed:%c\n${template}\n%c${e}`,
        "text-decoration: underline;",
        "",
        "color: red;"
      );
    }
  }

  swipeNavigation(tabs, tabContainer) {
    // To make it easier to update lovelace-swipe-navigation
    // keep this as close to the standalone lovelace addon as possible.
    if (!tabContainer) return;
    let swipe_amount = this.cchConfig.swipe_amount || 15;
    let swipe_groups = this.cchConfig.swipe_groups;
    let animate = this.cchConfig.swipe_animate || "none";
    let skip_tabs = this.cchConfig.swipe_skip
      ? this.buildRanges(this.cchConfig.swipe_skip.split(","))
      : [];
    let wrap =
      this.cchConfig.swipe_wrap != undefined ? this.cchConfig.swipe_wrap : true;
    let prevent_default =
      this.cchConfig.swipe_prevent_default != undefined
        ? this.cchConfig.swipe_prevent_default
        : false;

    swipe_amount /= 10 ** 2;
    const appLayout = this.root.querySelector("ha-app-layout");
    let inGroup = true;
    let xDown;
    let yDown;
    let xDiff;
    let yDiff;
    let activeTab;
    let firstTab;
    let lastTab;
    let left;
    let fTabs;

    appLayout.addEventListener("touchstart", handleTouchStart.bind(this), {
      passive: true
    });
    appLayout.addEventListener("touchmove", handleTouchMove, {
      passive: false
    });
    appLayout.addEventListener("touchend", handleTouchEnd, { passive: true });

    click = click.bind(this);
    clearClassNames = clearClassNames.bind(this);
    animation = animation.bind(this);

    if (!this.root.querySelector("#cch_swipe_animation")) {
      let swipeAnimations = document.createElement("style");
      swipeAnimations.setAttribute("id", "cch_swipe_animation");
      swipeAnimations.innerHTML = `
        @keyframes swipeOutRight, swipeOutLeft {
          0% { transform: translateX(0px); opacity: 1; }
        }
        @keyframes swipeOutRight {
          100% { transform: translateX(${screen.width / 1.5}px); opacity: 0; }
        }
        @keyframes swipeOutLeft {
          100% { transform: translateX(-${screen.width / 1.5}px); opacity: 0; }
        }
        @keyframes swipeInRight, swipeInLeft {
          100% { transform: translateX(0px); opacity: 1; }
        }
        @keyframes swipeInRight {
          0% { transform: translateX(${screen.width / 1.5}px); opacity: 0; }
        }
        @keyframes swipeInLeft {
          0% { transform: translateX(-${screen.width / 1.5}px); opacity: 0; }
        }
        @keyframes fadeOut {
          0% { opacity: 1; }
          100% { opacity: 0; }
        }
        @keyframes fadeIn {
          0% { opacity: 0; }
          100% { opacity: 1; }
        }
        @keyframes flipOut {
          0% { transform: rotatey(0deg); opacity: 1; }
          100% { transform: rotatey(90deg); opacity: 0; }
        }
        @keyframes flipIn{
          0% { transform: rotatey(90deg); opacity: 0; }
          100% { transform: rotatey(0deg); opacity: 1; }
        }
        .swipeOutRight { animation: swipeOutRight .20s 1; }
        .swipeOutLeft { animation: swipeOutLeft .20s 1; }
        .swipeInRight { animation: swipeInRight .20s 1; }
        .swipeInLeft { animation: swipeInLeft .20s 1; }
        .fadeIn { animation: fadeIn .20s 1; }
        .fadeOut { animation: fadeOut .20s 1; }
        .flipIn { animation: flipIn .20s 1; }
        .flipOut { animation: flipOut .20s 1; }
        .swipeOutRight,
        .swipeOutLeft,
        .swipeInRight,
        .swipeInLeft,
        .fadeIn,
        .fadeOut,
        .flipIn,
        .flipOut {
          animation-fill-mode: forwards;
        }
    `;
      this.view.parentNode.appendChild(swipeAnimations);
    }

    function handleTouchStart(event) {
      filterTabs(this.cchConfig);
      if (swipe_groups && !inGroup) return;
      let ignored = [
        "APP-HEADER",
        "HA-SLIDER",
        "SWIPE-CARD",
        "HUI-MAP-CARD",
        "ROUND-SLIDER",
        "HUI-THERMOSTAT-CARD"
      ];
      let path = (event.composedPath && event.composedPath()) || event.path;
      if (path) {
        for (let element of path) {
          if (element.nodeName == "HUI-VIEW") break;
          else if (ignored.includes(element.nodeName)) return;
        }
      }
      xDown = event.touches[0].clientX;
      yDown = event.touches[0].clientY;
    }

    function handleTouchMove(event) {
      if (xDown && yDown) {
        xDiff = xDown - event.touches[0].clientX;
        yDiff = yDown - event.touches[0].clientY;
        if (Math.abs(xDiff) > Math.abs(yDiff) && prevent_default) {
          event.preventDefault();
        }
      }
    }

    function handleTouchEnd() {
      if (activeTab < 0 || Math.abs(xDiff) < Math.abs(yDiff)) {
        xDown = yDown = xDiff = yDiff = null;
        return;
      }
      if (xDiff > Math.abs(screen.width * swipe_amount)) {
        left = false;
        if (!wrap && fTabs[activeTab] == lastTab) return;
        else if (fTabs[activeTab] == lastTab && wrap) click(firstTab);
        else click(fTabs[activeTab + 1]);
      } else if (xDiff < -Math.abs(screen.width * swipe_amount)) {
        left = true;
        if (!wrap && fTabs[activeTab] == firstTab) return;
        else if (fTabs[activeTab] == firstTab && wrap) click(lastTab);
        else click(fTabs[activeTab - 1]);
      }
      xDown = yDown = xDiff = yDiff = null;
    }

    function filterTabs(config) {
      let currentTab = tabs.indexOf(
        tabContainer.querySelector(".iron-selected")
      );
      if (swipe_groups) {
        let groups = swipe_groups.replace(/, /g, ",").split(",");
        for (let group in groups) {
          let firstLast = groups[group].replace(/ /g, "").split("to");
          if (
            wrap &&
            currentTab >= firstLast[0] &&
            currentTab <= firstLast[1]
          ) {
            inGroup = true;
            firstTab = tabs[parseInt(firstLast[0])];
            lastTab = tabs[parseInt(firstLast[1])];
            fTabs = tabs.filter(
              element =>
                tabs.indexOf(element) >= firstLast[0] &&
                tabs.indexOf(element) <= firstLast[1]
            );
            break;
          } else {
            inGroup = false;
          }
        }
      }
      if (config.swipe_skip_hidden) {
        fTabs = tabs.filter(
          element =>
            !skip_tabs.includes(tabs.indexOf(element)) &&
            getComputedStyle(element, null).display != "none"
        );
      } else {
        fTabs = tabs.filter(
          element => !skip_tabs.includes(tabs.indexOf(element))
        );
      }
      if (!swipe_groups) {
        firstTab = fTabs[0];
        lastTab = fTabs[fTabs.length - 1];
      }
      activeTab = fTabs.indexOf(tabContainer.querySelector(".iron-selected"));
    }

    function animation(secs, transform, opacity, timeout) {
      setTimeout(() => {
        this.view.style.transition = `transform ${secs}s, opacity ${secs}s`;
        this.view.style.transform = transform ? transform : "";
        this.view.style.opacity = opacity;
      }, timeout);
    }

    function clearClassNames(huiView) {
      [
        "swipeOutRight",
        "swipeOutLeft",
        "swipeInRight",
        "swipeInLeft",
        "fadeIn",
        "fadeOut",
        "flipIn",
        "flipOut"
      ].forEach(name => {
        if (huiView.classList.contains(name)) {
          huiView.classList.remove(name);
        }
        if (this.view.classList.contains(name)) {
          this.view.classList.remove(name);
        }
      });
      huiView.style.overflowX = "";
      this.view.style.overflowX = "";
    }

    function navigate(tab, timeout) {
      setTimeout(() => {
        tab.dispatchEvent(
          new MouseEvent("click", { bubbles: false, cancelable: true })
        );
      }, timeout);
    }

    function click(tab) {
      if (
        !tab ||
        this.animation_running ||
        (tab.style.display == "none" && this.cchConfig.swipe_skip_hidden)
      ) {
        return;
      }
      if (animate)
        if (
          !wrap &&
          ((activeTab == firstTab && left) || (activeTab == lastTab && !left))
        ) {
          return;
        } else if (animate == "swipe") {
          const getHuiView = () => {
            return (
              this.view.querySelector("hui-view") ||
              this.view.querySelector("hui-panel-view")
            );
          };
          this.animation_running = true;
          let huiView = getHuiView();
          clearClassNames(huiView);
          huiView.style.overflowX = "hidden";
          this.view.style.overflowX = "hidden";
          // Swipe view off screen and fade out.
          huiView.classList.add(left ? "swipeOutRight" : "swipeOutLeft");
          this.view.classList.add("fadeOut");
          setTimeout(() => {
            this.view.style.opacity = "0";
            clearClassNames(huiView);
          }, 210);
          // Watch for destination view to load.
          const observer = new MutationObserver(mutations => {
            mutations.forEach(({ addedNodes }) => {
              addedNodes.forEach(({ nodeName }) => {
                if (nodeName) {
                  // Swipe view on screen and fade in.
                  huiView = getHuiView();
                  huiView.style.overflowX = "hidden";
                  this.view.style.overflowX = "hidden";
                  this.view.classList.add("fadeIn");
                  huiView.classList.add(left ? "swipeInLeft" : "swipeInRight");
                  setTimeout(() => {
                    this.view.style.opacity = "1";
                    clearClassNames(huiView);
                  }, 210);
                  observer.disconnect();
                  return;
                }
              });
            });
          });
          observer.observe(this.view, { childList: true });
          // Navigate to next view and trigger the observer.
          navigate(tab, 220);
        } else if (animate == "fade") {
          animation(0.16, "", 0, 0);
          const observer = new MutationObserver(mutations => {
            mutations.forEach(({ addedNodes }) => {
              addedNodes.forEach(({ nodeName }) => {
                if (nodeName == "HUI-VIEW" || nodeName == "HUI-PANEL-VIEW") {
                  animation(0.16, "", 1, 0);
                  observer.disconnect();
                }
              });
            });
          });
          observer.observe(this.view, { childList: true });
          navigate(tab, 170);
        } else if (animate == "flip") {
          animation(0.25, "rotatey(90deg)", 0.25, 0);
          const observer = new MutationObserver(mutations => {
            mutations.forEach(({ addedNodes }) => {
              addedNodes.forEach(({ nodeName }) => {
                if (nodeName == "HUI-VIEW" || nodeName == "HUI-PANEL-VIEW") {
                  animation(0.25, "rotatey(0deg)", 1, 50);
                  observer.disconnect();
                }
              });
            });
          });
          observer.observe(this.view, { childList: true });
          navigate(tab, 270);
        } else {
          navigate(tab, 0);
        }
      this.animation_running = false;
    }
  }

  breakingChangeNotification() {
    if (
      this.lovelace.config.cch == undefined &&
      JSON.stringify(this.lovelace.config.views).includes(
        "custom:compact-custom-header"
      )
    ) {
      this.hass.callService("persistent_notification", "create", {
        title: "CCH Breaking Change",
        notification_id: "CCH_Breaking_Change",
        message:
          "Compact-Custom-Header's configuration method has changed. You are " +
          "receiving this notification because you have updated CCH, but are " +
          "using the old config method. Please, visit the [upgrade guide]" +
          "(https://maykar.github.io/compact-custom-header/1_1_0_upgrade/) " +
          "for more info."
      });
    }
  }
}

const cch = new CompactCustomHeader();
cch.run();

class CompactCustomHeaderEditor extends cch.LitElement {
  static get properties() {
    return { _config: {} };
  }

  firstUpdated() {
    this.html = cch.LitElement.prototype.html;
    if (
      !customElements.get("paper-toggle-button") &&
      customElements.get("ha-switch")
    ) {
      customElements.define(
        "paper-toggle-button",
        class extends customElements.get("ha-switch") {}
      );
    }

    let ll = document.querySelector("home-assistant");
    ll = ll && ll.shadowRoot;
    ll = ll && ll.querySelector("home-assistant-main");
    ll = ll && ll.shadowRoot;
    ll = ll && ll.querySelector("app-drawer-layout partial-panel-resolver");
    ll = (ll && ll.shadowRoot) || ll;
    ll = ll && ll.querySelector("ha-panel-lovelace");
    ll = ll && ll.shadowRoot;
    this._lovelace = ll && ll.querySelector("hui-root").lovelace;

    this.deepcopy = this.deepcopy.bind(this);
    this._config = this._lovelace.config.cch
      ? this.deepcopy(this._lovelace.config.cch)
      : {};
  }

  render() {
    if (!this._config || !this._lovelace) return this.html``;
    return this.html`
      <div @click="${this._close}" class="title_control">
        X
      </div>
      ${this.renderStyle()}
      <cch-config-editor
        .defaultConfig="${cch.defaultConfig}"
        .config="${this._config}"
        @cch-config-changed="${this._configChanged}"
      >
      </cch-config-editor>
      <h4 class="underline">Exceptions</h4>
      <br />
      ${
        this._config.exceptions
          ? this._config.exceptions.map(
              (exception, index) => this.html`
              <cch-exception-editor
                .config="${this._config}"
                .exception="${exception}"
                .index="${index}"
                @cch-exception-changed="${this._exceptionChanged}"
                @cch-exception-delete="${this._exceptionDelete}"
              >
              </cch-exception-editor>
            `
            )
          : ""
      }
      <br />
      ${
        this._mwc_button
          ? this.html`
            <mwc-button @click="${this._addException}"
              >Add Exception
            </mwc-button>
          `
          : this.html`
            <paper-button @click="${this._addException}"
              >Add Exception
            </paper-button>
          `
      }

      <h4 class="underline">Current User</h4>
      <p style="font-size:16pt">${cch.hass.user.name}</p>
      <h4 class="underline">Current User Agent</h4>
      <br />
      ${navigator.userAgent}
      <br />
      <h4
        style="background:var(--paper-card-background-color);
        margin-bottom:-20px;"
        class="underline"
      >
        ${
          !this.exception
            ? this.html`
              ${this._save_button}
            `
            : ""
        }
        ${
          !this.exception
            ? this.html`
              ${this._cancel_button}
            `
            : ""
        }
      </h4>
    `;
  }

  get _mwc_button() {
    return customElements.get("mwc-button") ? true : false;
  }

  _close() {
    let editor = this.parentNode.parentNode.parentNode.querySelector("editor");
    this.parentNode.parentNode.parentNode.removeChild(editor);
  }

  _save() {
    for (const key in this._config) {
      if (this._config[key] == cch.defaultConfig[key]) delete this._config[key];
      // Remove old config option.
      if (typeof this._config.background == "boolean") {
        this._config.background = "";
      }
    }
    let newConfig = { ...this._lovelace.config, ...{ cch: this._config } };
    if (cch.lovelace.mode == "storage") {
      try {
        this._lovelace.saveConfig(newConfig).then(() => {
          window.location.href = window.location.href;
        });
      } catch (e) {
        alert(`Save failed: ${e}`);
      }
    } else {
      window.prompt(
        "Copy to clipboard: Ctrl+C, Enter\n" +
          "This option is experimental, check the copied config and backup.",
        this.obj2yaml({ cch: newConfig.cch })
      );
    }
  }

  get _save_button() {
    let text = cch.lovelace.mode == "storage" ? "Save and Reload" : "Copy YAML";
    return this._mwc_button
      ? this.html`
          <mwc-button raised @click="${this._save}">${text}</mwc-button>
        `
      : this.html`
          <paper-button raised @click="${this._save}"
            >${text}</paper-button
          >
        `;
  }
  get _cancel_button() {
    return this._mwc_button
      ? this.html`
          <mwc-button raised @click="${this._close}">Cancel</mwc-button>
        `
      : this.html`
          <paper-button raised @click="${this._close}">Cancel</paper-button>
        `;
  }

  _addException() {
    let newExceptions;
    if (this._config.exceptions) {
      newExceptions = this._config.exceptions.slice(0);
      newExceptions.push({ conditions: {}, config: {} });
    } else {
      newExceptions = [{ conditions: {}, config: {} }];
    }
    this._config = { ...this._config, exceptions: newExceptions };

    cch.fireEvent(this, "config-changed", { config: this._config });
  }

  _configChanged({ detail }) {
    if (!this._config) return;
    this._config = { ...this._config, ...detail.config };
    cch.fireEvent(this, "config-changed", { config: this._config });
  }

  _exceptionChanged(ev) {
    if (!this._config) return;
    const target = ev.target.index;
    const newExceptions = this._config.exceptions.slice(0);
    newExceptions[target] = ev.detail.exception;
    this._config = { ...this._config, exceptions: newExceptions };

    cch.fireEvent(this, "config-changed", { config: this._config });
  }

  _exceptionDelete(ev) {
    if (!this._config) return;
    const target = ev.target;
    const newExceptions = this._config.exceptions.slice(0);
    newExceptions.splice(target.index, 1);
    this._config = { ...this._config, exceptions: newExceptions };

    cch.fireEvent(this, "config-changed", { config: this._config });
    this.requestUpdate();
  }

  deepcopy(value) {
    if (!(!!value && typeof value == "object")) return value;
    if (Object.prototype.toString.call(value) == "[object Date]") {
      return new Date(value.getTime());
    }
    if (Array.isArray(value)) return value.map(this.deepcopy);
    const result = {};
    Object.keys(value).forEach(key => {
      result[key] = this.deepcopy(value[key]);
    });
    return result;
  }

  obj2yaml(obj) {
    if (typeof obj == "string") obj = JSON.parse(obj);
    const ret = [];
    convert(obj, ret);
    return ret.join("\n");
    function getType(obj) {
      if (obj instanceof Array) {
        return "array";
      } else if (typeof obj == "string") {
        return "string";
      } else if (typeof obj == "boolean") {
        return "boolean";
      } else if (typeof obj == "number") {
        return "number";
      } else if (typeof obj == "undefined" || obj === null) {
        return "null";
      } else {
        return "hash";
      }
    }
    function convert(obj, ret) {
      const type = getType(obj);
      switch (getType(obj)) {
        case "array":
          convertArray(obj, ret);
          break;
        case "hash":
          convertHash(obj, ret);
          break;
        case "string":
          convertString(obj, ret);
          break;
        case "null":
          ret.push("null");
          break;
        case "number":
          ret.push(obj.toString());
          break;
        case "boolean":
          ret.push(obj ? "true" : "false");
          break;
      }
    }
    function convertArray(obj, ret) {
      if (obj.length === 0) ret.push("[]");
      for (let i = 0; i < obj.length; i++) {
        const ele = obj[i];
        const recurse = [];
        convert(ele, recurse);
        for (let j = 0; j < recurse.length; j++) {
          ret.push((j == 0 ? "- " : "  ") + recurse[j]);
        }
      }
    }
    function convertHash(obj, ret) {
      for (const k in obj) {
        const recurse = [];
        if (obj.hasOwnProperty(k)) {
          const ele = obj[k];
          convert(ele, recurse);
          const type = getType(ele);
          if (
            type == "string" ||
            type == "null" ||
            type == "number" ||
            type == "boolean"
          ) {
            ret.push(`${k}: ${recurse[0]}`);
          } else {
            ret.push(`${k}: `);
            for (let i = 0; i < recurse.length; i++) {
              ret.push(`  ${recurse[i]}`);
            }
          }
        }
      }
    }
    function convertString(obj, ret) {
      if ((obj.includes("'") && obj.includes('"')) || obj.length > 45) {
        if (obj.includes(";")) {
          obj = obj.includes("; ") ? obj.split("; ") : obj.split(";");
          obj[0] = `>\n            ${obj[0]}`;
          if (obj[obj.length - 1].trim() == "") obj.pop();
          obj = obj.join(";\n            ");
          obj = obj.replace(/\n$/, "");
          ret.push(obj);
        } else {
          ret.push(`>\n            ${obj}`);
        }
      } else if (obj.includes('"')) {
        obj = obj.replace(/\n$/, "");
        ret.push(`'${obj}'`);
      } else {
        obj = obj.replace(/\n$/, "");
        ret.push(`"${obj}"`);
      }
    }
  }

  renderStyle() {
    return this.html`
      <style>
        h3,
        h4 {
          font-size: 16pt;
          margin-bottom: 5px;
          width: 100%;
        }
        paper-button {
          margin: 0;
          background-color: var(--primary-color);
          color: var(--text-primary-color, #fff);
        }
        .toggle-button {
          margin: 4px;
          background-color: transparent;
          color: var(--primary-color);
        }
        .title_control {
          color: var(--text-dark-color);
          font-weight: bold;
          font-size: 22px;
          float: right;
          cursor: pointer;
          margin: -10px -5px -5px -5px;
        }
        .user_agent {
          display: block;
          margin-left: auto;
          margin-right: auto;
          padding: 5px;
          border: 0;
          resize: none;
          width: 100%;
        }
        .underline {
          width: 100%;
          background: var(--dark-color);
          color: var(--text-dark-color);
          padding: 5px;
          width: calc(100% + 30px);
          margin-left: calc(0% - 20px);
        }
      </style>
    `;
  }
}

customElements.define(
  "compact-custom-header-editor",
  CompactCustomHeaderEditor
);

class CchConfigEditor extends cch.LitElement {
  static get properties() {
    return {
      defaultConfig: {},
      config: {},
      exception: {},
      _closed: {}
    };
  }

  constructor() {
    super();
    this.buttonOptions = ["show", "hide", "clock", "overflow"];
    this.overflowOptions = ["show", "hide", "clock"];
    this.swipeAnimation = ["none", "swipe", "fade", "flip"];
  }

  get _clock() {
    return (
      this.getConfig("menu") == "clock" ||
      this.getConfig("voice") == "clock" ||
      this.getConfig("notifications") == "clock" ||
      this.getConfig("options") == "clock"
    );
  }

  getConfig(item) {
    return this.config[item] !== undefined
      ? this.config[item]
      : cch.defaultConfig[item];
  }

  render() {
    this.exception = this.exception !== undefined && this.exception !== false;
    return this.html`
      <custom-style>
        <style is="custom-style">
          a {
            color: var(--text-dark-color);
            text-decoration: none;
          }
          .card-header {
            margin-top: -5px;
            @apply --paper-font-headline;
          }
          .card-header paper-icon-button {
            margin-top: -5px;
            float: right;
          }
        </style>
      </custom-style>
      ${
        !this.exception
          ? this.html`
            <h1 style="margin-top:-20px;margin-bottom:0;" class="underline">
              Compact Custom Header &nbsp;₁.₄.₉
            </h1>
            <h4
              style="margin-top:-5px;padding-top:10px;font-size:12pt;"
              class="underline"
            >
              <a
                href="https://maykar.github.io/compact-custom-header/"
                target="_blank"
              >
                <ha-icon icon="mdi:help-circle" style="margin-top:-5px;">
                </ha-icon>
                Docs&nbsp;&nbsp;&nbsp;</a
              >
              <a
                href="https://github.com/maykar/compact-custom-header"
                target="_blank"
              >
                <ha-icon icon="mdi:github-circle" style="margin-top:-5px;">
                </ha-icon>
                Github&nbsp;&nbsp;&nbsp;</a
              >
              <a
                href="https://community.home-assistant.io/t/compact-custom-header"
                target="_blank"
              >
                <ha-icon icon="hass:home-assistant" style="margin-top:-5px;">
                </ha-icon>
                Forums</a
              >
            </h4>
            ${
              this.getConfig("warning")
                ? this.html`
                  <br />
                  <div class="warning">
                    Modifying options marked with a
                    <iron-icon
                      icon="hass:alert"
                      style="width:20px;margin-top:-6px;"
                    ></iron-icon
                    >or hiding the options button will remove your ability to
                    edit from the UI. You can disable CCH by adding
                    "?disable_cch" to the end of your URL to temporarily restore
                    the default header.
                  </div>
                  <br />
                `
                : ""
            }
          `
          : ""
      }
      ${this.renderStyle()}
      <div class="side-by-side">
        <paper-toggle-button
          class="${
            this.exception && this.config.disable === undefined
              ? "inherited"
              : ""
          }"
          ?checked="${this.getConfig("disable") !== false}"
          .configValue="${"disable"}"
          @change="${this._valueChanged}"
          title="Completely disable CCH. Useful for exceptions."
        >
          Disable CCH
        </paper-toggle-button>
        <paper-toggle-button
          class="${
            this.exception && this.config.compact_header === undefined
              ? "inherited"
              : ""
          }"
          ?checked="${this.getConfig("compact_header") !== false}"
          .configValue="${"compact_header"}"
          @change="${this._valueChanged}"
          title="Make header compact."
        >
          Compact Header
        </paper-toggle-button>
        <paper-toggle-button
          class="${
            this.exception && this.config.kiosk_mode === undefined
              ? "inherited"
              : ""
          }"
          ?checked="${this.getConfig("kiosk_mode") !== false}"
          .configValue="${"kiosk_mode"}"
          @change="${this._valueChanged}"
          title="Hide the header, close the sidebar, and disable sidebar swipe."
        >
          Kiosk Mode
          ${
            this.getConfig("warning")
              ? this.html`
                <iron-icon icon="hass:alert" class="alert"></iron-icon>
              `
              : ""
          }
        </paper-toggle-button>
        <paper-toggle-button
          class="${
            this.exception && this.config.header === undefined
              ? "inherited"
              : ""
          }"
          ?checked="${this.getConfig("header") !== false &&
            this.getConfig("kiosk_mode") == false}"
          .configValue="${"header"}"
          @change="${this._valueChanged}"
          title="Turn off to hide the header completely."
        >
          Display Header
          ${
            this.getConfig("warning")
              ? this.html`
                <iron-icon icon="hass:alert" class="alert"></iron-icon>
              `
              : ""
          }
        </paper-toggle-button>
        <paper-toggle-button
          class="${
            this.exception && this.config.chevrons === undefined
              ? "inherited"
              : ""
          }"
          ?checked="${this.getConfig("chevrons") !== false}"
          .configValue="${"chevrons"}"
          @change="${this._valueChanged}"
          title="View scrolling controls in header."
        >
          Display Tab Chevrons
        </paper-toggle-button>
        <paper-toggle-button
          class="${
            this.exception && this.config.redirect === undefined
              ? "inherited"
              : ""
          }"
          ?checked="${this.getConfig("redirect") !== false}"
          .configValue="${"redirect"}"
          @change="${this._valueChanged}"
          title="Auto-redirect away from hidden tabs."
        >
          Hidden Tab Redirect
        </paper-toggle-button>
        <paper-toggle-button
          style="${cch.newSidebar ? "" : "display:none;"}"
          class="${
            this.exception && this.config.disable_sidebar === undefined
              ? "inherited"
              : ""
          }"
          ?checked="${this.getConfig("disable_sidebar") !== false ||
            this.getConfig("kiosk_mode") !== false}"
          .configValue="${"disable_sidebar"}"
          @change="${this._valueChanged}"
          title="Hides and prevents sidebar from opening."
        >
          Hide & Disable Sidebar
        </paper-toggle-button>
        <paper-toggle-button
          style="${cch.newSidebar ? "display:none;" : ""}"
          class="${
            this.exception && this.config.sidebar_closed === undefined
              ? "inherited"
              : ""
          }"
          ?checked="${this.getConfig("sidebar_closed") !== false ||
            this.getConfig("kiosk_mode") !== false}"
          .configValue="${"sidebar_closed"}"
          @change="${this._valueChanged}"
          title="Closes the sidebar on page load."
        >
          Close Sidebar
        </paper-toggle-button>
        ${
          !this.exception
            ? this.html`
              <paper-toggle-button
                class="${
                  this.exception && this.config.warning === undefined
                    ? "inherited"
                    : ""
                }"
                ?checked="${this.getConfig("warning") !== false}"
                .configValue="${"warning"}"
                @change="${this._valueChanged}"
                title="Toggle warnings in this editor."
              >
                Display CCH Warnings
              </paper-toggle-button>
            `
            : ""
        }
        <paper-toggle-button
          style="${cch.newSidebar ? "display:none;" : ""}"
          class="${
            this.exception && this.config.sidebar_swipe === undefined
              ? "inherited"
              : ""
          }"
          ?checked="${this.getConfig("sidebar_swipe") !== false &&
            this.getConfig("kiosk_mode") == false}"
          .configValue="${"sidebar_swipe"}"
          @change="${this._valueChanged}"
          title="Swipe to open sidebar on mobile devices."
        >
          Swipe Open Sidebar
        </paper-toggle-button>
      </div>
      <h4 class="underline">Menu Items</h4>
      <div class="side-by-side">
        <paper-toggle-button
          class="${
            this.exception && this.config.hide_config === undefined
              ? "inherited"
              : ""
          }"
          ?checked="${this.getConfig("hide_config") !== false}"
          .configValue="${"hide_config"}"
          @change="${this._valueChanged}"
          title='Hide "Configure UI" in options menu.'
        >
          Hide "Configure UI"
          ${
            this.getConfig("warning")
              ? this.html`
                <iron-icon icon="hass:alert" class="alert"></iron-icon>
              `
              : ""
          }
        </paper-toggle-button>
        <paper-toggle-button
          class="${
            this.exception && this.config.hide_help === undefined
              ? "inherited"
              : ""
          }"
          ?checked="${this.getConfig("hide_help") !== false}"
          .configValue="${"hide_help"}"
          @change="${this._valueChanged}"
          title='Hide "Help" in options menu.'
        >
          Hide "Help"
        </paper-toggle-button>
        <paper-toggle-button
          class="${
            this.exception && this.config.hide_unused === undefined
              ? "inherited"
              : ""
          }"
          ?checked="${this.getConfig("hide_unused") !== false}"
          .configValue="${"hide_unused"}"
          @change="${this._valueChanged}"
          title='Hide "Help" in options menu.'
        >
          Hide "Unused Entities"
        </paper-toggle-button>
      </div>
      <h4 class="underline">Buttons</h4>
      <div class="buttons side-by-side">
        <div
          class="${
            this.exception && this.config.menu === undefined ? "inherited" : ""
          }"
        >
          <iron-icon icon="hass:menu"></iron-icon>
          <paper-dropdown-menu
            @value-changed="${this._valueChanged}"
            label="Menu Button:"
            .configValue="${"menu"}"
          >
            <paper-listbox
              slot="dropdown-content"
              .selected="${this.buttonOptions.indexOf(this.getConfig("menu"))}"
            >
              ${this.buttonOptions.map(
                option => this.html`
                  <paper-item>${option}</paper-item>
                `
              )}
            </paper-listbox>
          </paper-dropdown-menu>
        </div>
        <div
          class="${
            this.exception && this.config.voice === undefined ? "inherited" : ""
          }"
        >
          <iron-icon icon="hass:microphone"></iron-icon>
          <paper-dropdown-menu
            @value-changed="${this._valueChanged}"
            label="Voice Button:"
            .configValue="${"voice"}"
          >
            <paper-listbox
              slot="dropdown-content"
              .selected="${this.buttonOptions.indexOf(this.getConfig("voice"))}"
            >
              ${this.buttonOptions.map(
                option => this.html`
                  <paper-item>${option}</paper-item>
                `
              )}
            </paper-listbox>
          </paper-dropdown-menu>
        </div>
      </div>
      <div
        class="buttons side-by-side"
        style="${cch.newSidebar ? "width:50%;" : ""}"
      >
        <div
          class="${
            this.exception && this.config.options === undefined
              ? "inherited"
              : ""
          }"
        >
          <iron-icon icon="hass:dots-vertical"></iron-icon>
          <paper-dropdown-menu
            @value-changed="${this._valueChanged}"
            label="Options Button:"
            .configValue="${"options"}"
          >
            <paper-listbox
              slot="dropdown-content"
              .selected="${this.overflowOptions.indexOf(
                this.getConfig("options")
              )}"
            >
              ${this.overflowOptions.map(
                option => this.html`
                  <paper-item>${option}</paper-item>
                `
              )}
            </paper-listbox>
          </paper-dropdown-menu>
        </div>
        <div
          style="${cch.newSidebar ? "display:none;" : ""}"
          class="${
            this.exception && this.config.notifications === undefined
              ? "inherited"
              : ""
          }"
        >
          <iron-icon icon="hass:bell"></iron-icon>
          <paper-dropdown-menu
            @value-changed="${this._valueChanged}"
            label="Notifications Button:"
            .configValue="${"notifications"}"
          >
            <paper-listbox
              slot="dropdown-content"
              .selected="${this.buttonOptions.indexOf(
                this.getConfig("notifications")
              )}"
            >
              ${this.buttonOptions.map(
                option => this.html`
                  <paper-item>${option}</paper-item>
                `
              )}
            </paper-listbox>
          </paper-dropdown-menu>
        </div>
      </div>
      ${
        this._clock
          ? this.html`
            <h4 class="underline">Clock Options</h4>
            <div class="side-by-side">
              <paper-dropdown-menu
                class="${
                  this.exception && this.getConfig("clock_format") === undefined
                    ? "inherited"
                    : ""
                }"
                label="Clock format"
                @value-changed="${this._valueChanged}"
                .configValue="${"clock_format"}"
              >
                <paper-listbox
                  slot="dropdown-content"
                  .selected="${this.getConfig("clock_format") === "24" ? 1 : 0}"
                >
                  <paper-item>12</paper-item>
                  <paper-item>24</paper-item>
                </paper-listbox>
              </paper-dropdown-menu>
              <paper-input
                class="${
                  this.exception && this.config.date_locale === undefined
                    ? "inherited"
                    : ""
                }"
                label="Date Locale:"
                .value="${this.getConfig("date_locale")}"
                .configValue="${"date_locale"}"
                @value-changed="${this._valueChanged}"
              >
              </paper-input>

              <div class="side-by-side">
                <paper-toggle-button
                  class="${
                    this.exception && this.config.clock_am_pm === undefined
                      ? "inherited"
                      : ""
                  }"
                  ?checked="${this.getConfig("clock_am_pm") !== false}"
                  .configValue="${"clock_am_pm"}"
                  @change="${this._valueChanged}"
                >
                  AM / PM</paper-toggle-button
                >
                <paper-toggle-button
                  class="${
                    this.exception && this.config.clock_date === undefined
                      ? "inherited"
                      : ""
                  }"
                  ?checked="${this.getConfig("clock_date") !== false}"
                  .configValue="${"clock_date"}"
                  @change="${this._valueChanged}"
                >
                  Date</paper-toggle-button
                >
              </div>
            </div>
          `
          : ""
      }
      <h4 class="underline">Tabs</h4>
      <paper-dropdown-menu id="tabs" @value-changed="${this._tabVisibility}">
        <paper-listbox
          slot="dropdown-content"
          .selected="${this.getConfig("show_tabs").length > 0 ? "1" : "0"}"
        >
          <paper-item>Hide Tabs</paper-item>
          <paper-item>Show Tabs</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>
      <div class="side-by-side">
        <div
          id="show"
          style="display:${
            this.getConfig("show_tabs").length > 0 ? "initial" : "none"
          }"
        >
          <paper-input
            class="${
              this.exception && this.config.show_tabs === undefined
                ? "inherited"
                : ""
            }"
            label="Comma-separated list of tab numbers to show:"
            .value="${this.getConfig("show_tabs")}"
            .configValue="${"show_tabs"}"
            @value-changed="${this._valueChanged}"
          >
          </paper-input>
        </div>
        <div
          id="hide"
          style="display:${
            this.getConfig("show_tabs").length > 0 ? "none" : "initial"
          }"
        >
          <paper-input
            class="${
              this.exception && this.config.hide_tabs === undefined
                ? "inherited"
                : ""
            }"
            label="Comma-separated list of tab numbers to hide:"
            .value="${this.getConfig("hide_tabs")}"
            .configValue="${"hide_tabs"}"
            @value-changed="${this._valueChanged}"
          >
          </paper-input>
        </div>
        <paper-input
          class="${
            this.exception && this.config.default_tab === undefined
              ? "inherited"
              : ""
          }"
          label="Default tab:"
          .value="${this.getConfig("default_tab")}"
          .configValue="${"default_tab"}"
          @value-changed="${this._valueChanged}"
        >
        </paper-input>
      </div>
      <h4 class="underline">Swipe Navigation</h4>
      <div class="side-by-side">
        <paper-toggle-button
          class="${
            this.exception && this.config.swipe === undefined ? "inherited" : ""
          }"
          ?checked="${this.getConfig("swipe") !== false}"
          .configValue="${"swipe"}"
          @change="${this._valueChanged}"
          title="Toggle Swipe Navigation"
        >
          Swipe Navigation
        </paper-toggle-button>
        ${
          this.config.swipe
            ? this.html`
          <paper-toggle-button
            class="${
              this.exception && this.config.swipe_wrap === undefined
                ? "inherited"
                : ""
            }"
            ?checked="${this.getConfig("swipe_wrap") !== false}"
            .configValue="${"swipe_wrap"}"
            @change="${this._valueChanged}"
            title="Wrap from first to last tab and vice versa."
          >
            Wrapping
          </paper-toggle-button>
          <paper-toggle-button
            class="${
              this.exception && this.config.swipe_prevent_default === undefined
                ? "inherited"
                : ""
            }"
            ?checked="${this.getConfig("swipe_prevent_default") !== false}"
            .configValue="${"swipe_prevent_default"}"
            @change="${this._valueChanged}"
            title="Prevent browsers default horizontal swipe action."
          >
            Prevent Default
          </paper-toggle-button>
          <div
          class="${
            this.exception && this.config.swipe_animate === undefined
              ? "inherited"
              : ""
          }"
        >
        </div>
        <div class="side-by-side">
          <paper-dropdown-menu
            @value-changed="${this._valueChanged}"
            label="Swipe Animation:"
            .configValue="${"swipe_animate"}"
          >
            <paper-listbox
              slot="dropdown-content"
              .selected="${this.swipeAnimation.indexOf(
                this.getConfig("swipe_animate")
              )}"
            >
              ${this.swipeAnimation.map(
                option => this.html`
                  <paper-item>${option}</paper-item>
                `
              )}
            </paper-listbox>
          </paper-dropdown-menu>
        </div>
        <paper-input
        class="${
          this.exception && this.config.swipe_amount === undefined
            ? "inherited"
            : ""
        }"
        label="Percentage of screen width needed for swipe:"
        .value="${this.getConfig("swipe_amount")}"
        .configValue="${"swipe_amount"}"
        @value-changed="${this._valueChanged}"
      >
      </paper-input>
          </div>
          <paper-input
          class="${
            this.exception && this.config.swipe_skip === undefined
              ? "inherited"
              : ""
          }"
          label="Comma-separated list of tabs to skip over on swipe:"
          .value="${this.getConfig("swipe_skip")}"
          .configValue="${"swipe_skip"}"
          @value-changed="${this._valueChanged}"
        >
        </paper-input>
        </div>
      `
            : ""
        }
      </div>
    `;
  }

  _toggleCard() {
    this._closed = !this._closed;
    cch.fireEvent(this, "iron-resize");
  }

  _tabVisibility() {
    let show = this.shadowRoot.querySelector("#show");
    let hide = this.shadowRoot.querySelector("#hide");
    if (this.shadowRoot.querySelector("#tabs").value == "Hide Tabs") {
      show.style.display = "none";
      hide.style.display = "initial";
    } else {
      hide.style.display = "none";
      show.style.display = "initial";
    }
  }

  _valueChanged(ev) {
    if (!this.config) return;
    if (ev.target.configValue) {
      if (ev.target.value === "") {
        delete this.config[ev.target.configValue];
      } else {
        this.config = {
          ...this.config,
          [ev.target.configValue]:
            ev.target.checked !== undefined
              ? ev.target.checked
              : ev.target.value
        };
      }
    }
    cch.fireEvent(this, "cch-config-changed", { config: this.config });
  }

  renderStyle() {
    return this.html`
      <style>
        h3,
        h4 {
          font-size: 16pt;
          margin-bottom: 5px;
          width: 100%;
        }
        paper-toggle-button {
          padding-top: 16px;
        }
        iron-icon {
          padding-right: 5px;
        }
        iron-input {
          max-width: 115px;
        }
        .inherited {
          opacity: 0.4;
        }
        .inherited:hover {
          opacity: 1;
        }
        .side-by-side {
          display: flex;
          flex-wrap: wrap;
        }
        .side-by-side > * {
          flex: 1;
          padding-right: 4px;
          flex-basis: 33%;
        }
        .buttons > div {
          display: flex;
          align-items: center;
        }
        .buttons > div paper-dropdown-menu {
          flex-grow: 1;
        }
        .buttons > div iron-icon {
          padding-right: 15px;
          padding-top: 20px;
          margin-left: -3px;
        }
        .buttons > div:nth-of-type(2n) iron-icon {
          padding-left: 20px;
        }
        .warning {
          background-color: #455a64;
          padding: 10px;
          color: #ffcd4c;
          border-radius: 5px;
        }
        .alert {
          color: #ffcd4c;
          width: 20px;
          margin-top: -6px;
        }
        [closed] {
          overflow: hidden;
          height: 52px;
        }
        paper-card {
          margin-top: 10px;
          width: 100%;
          transition: all 0.5s ease;
        }
        .underline {
          width: 100%;
          background: var(--dark-color);
          color: var(--text-dark-color);
          padding: 5px;
          width: calc(100% + 30px);
          margin-left: calc(0% - 20px);
        }
      </style>
    `;
  }
}

customElements.define("cch-config-editor", CchConfigEditor);

class CchExceptionEditor extends cch.LitElement {
  static get properties() {
    return { config: {}, exception: {}, _closed: {} };
  }

  constructor() {
    super();
    this._closed = true;
  }

  render() {
    if (!this.exception) {
      return this.html``;
    }
    return this.html`
      ${this.renderStyle()}
      <custom-style>
        <style is="custom-style">
          .card-header {
            margin-top: -5px;
            @apply --paper-font-headline;
          }
          .card-header paper-icon-button {
            margin-top: -5px;
            float: right;
          }
        </style>
      </custom-style>
      <paper-card ?closed=${this._closed}>
        <div class="card-content">
          <div class="card-header">
            ${Object.values(this.exception.conditions)
              .join(", ")
              .substring(0, 40) || "New Exception"}
            <paper-icon-button
              icon="${this._closed ? "mdi:chevron-down" : "mdi:chevron-up"}"
              @click="${this._toggleCard}"
            >
            </paper-icon-button>
            <paper-icon-button
              ?hidden=${this._closed}
              icon="mdi:delete"
              @click="${this._deleteException}"
            >
            </paper-icon-button>
          </div>
          <h4 class="underline">Conditions</h4>
          <cch-conditions-editor
            .conditions="${this.exception.conditions}"
            @cch-conditions-changed="${this._conditionsChanged}"
          >
          </cch-conditions-editor>
          <h4 class="underline">Config</h4>
          <cch-config-editor
            exception
            .defaultConfig="${{ ...cch.defaultConfig, ...this.config }}"
            .config="${this.exception.config}"
            @cch-config-changed="${this._configChanged}"
          >
          </cch-config-editor>
        </div>
      </paper-card>
    `;
  }

  renderStyle() {
    return this.html`
      <style>
        h3,
        h4 {
          font-size: 16pt;
          margin-bottom: 5px;
          width: 100%;
        }
        [closed] {
          overflow: hidden;
          height: 52px;
        }
        paper-card {
          margin-top: 10px;
          width: 100%;
          transition: all 0.5s ease;
        }
        .underline {
          width: 100%;
          background: var(--dark-color);
          color: var(--text-dark-color);
          padding: 5px;
          width: calc(100% + 30px);
          margin-left: calc(0% - 20px);
        }
      </style>
    `;
  }

  _toggleCard() {
    this._closed = !this._closed;
    cch.fireEvent(this, "iron-resize");
  }

  _deleteException() {
    cch.fireEvent(this, "cch-exception-delete");
  }

  _conditionsChanged({ detail }) {
    if (!this.exception) return;
    const newException = { ...this.exception, conditions: detail.conditions };
    cch.fireEvent(this, "cch-exception-changed", { exception: newException });
  }

  _configChanged(ev) {
    ev.stopPropagation();
    if (!this.exception) return;
    const newException = { ...this.exception, config: ev.detail.config };
    cch.fireEvent(this, "cch-exception-changed", { exception: newException });
  }
}

customElements.define("cch-exception-editor", CchExceptionEditor);

class CchConditionsEditor extends cch.LitElement {
  static get properties() {
    return { conditions: {} };
  }
  get _user() {
    return this.conditions.user || "";
  }
  get _user_agent() {
    return this.conditions.user_agent || "";
  }
  get _media_query() {
    return this.conditions.media_query || "";
  }
  get _query_string() {
    return this.conditions.query_string || "";
  }

  render() {
    if (!this.conditions) return this.html``;
    return this.html`
      <paper-input
        label="User (Seperate multiple users with a comma.)"
        .value="${this._user}"
        .configValue="${"user"}"
        @value-changed="${this._valueChanged}"
      >
      </paper-input>
      <paper-input
        label="User Agent"
        .value="${this._user_agent}"
        .configValue="${"user_agent"}"
        @value-changed="${this._valueChanged}"
      >
      </paper-input>
      <paper-input
        label="Media Query"
        .value="${this._media_query}"
        .configValue="${"media_query"}"
        @value-changed="${this._valueChanged}"
      >
      </paper-input>
      <paper-input
        label="Query String"
        .value="${this._query_string}"
        .configValue="${"query_string"}"
        @value-changed="${this._valueChanged}"
      >
      </paper-input>
    `;
  }

  _valueChanged(ev) {
    if (!this.conditions) return;
    const target = ev.target;
    if (this[`_${target.configValue}`] === target.value) return;
    if (target.configValue) {
      if (target.value === "") {
        delete this.conditions[target.configValue];
      } else {
        this.conditions = {
          ...this.conditions,
          [target.configValue]: target.value
        };
      }
    }
    cch.fireEvent(this, "cch-conditions-changed", {
      conditions: this.conditions
    });
  }
}

customElements.define("cch-conditions-editor", CchConditionsEditor);