import './header.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";
import $ from "jquery";
import IHKHeader from "./header";
import {createNav} from "../nav/NavComponent";
import {createIhkSwitch} from "../ihk-switch/IHKSwitchComponent";
import {createHeaderSearch} from "../header-search/HeaderSearchComponent";

export const createHeader =
  ({
    contactPhone,
    contactMail,
    contactLink = '#',
    loginLink = '#',
  }) => {
    const header = createElement('header', ['page-header']);
    const logo = createElement('a', ['logo'], '', header);
    logo.href = '#';
    createImage('./logos/musterstadt.svg', 100, 50, 'IHK Logo', [], logo);

    const contactNav = createElement('ul', ['contact-nav'], null, header);

    if (loginLink) {
      const li = createElement('li', [], null, contactNav);
      const a = createElement('a', ['login'], 'Login', li);
      a.href = '#';
    }

    if (contactPhone) {
      const li = createElement('li', [], null, contactNav);
      const a = createElement('a', ['phone'], contactPhone, li);
      a.href = 'tel:' + contactPhone.split(' ').join('').split('/').join().split('-').join('');
    }

    if (contactMail) {
      const li = createElement('li', [], null, contactNav);
      const a = createElement('a', ['mail'], 'E-Mail', li);
      a.href = 'mailto:' + contactMail;
    }

    if (contactLink) {
      const li = createElement('li', [], null, contactNav);
      const a = createElement('a', ['contact'], 'Kontakt', li);
      a.href = contactLink;
    }

    const searchWrap = createElement('div', ['search'], null, header);
    createElement('button', ['open-search'], 'Suche', searchWrap);
    searchWrap.appendChild(createHeaderSearch({}));
    createElement('button', ['close-search'], 'Suche verlassen', searchWrap);

    createElement('button', ['toggle-nav'], '<span>Menü</span>', header);
    header.appendChild(createNav({}));
    header.appendChild(createIhkSwitch({}));

    new IHKHeader($(header));

    return header;
  };