<template>
  <form
    id="search-form"
    class="algolia-search-wrapper search-box"
  >
    <input
      id="algolia-search-input"
      class="search-query"
    >
  </form>
</template>

<script>
export default {
  props: ['options'],

  mounted () {
    this.initialize()
  },

  methods: {
    initialize () {
      Promise.all([
        import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
        import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
      ]).then(([docsearch]) => {
        docsearch = docsearch.default
        docsearch(Object.assign(this.options, {
          debug: true,
          inputSelector: '#algolia-search-input'
        }))
      })
    }
  },

  watch: {
    options (newValue) {
      this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
      this.initialize(newValue)
    }
  }
}
</script>

<style lang="less">
@import './styles/config.less';

.algolia-search-wrapper {
  & > span {
  }
    vertical-align: middle;
  .algolia-autocomplete {
    line-height: normal;
    .ds-dropdown-menu {
      background-color: var(--SdBgClr);
      border: 0.1em solid var(--SdBClr);
      border-radius: 0.3em;
      font-size: 1.2em;
      margin: 0.5em 0 0;
      padding: 0.3em;
      text-align: left;
      &:before {
        border-color: var(--SdBClr);
      }
      [class*=ds-dataset-] {
        border: none;
        padding: 0;
      }
      .ds-suggestions {
        margin-top: 0;
      }
      .ds-suggestion {
        border-bottom: 0.1em solid var(--SdBClr);
      }
    }
    .algolia-docsearch-suggestion--highlight {
      color: var(--SdAClr);
    }
    .algolia-docsearch-suggestion {
      border-color: var(--SdBClr);
      padding: 0;
      .algolia-docsearch-suggestion--category-header {
        padding: 0.5em 1em;
        margin-top: 0;
        background: var(--SdBgClr);
        color: var(--SdTClr);
        font-weight: 600;
        .algolia-docsearch-suggestion--highlight {
          background: var(--SdBgClr);
        }
      }
      .algolia-docsearch-suggestion--wrapper {
        padding: 0;
      }
      .algolia-docsearch-suggestion--title {
        font-weight: 600;
        margin-bottom: 0;
        color: var(--TClr);
      }
      .algolia-docsearch-suggestion--subcategory-column {
        vertical-align: top;
        padding: 0.2em 0.3em 0.2em 0.2em;
        border-color: var(--SdBClr);
        background: var(--sidebarBackgroundColor);
        &:after {
          display: none;
        }
      }
      .algolia-docsearch-suggestion--subcategory-column-text {
        color: var(--SdTClr);
      }
    }
    .algolia-docsearch-footer {
      border-color: var(--SdBClr);
    }
    .ds-cursor .algolia-docsearch-suggestion--content {
      background-color: var(--SdBgClr) !important;
      color: var(--SdTClr);
    }
  }
}

@media (min-width: @MQMobile) {
  .algolia-search-wrapper {
    .algolia-autocomplete {
      .algolia-docsearch-suggestion {
        .algolia-docsearch-suggestion--subcategory-column {
          float: none;
          width: 15em;
          min-width: 15em;
          display: table-cell;
        }
        .algolia-docsearch-suggestion--content {
          float: none;
          display: table-cell;
          width: 100%;
          vertical-align: top;
        }
        .ds-dropdown-menu {
          min-width: 51em !important;
        }
      }
    }
  }
}

@media (max-width: @MQMobile) {
  .algolia-search-wrapper {
    .ds-dropdown-menu {
      min-width: calc(100vw - 4rem) !important;
      max-width: calc(100vw - 4rem) !important;
    }
    .algolia-docsearch-suggestion--wrapper {
      padding: 0.2em 0.3em 0.2em 0.2em !important;
    }
    .algolia-docsearch-suggestion--subcategory-column {
      padding: 0 !important;
      background: white !important;
    }
    .algolia-docsearch-suggestion--subcategory-column-text:after {
      content: " > ";
      font-size: 1rem;
      line-height: 1.4rem;
      display: inline-block;
      width: 0.5em;
      margin: -0.2em 0.2em 0;
      vertical-align: middle;
    }
  }
}

</style>
