(function () {


function parse_query (q) {
  return (
    q
    .slice(1)
    .split('&')
    .map((part) => (
      part.split('=')
    ))
    .filter(x => x.length == 2)
    .reduce((obj, keyValue) => (Object.assign({}, obj, {
      [keyValue[0]]: decodeURIComponent(keyValue[1]),
    })), {})
  )
}

/*
 * State
 */


const state = {
  articles: [],
  passThru: null,
  is_sticky_filter_visible: false,
}


/*
 * DOM
 */

const filters_cont = document.createElement('div');
const sticky_filter_cont = document.createElement('div');
const loader_cont = document.createElement('div');
const articles_cont = document.createElement('div');
const curriculum_options_cont = document.createElement('div');
const resource_options_cont = document.createElement('div');
const all_curriculums_option_el = document.createElement('div');
const all_resources_option_el = document.createElement('div');



/*
 * Loader
 */

function render_loader (root_el) {
  loader_cont.style.display = 'none';
  loader_cont.className = 'learn_index_page__loader_cont';
  root_el.appendChild(loader_cont);

  const loader_inner = document.createElement('div');
  loader_inner.className = 'learn_index_page__loader_inner';
  loader_cont.appendChild(loader_inner);
}


/*
 * Articles
 */

function update_articles () {
  articles_cont.innerHTML = '';
  window.render_discovery_stream(articles_cont, {items: [state.articles]});
}


/*
 * Filters
 */


const filter_conts = [];


function create_filter () {
  return {
    label: null,
    value: null,
    options: null,
    sticky_dom: {
      filter_cont: null,
      dropdown_el: null,
      label_el: null,
    }
  }
}


const years_filter = create_filter();
years_filter.fetch_results = fetch_results;



/*
 * Options
 */

let curriculum_options;
let resource_options;
const curriculum_option_els = [];
const resource_option_els = [];
let showing_all_curriculums = true;
let showing_all_resources = true;
let curriculum_keys_string = '';
let resource_keys_string = '';


function handle_all_curriculums_option_click (e) {
  showing_all_curriculums = true;
  all_curriculums_option_el.classList.add('active');
  curriculum_keys_string = '';

  for (let i=0; i<curriculum_option_els.length; i++) {
    curriculum_option_els[i].classList.remove('active');
  }
  for (let i=0; i<curriculum_options.length; i++) {
    curriculum_options[i].active = false;
  }

  update_url();
  fetch_results();
}


function handle_all_resources_option_click (e) {
  showing_all_resources = true;
  all_resources_option_el.classList.add('active');
  resource_keys_string = '';

  for (let i=0; i<resource_option_els.length; i++) {
    resource_option_els[i].classList.remove('active');
  }
  for (let i=0; i<resource_options.length; i++) {
    resource_options[i].active = false;
  }

  update_url();
  fetch_results();
}


function handle_curriculum_option_click (e) {
  const option_el = e.currentTarget;

  option_el.option.active = !option_el.option.active;
  option_el.classList.toggle('active');

  let all_inactive = true
  for (let i=0; i<curriculum_options.length; i++) {
    const option = curriculum_options[i]
    if (option.active) {
      all_inactive = false
      break;
    }
  }
  showing_all_curriculums = all_inactive;

  if (showing_all_curriculums) {
    all_curriculums_option_el.classList.add('active');
  }
  else {
    all_curriculums_option_el.classList.remove('active');
  }

  update_url();
  fetch_results();
}



function handle_resource_option_click (e) {
  const option_el = e.currentTarget;

  option_el.option.active = !option_el.option.active;
  option_el.classList.toggle('active');

  let all_inactive = true
  for (let i=0; i<resource_options.length; i++) {
    const option = resource_options[i]
    if (option.active) {
      all_inactive = false
      break;
    }
  }
  showing_all_resources = all_inactive;

  if (showing_all_resources) {
    all_resources_option_el.classList.add('active');
  }
  else {
    all_resources_option_el.classList.remove('active');
  }

  update_url();
  fetch_results();
}


function update_curriculum_options () {
  curriculum_options_cont.innerHTML = '';

  all_curriculums_option_el.className = 'm2m_option '+(showing_all_curriculums ? 'active' : '');
  all_curriculums_option_el.innerText = 'All';
  curriculum_options_cont.appendChild(all_curriculums_option_el);
  all_curriculums_option_el.addEventListener('click', handle_all_curriculums_option_click);

  curriculum_option_els.length = 0;
  for (let i=0; i<curriculum_options.length; i++) {
    const option = curriculum_options[i];
    const option_el = document.createElement('div');
    curriculum_option_els.push(option_el);
    option_el.className = 'm2m_option '+(option.active ? 'active' : '');
    option_el.innerText = option.display;
    option_el.option = option;
    curriculum_options_cont.appendChild(option_el);
    option_el.addEventListener('click', handle_curriculum_option_click);
  }
}


function update_resource_options () {
  resource_options_cont.innerHTML = '';

  all_resources_option_el.className = 'm2m_option '+(showing_all_resources ? 'active' : '');
  all_resources_option_el.innerText = 'All';
  resource_options_cont.appendChild(all_resources_option_el);
  all_resources_option_el.addEventListener('click', handle_all_resources_option_click);

  resource_option_els.length = 0;
  for (let i=0; i<resource_options.length; i++) {
    const option = resource_options[i];
    const option_el = document.createElement('div');
    resource_option_els.push(option_el);
    option_el.className = 'm2m_option '+(option.active ? 'active' : '');
    option_el.innerText = option.display;
    option_el.option = option;
    curriculum_options_cont.appendChild(option_el);
    resource_options_cont.appendChild(option_el);
    option_el.addEventListener('click', handle_resource_option_click);
  }
}


/*
 * Fetch
 */


function fetch_results () {
  window.scrollTo(0,filters_cont.offsetTop);

  for (let i=0; i<filter_conts.length; i++) {
    filter_conts[i].classList.remove('active');
  }

  sticky_filter_cont.style.display = '';
  loader_cont.style.display = '';
  articles_cont.style.display = 'none';

  let params = Object.assign({}, state.passThru, {
    'years': years_filter.value || '',
    'curriculum': curriculum_keys_string || '',
    'resource': resource_keys_string || '',
  })

  const cached_years_filter = years_filter.value;
  const cached_curriculum_keys_string = curriculum_keys_string;
  const cached_resource_keys_string = resource_keys_string;

  fetch('/api/query-education/?' + (new URLSearchParams(params)).toString())
  .then(response => response.json())
  .then(function ({articles, filters, m2m_filters}) {
    if (cached_years_filter != years_filter.value
      || cached_curriculum_keys_string != curriculum_keys_string
      || cached_resource_keys_string != resource_keys_string
    ) {
      return;
    }
    //window.scrollTo(0,filters_cont.offsetTop);

    loader_cont.style.display = 'none';
    filters_cont.style.display = '';
    articles_cont.style.display = '';

    // Filters
    years_filter.value = filters.years.active.value;
    years_filter.label = filters.years.active.display;
    years_filter.options = filters.years.menu;

    curriculum_options = m2m_filters.curriculum.filter(o => o.value !== 'all');

    resource_options = m2m_filters.resource.filter(o => o.value !== 'all');


    update_url();

    window.update_filter(years_filter, years_filter.sticky_dom);

    showing_all_resources = resource_options.reduce((b, o) => b && o.active == false, true),
    showing_all_curriculums = curriculum_options.reduce((b, o) => b && o.active == false, true),

    update_curriculum_options();
    update_resource_options();


    // Articles
    state.articles = articles;
    update_articles();
  })
}


function update_url () {
  const curriculum_keys = [];
  const resource_keys = [];
  for (let i=0; i<curriculum_options.length; i++) {
    const option = curriculum_options[i]
    if (option.active) {
      curriculum_keys.push(option.value)
    }
  }
  for (let i=0; i<resource_options.length; i++) {
    const option = resource_options[i]
    if (option.active) {
      resource_keys.push(option.value)
    }
  }

  curriculum_keys_string = curriculum_keys.join(',')
  resource_keys_string = resource_keys.join(',')

  let params = Object.assign({}, state.passThru, {
    'years': years_filter.value,
    'curriculum': curriculum_keys_string,
    'resource': resource_keys_string,
  })

  var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + (new URLSearchParams(params)).toString()

  window.history.pushState({path:newurl},'',newurl)
}


function render_filters (root_el) {
  const filters_row = document.createElement('div');
  filters_row.className = 'row learn_index_page__filters';
  root_el.appendChild(filters_row);

  const filters_col = document.createElement('div');
  filters_col.className = 'col_10';
  filters_row.appendChild(filters_col);

  filters_cont.className = 'filters_cont';
  filters_cont.style.display = 'none';
  filters_col.appendChild(filters_cont);

  sticky_filter_cont.className = 'sticky_filter_cont selecta_p';
  filters_cont.appendChild(sticky_filter_cont);
  window.render_filter(sticky_filter_cont, years_filter.sticky_dom, 'Show resources for', filter_conts);
  sticky_filter_cont.style.display = 'none';

  {
    const sub_filters_row = document.createElement('div');
    sub_filters_row.className = 'sub_filters_row row';
    root_el.appendChild(sub_filters_row);

    const sub_filters_col = document.createElement('div');
    sub_filters_col.className = 'col_10 sm_col_12'
    sub_filters_row.appendChild(sub_filters_col);

    const sub_filters_title = document.createElement('div');
    sub_filters_title.className = 'sub_filters_title selecta_p';
    sub_filters_title.innerText = 'Filter by';
    sub_filters_col.appendChild(sub_filters_title);
  }


  {
    const row = document.createElement('div');
    row.className = 'row';
    root_el.appendChild(row);

    const col = document.createElement('div');
    col.className = 'col_10 sm_col_12'
    row.appendChild(col);

    const title_el = document.createElement('div');
    title_el.className = 'filter_option_title selecta_p';
    title_el.innerText = 'Resource types';
    col.appendChild(title_el);
  }

  {
    const row = document.createElement('div');
    row.className = 'row';
    root_el.appendChild(row);

    resource_options_cont.className = 'col_10 sm_col_12 selecta_p'
    row.appendChild(resource_options_cont);
  }


  {
    const row = document.createElement('div');
    row.className = 'row';
    root_el.appendChild(row);

    const col = document.createElement('div');
    col.className = 'col_10 sm_col_12'
    row.appendChild(col);

    const title_el = document.createElement('div');
    title_el.className = 'filter_option_title selecta_p';
    title_el.innerText = 'Curriculum areas';
    col.appendChild(title_el);
  }

  {
    const row = document.createElement('div');
    row.className = 'row';
    root_el.appendChild(row);

    curriculum_options_cont.className = 'col_10 sm_col_12 selecta_p'
    row.appendChild(curriculum_options_cont);
  }
}




function render_learn_index_page (root_el) {
  const q = parse_query(window.location.search);

  curriculum_keys_string = q.curriculum || '';
  resource_keys_string = q.resource || '';
  years_filter.value = q.years || '';


  const learn_index_page = document.createElement('div');
  learn_index_page.className = 'learn_index_page';
  root_el.appendChild(learn_index_page);

  const header_row = document.createElement('div');
  header_row.className = 'row';
  learn_index_page.appendChild(header_row);

  const header_col = document.createElement('div');
  header_col.className = 'col_10 sm_col_12 selecta_h1';
  header_row.appendChild(header_col);

  const title_cont = document.createElement('div');
  title_cont.className = 'learn_index_page__title_cont';
  header_col.appendChild(title_cont);

  const title_el = document.createElement('h1');
  title_el.className = 'selecta_h1 learn_index_page__title';
  title_el.innerText = window_api_data.page_fields.title;
  title_cont.appendChild(title_el);

  props = window_api_data.page_fields;
  const breadcrumb_cont = document.createElement('div');
  if (props.breadcrumb.length) {
    breadcrumb_cont.className = 'standard_page__breadcrumb_cont selecta_h6';
    title_cont.appendChild(breadcrumb_cont);

    const breadcrumb_link_0 = document.createElement('a');
    breadcrumb_link_0.className = 'standard_page__breadcrumb_link';
    breadcrumb_link_0.href = '/';
    breadcrumb_link_0.innerText = 'Home';
    breadcrumb_cont.appendChild(breadcrumb_link_0);

    const breadcrumb_sep = document.createElement('div');
    breadcrumb_sep.className = 'standard_page__breadcrumb_sep';
    breadcrumb_sep.innerHTML = '&sdot;';
    breadcrumb_cont.appendChild(breadcrumb_sep);
  }

  for (let i=0; i<props.breadcrumb.length; i++) {
    const bc = props.breadcrumb[i];
    const breadcrumb_link = document.createElement('a');
    breadcrumb_link.className = 'standard_page__breadcrumb_link';
    breadcrumb_link.href = bc.url;
    breadcrumb_link.innerText = bc.text;
    breadcrumb_cont.appendChild(breadcrumb_link);

    if (i != props.breadcrumb.length - 1) {
      const breadcrumb_sep = document.createElement('div');
      breadcrumb_sep.className = 'standard_page__breadcrumb_sep';
      breadcrumb_sep.innerHTML = '&sdot;';
      breadcrumb_cont.appendChild(breadcrumb_sep);
    }
  }

  // body
  window.render_streamfield(learn_index_page, window_api_data.page_fields.body);

  render_filters(learn_index_page);

  render_loader(learn_index_page);

  learn_index_page.appendChild(articles_cont);

  fetch_results();
}

window.render_learn_index_page = render_learn_index_page;

})();