"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.replaceFooter = exports.replaceYourIndividualDevPlan = exports.replacePracticalTips = exports.replaceWaysToDevelop = exports.replacePersonality = exports.replaceCompetenciesStrWeak = exports.getAssets = exports.replaceAssesmentData = exports.getContent = void 0;
const tslib_1 = require("tslib");
const fs_1 = tslib_1.__importDefault(require("fs"));
const path_1 = tslib_1.__importDefault(require("path"));
const getContent = (type) => {
    const filePath = path_1.default.join(__dirname, `/templates/${type}.html`);
    try {
        return fs_1.default.readFileSync(filePath, "utf8");
    }
    catch (error) {
        throw new Error("An error ocurred fetching file");
    }
};
exports.getContent = getContent;
const replaceAssesmentData = (_data, content) => {
    const dict = Object.fromEntries(_data.flatMap((o) => Object.entries(o)));
    const result = content.replace(/\[(.*?)\]/g, (match, key) => dict[key] ?? match);
    return result;
};
exports.replaceAssesmentData = replaceAssesmentData;
const getAssets = (_type) => {
    const header_logo = "templates/header-logo.png";
    const header_footer = "templates/header-footer.png";
    const header_background = "templates/header-background.png";
    const competency_header = "templates/competency-header.png";
    const ways_to_develop_header = "templates/ways-to-develop-header.png";
    const ways_to_develop_header_2 = "templates/ways-to-develop-header-2.png";
    const personality_assesment_header = "templates/personality-assesment-header.png";
    const assets = [
        { headerLogo: header_logo },
        { headerFooter: header_footer },
        { headerBackground: header_background },
        { competencyHeader: competency_header },
        { personalityAssesmentHeader: personality_assesment_header },
        { waysToDevelopHeader: ways_to_develop_header },
        { waysToDevelopHeader2: ways_to_develop_header_2 },
    ];
    return assets;
};
exports.getAssets = getAssets;
const camelToSnakeCase = (str) => str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
const getSkill = (key) => {
    var result = key.replace(/([A-Z])/g, " $1");
    var finalResult = result.charAt(0).toUpperCase() + result.slice(1);
    return finalResult;
};
const markedIcon = "<img width='15px' height='15px' src='templates/marked.png' class='competency-mark'/>";
const getMark = (mark) => {
    if (mark) {
        return markedIcon;
    }
    return "<img width='15px' height='15px' style='visibility: hidden' />";
};
const getCompetencies = (data, type) => {
    let result = "";
    data.forEach(({ skill, marked, text }) => {
        result = result.concat(`
      <div class="row" style="margin: 1rem 0; width: 90%;">
        <div class="column competency-data competency-card competency-card-${type}">
          <div class="row" style="height: 80px">
            <div class="column" style="width: 25%">
              <img class="competency-image" src='templates/assets/${camelToSnakeCase(skill)}.svg' alt="${skill}-image"/>
            </div>
            <div class="column" style="width: 65%; height: 100%">
            <p style="font-size: large; margin-top: 20px; font-weight:bold">${getSkill(skill)}</p>
            </div>
            <div class="column" style="width: 5%; margin-top: 0.5rem;">
              ${getMark(marked)}
            </div>
          </div>
        </div> 
        <div class="column">
          <p style="font-size: 9px;letter-spacing: 0.08rem;line-height: 1.2; font-weight:500; margin-top:1rem; text-align:left;">${text}</p>
        </div>
      </div>`);
    });
    return result;
};
const replaceCompetenciesStrWeak = (data, content) => {
    let result = content;
    let strengths = getCompetencies(data.strength, "strenght");
    let weakness = getCompetencies(data.weakness, "weakness");
    const base = `<div class="competency-section">
    <div class="row" style="margin-bottom: 1rem;">
      <div class="column" style="width: 55%">
        <p style="font-size:x-large">Top 3 likely strengths</p>
      </div>
      <div class="column" style="width: 35%">
        <p>A key behaviour selected by [organization]
          <img
            src="templates/marked.png"
            width="15px"
            height="15px"
          />
        </p>
      </div>
    </div>
    ${strengths}
    <div class="row" style="margin-bottom: 1rem">
      <div class="column" style="width: 55%">
        <p style="font-size:x-large">Lowest 3 likely development areas</p>
      </div>
      <div class="column" style="width: 35%;">
        <p>A key behaviour selected by [organization]
          <img
            src="templates/marked.png"
            width="15px"
            height="15px"
          />
        </p>
      </div>
    </div>
    ${weakness}
  </div>`;
    result = result.replace("[competencyResults]", base);
    return result;
};
exports.replaceCompetenciesStrWeak = replaceCompetenciesStrWeak;
const replacePersonality = (data, content) => {
    let result = content;
    let personality = "";
    data.forEach((p, i) => {
        personality = personality.concat(`<div class="row" style='${(i === 4 || i === 9 || i === 14) && "margin-top: 20rem"}'>
          <div class="column personality-data personality-card">
            <div class="row" style="height: 120px">
              <div class="column" style="width: 20%">
                <img class="personality-image" src='templates/assets/${camelToSnakeCase(p.skill)}.svg' alt="${p.skill}-image"/>
              </div>
              <div class="column" style="width: 35%">
                <p style="text-align:left; font-size: large; word-wrap: break-word;">${getSkill(p.skill)}</p>
              </div>
              <div class="column" style="width: 5%; margin-right: 4px;">
                ${getMark(p.marked)}
              </div>
              <div class="column" style="width: 37.5%">
                <p class="personality-result" style="text-align:right; float:right">${p.result}</p>
              </div>
            </div>
            <div class="row">
              <div class="progress-bar-container">
                <span class="progress-bar" style="width: ${p.barValue}%"></span>
              </div>
            </div>
          </div>
          <div class="column personality-data personality-meaning">
            <h3>What this means?</h3>
            ${p.text}
          </div>
        </div>
        `);
    });
    const base = `<div class="personality-section">${personality}</div>`;
    result = result.replace("[personalityResults]", base);
    return result;
};
exports.replacePersonality = replacePersonality;
const replaceWaysToDevelop = (_data, position, content) => {
    let result = content;
    let waysToDevelop = "";
    for (let i = 0; i < _data.length; i += 2) {
        const card = (wtd) => `
      <div class="row">
        <div class="column" style="width: 100%">
          <div class="competency-data ways-to-develop-card">
            <div class="row" style="height: 100px">
              <div class="column" style="width: 25%">
                <img class="competency-image" src='templates/assets/${camelToSnakeCase(wtd.skill)}.svg' alt="${wtd.skill}-image"/>
              </div>
              <div class="column" style="width: 65%; height: 100%">
                <p style="font-size: large; margin-top: 30px; margin-left:0.5rem; font-weight:bold;">${getSkill(wtd.skill)}</p>
              </div>
              <div class="column" style="width: 5%; margin-top: 0.5rem;">
                ${getMark(wtd.marked)}
              </div>
            </div>
          </div>
          <div class="row" style="width: 75%; margin-top: 2rem;">
            <div class="column" style="width: 100%">
              <div class="row" style="margin-top: 1.5rem">
                <div class="column" style="width:10%">
                  <img width="25px" height="25px" src='templates/checkMark.png' alt="way-to-develop-mark"/>
                </div>
                <div class="column" style="width:85%">
                  <p class="way-to-develop-text">${wtd.texts[0]}</p>
                </div>
              </div>
              <div class="row" style="margin-top: 1.5rem">
                <div class="column" style="width:10%">
                  <img width="25px" height="25px" src='templates/checkMark.png' alt="way-to-develop-mark"/>
                </div>
                <div class="column" style="width:85%">
                  <p class="way-to-develop-text">${wtd.texts[1]}</p>
                </div>
              </div>
              <div class="row" style="margin-top: 1.5rem">
                <div class="column" style="width:10%">
                  <img width="25px" height="25px" src='templates/checkMark.png' alt="way-to-develop-mark"/>
                </div>
                <div class="column" style="width:85%">
                  <p class="way-to-develop-text">${wtd.texts[2]}</p>
                </div>
              </div>
            </div>
          </div>
        </div> 
      </div>
    `;
        let height = 850;
        if (i > 1) {
            height = 900;
        }
        waysToDevelop = waysToDevelop.concat(`
      <div class="row key-behavior-text" style="width:100%">
        <p style="text-align: right; padding-right: 3rem">A key behaviour selected by [organization] 
          <img
            src="templates/marked.png"
            width="15px"
            height="15px"            
          />
        </p>
      </div>
      <div style="padding: 0 3rem">
        <div class="row" style="height:${height}px;">
          <div class="column" style="width: 49%">
            ${card(_data[i])}  
          </div>
          <div class="column" style="width: 49%">
            ${card(_data[i + 1])}  
          </div>
        </div>
      </div>  
    `);
    }
    const base = `
    <div class="ways-to-develop-section" style="top:${position}px">
      <div style="position: relative">
        <img
          class="ways-to-develop-header"
          src="templates/ways-to-develop-header.png"
          alt="ways-to-develop-header"
        />
        <div class="ways-to-develop-header ways-to-develop-header-text">
          <p class="title">WAYS TO DEVELOP</p>
          <p>
            Below are tips on how to improve and develop in the areas that are
            less likely to come naturally to you. It’s very rare for someone’s
            personality to change radically; however, by being aware of and
            working on your behaviour, you can improve your confidence and
            performance at work.
          </p>
          <p>
            We suggest you build the tips you find useful into your
            development plan.
          </p>
        </div>
      </div>
      <div>
       ${waysToDevelop};
      </div>
    </div>`;
    result = result.replace("[waysToDevelop]", base);
    return result;
};
exports.replaceWaysToDevelop = replaceWaysToDevelop;
const replacePracticalTips = (content, position) => {
    let result = content;
    const Card = (title, subtitle) => `<div class="row">
    <div class="column practical-tips-card">
      <div class="row">
        <p>${title}</p>
      </div>
      <div class="row">
        <p>${subtitle}</p>
      </div>
    </div>
  </div>`;
    const base = `<div class="practical-tips-section" style="top:${position}px">
      <div style="position: relative">
        <img
          class="practical-tips-header"
          src="templates/practical-tips-header.png"
          alt="practical-tips-header"
        />
        <div class="practical-tips-header-text">
          <p>PRACTICAL TIPS FOR YOUR PROFESSIONAL DEVELOPMENT</p>
          <p>
            Below you will find some tips on how to improve your performance within the workplace. Make use of these as well as the more targeted activities on the next page to put together your personalised, achievable development plan. 
          </p>
        </div>
      </div>
      <div class="practical-tips-wrapper">
        <div class="row">
          <div class="column">
            ${Card("Talk to your manager", "If you ask managers what contributed most to their professional development, they will almost always cite significant professional challenges. We learn the most when challenging circumstances force us to adopt new attitudes. In these situations, we are taken out of our “comfort zone” into uncharted territory.")}  
          </div>
          <div class="column">
          ${Card("Consider your drivers", "We are all diverse and unique, so developing your self-awareness involves gaining a deeper understanding of your personality traits, personal values, habits, and the drivers of your behaviours. This is a critical first step to help you understand the steps needed to change or develop a specific behaviour.")}  
          </div>
        </div>
        <div class="row">
          <div class="column">
          ${Card("Consider your drivers", "We are all diverse and unique, so developing your self-awareness involves gaining a deeper understanding of your personality traits, personal values, habits, and the drivers of your behaviours. This is a critical first step to help you understand the steps needed to change or develop a specific behaviour.")}  
          </div>
          <div class="column">
          ${Card("Consider your drivers", "We are all diverse and unique, so developing your self-awareness involves gaining a deeper understanding of your personality traits, personal values, habits, and the drivers of your behaviours. This is a critical first step to help you understand the steps needed to change or develop a specific behaviour.")}  
          </div>
        </div>
        <div class="row">
          <div class="column">
          ${Card("Consider your drivers", "We are all diverse and unique, so developing your self-awareness involves gaining a deeper understanding of your personality traits, personal values, habits, and the drivers of your behaviours. This is a critical first step to help you understand the steps needed to change or develop a specific behaviour.")}  
          </div>
          <div class="column">
          ${Card("Consider your drivers", "We are all diverse and unique, so developing your self-awareness involves gaining a deeper understanding of your personality traits, personal values, habits, and the drivers of your behaviours. This is a critical first step to help you understand the steps needed to change or develop a specific behaviour.")}  
          </div>
        </div>
      </div>
    </div>`;
    result = result.replace("[practicalTips]", base);
    return result;
};
exports.replacePracticalTips = replacePracticalTips;
const replaceYourIndividualDevPlan = (content, position) => {
    let result = content;
    const base = `
    <div class="individual-plan-section" style="top:${position}px">
      <div style="position: relative">
        <img
          class="individual-plan-header"
          src="templates/individual-plan-header.png"
          alt="individual-plan-section-header"
        />
        <div class="individual-plan-header-text">
          <p class="title">YOUR INDIVIDUAL DEVELOPMENT PLAN</p>
        </div>
      </div>
      <div class="individual-plan-section-wrapper">
        <div class="row ip-row">
          <div class="column ip-column ip-column-first">
            <p class="ip-column-header">Commitments</p>
          </div>
          <div class="column ip-column">
            <p class="ip-column-header">Your plan</p>
          </div>
        </div>
        <div class="row" style="height: 200px; margin-top:1rem;">
          <div class="column ip-column ip-column-first">
            <p class="ip-column-header">1-3 Commitments</p>
          </div>
          <div class="column ip-column">
            <p class="ip-column-text">I'm going to commit to...</p>
          </div>
        </div>
        <div class="row" style="height: 200px; margin-top:1rem;">
          <div class="column ip-column ip-column-first">
            <p class="ip-column-header">Your why</p>
          </div>
          <div class="column ip-column">
            <p class="ip-column-text">This is important to me because…</p>
          </div>
        </div>
        <div class="row" style="height: 200px; margin-top:1rem">
          <div class="column ip-column ip-column-first">
            <p class="ip-column-header">Timescale </p>
          </div>
          <div class="column ip-column">
            <p class="ip-column-text">I’ll experiment with this for…</p>
          </div>
        </div>
      </div>
    </div>`;
    result = result.replace("[individualPlan]", base);
    return result;
};
exports.replaceYourIndividualDevPlan = replaceYourIndividualDevPlan;
const replaceFooter = (content, position) => {
    let result = content;
    const base = `
    <div class="page-footer-section" style="top:${position}px">
      <div style="position: relative">
        <img
          class="page-footer-header"
          src="templates/page-footer-header.png"
          alt="page-footer-header"
        />
        <div class="page-footer-header-text">
          <p>THE SCIENCE BEHIND THE ASSESSMENT</p>
          <div>
            <p>Our personality assessment is used across 90 different countries by some of the most respected brands to help them make more ethical, data-driven, informed and consistent decisions, reducing bias and discrimination. Assessments are used by employees to power objective personalised guidance.</p>
            <p>Last year our assessments were completed by over 12 million people.</p>
          </div>
        </div>
      </div>
      <div class="row page-footer-section-wrapper">
        <div class="column page-footer-text">
          <p>Thrive administers the personality assessment which is powered by Aon and their team of 600 psychologists, built over the last 30+ years.</p>
          <p>Your responses to the questionnaire are compared with a very large sample of the population. The assessments are maintained and designed to reduce bias.</p>
          <p>The personality assessment are based on the Five Factor Model.</p>
        </div>
        <div class="column" style="margin-left:4rem">
          <img height="250px" src="templates/footer-image.png"
        </div>
        <img src="templates/header-logo.png" class="footer-logo"/>
      </div>
      
    </div>`;
    result = result.replace("[pageFooter]", base);
    return result;
};
exports.replaceFooter = replaceFooter;
//# sourceMappingURL=utils.js.map