ihk24/gfi-ihk-2024/stories/sections/election-detail/ElectionDetailComponent.js

import './election-detail.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {createSocialIcons} from "../../atoms/social-icons/SocialIconsComponent";
import {socialIconsBookmark} from "../../atoms/social-icons/SocialIconsData";
import {createVideo} from "../../components/video/VideoComponent";
import {createButton} from "../../atoms/button/ButtonComponent";

export const createElectionDetail =
  ({
    image = './dummy/election-list-cover.jpg',
    name = 'Lars-Hendrick Pirckensee',
    subheadline = 'Geschäftsführerin Cocolor GmbH',
    textheadline = 'Was möchten Sie bewegen?',
    copy = 'Ich kandidiere, weil ich als Familienunternehmer die Bedingungen für die kommenden Generationen und die Anliegen der Musterstädtischen Groß- und Außenhändler in der IHK aktiv mitgestalten will.  Dabei ist es mir sehr wichtig, Ideen gegen den Fachkräftemangel zu entwickeln, die Chancen der Digitalisierung zu nutzen und die Infrastruktur für alle Verkehrsträger zukunftsfähig aufzustellen!  Dabei ist es mir sehr wichtig, Ideen gegen den Fachkräftemangel zu entwickeln, die Chancen der Digitalisierung zu nutzen und die Infrastruktur für alle Verkehrsträger zukunftsfähig aufzustellen!  Dabei ist es mir sehr wichtig, Ideen gegen den Fachkräftemangel zu entwickeln, die Chancen der Digitalisierung zu nutzen und die Infrastruktur für alle Verkehrsträger zukunftsfähig aufzustellen!',
    smheadline = 'Meine Kanäle',
    infoheadline1 = 'Wahlgruppe 02',
    infoheadline2 = 'Wahlbezirk 05',
    infoheadline3 = 'Unternehmen',
    infotext1 = 'Kreditinstitute / Versicherungen / Immobilienwirtschaft',
    infotext2 = 'Kreisfreie Stadt Musterstadt und Kreis Musterhausen',
    infobox3headline = 'Cocolor GmbH',
    infobox3address = 'Carl-Backhaus-Str. 13<br />22926 Ahrensburg ',
    infobox3website = 'Unternehmenswebseite',
    infobox3email = 'E-Mail',
    infobox3phone = '+49 4102 77899-31',
    backButton = 'Zur Kandidatenübersicht',
    contactHeadline = 'IHK-Wahlbüro',
    contactText = 'Wir beantworten gerne Ihre Fragen zur IHK-Wahl 2024. Rufen Sie uns einfach an.',
    showVideo = true,
    showSocialMedia = true,
    showElectionArea = true,
  }) => {
    const electionDetail = createElement('div', ['election-detail']);
    const text = createElement('div', ['election-detail--text'], null, electionDetail);
    if (showVideo) {
        const video = createElement('div', ['election-detail--video'], null, electionDetail);
        const videocontainer = createElement('div', ['video-container'], null, video);
        videocontainer.appendChild(createVideo({
            caption: '',
            copyright: '',
        }));
    }
    const info = createElement('div', ['election-detail--info'], null, electionDetail);
    const back = createElement('div', ['election-detail--back'], null, electionDetail);
    const more = createElement('div', ['election-detail--more', 'contact-wrapper'], null, electionDetail);

    const imageContainer = createElement('div', ['election-detail--image-container'], null, text);
    createImage(image, 545, 526, '', [], imageContainer);
    createElement('span', ['copyright'], name, imageContainer);
    const textbox = createElement('div', ['text-box'], null, text);
    createElement('h1', [], name, textbox);
    createElement('p', ['subheadline'], subheadline, textbox);
    if (textheadline) {
        createElement('h2', [], textheadline, textbox);
    }
    if (copy) {
        createElement('p', [], copy, textbox);
    }

    if (showSocialMedia) {
        const socialmedia = createElement('div', ['social-media'], null, textbox);
        createElement('p', [], smheadline, socialmedia);
        const iconsList = createSocialIcons({
          items: socialIconsBookmark,
        })
        socialmedia.appendChild(iconsList);
    }

    const info1 = createElement('div', ['info-box', 'info-box-01'], null, info);
    createElement('p', ['info-headline'], infoheadline1, info1);
    const boxContent1 = createElement('p', ['info-box--content', 'info-box--text'], null, info1);
    const boxContent1A = createElement('a', [], infotext1, boxContent1);
    boxContent1A.href = '#';

    if (showElectionArea) {
        const info2 = createElement('div', ['info-box', 'info-box-02'], null, info);
        createElement('p', ['info-headline'], infoheadline2, info2);
        const boxContent2 = createElement('p', ['info-box--content', 'info-box--text'], null, info2);
        const boxContent2A = createElement('a', [], infotext2, boxContent2);
        boxContent2A.href = '#';
    }

    const info3 = createElement('div', ['info-box', 'info-box-03'], null, info);
    createElement('p', ['info-headline'], infoheadline3, info3);
    const info3content = createElement('div', ['info-box--content', 'info-box--content'], null, info3);
    createElement('p', ['headline'], infobox3headline, info3content);
    createElement('p', ['address'], infobox3address, info3content);
    const website = createElement('p', [], null, info3content);
    const websiteA = createElement('a', [], infobox3website, website);
    websiteA.href = '#';
    const email = createElement('p', [], null, info3content);
    const emailA = createElement('a', [], infobox3email, email);
    emailA.href = 'mailto:#';
    const phone = createElement('p', [], null, info3content);
    const phoneA = createElement('a', [], infobox3phone, phone);
    phoneA.href = 'tel:004941027789931';

    back.appendChild(createButton({
        label: backButton,
    }));

    createElement('h3', [], contactHeadline, more);
    createElement('p', [], contactText, more);

    const ul = createElement('ul', ['contact-buttons'], null, more);
    const li = createElement('li', [], null, ul);
    const liA = createElement('a', ['icon-telefon', 'btn', 'white', 'btn-small', 'icon-left'], '04141/524-0', li);
    liA.href= 'tel:04141/524-0';

    return electionDetail;
  }