const categories = [
  'Kompetens',
  'Grupporientering',
  'Stå upp för gruppnormer',
  'Social Synergi',
  'Emotionell intelligens',
  'Pålitlig social roll'
];

const description = {
  Kompetens:
    'Förmågan att gestalta kompetens inför andra genom samtal och genom att bidra till mål som gruppen strävar mot.',
  Grupporientering:
    'Att förstå sitt relativa inflytande till gruppen och anpassa strategier efter sin position.',
  'Stå upp för gruppnormer':
    'Förmågan att använda korrigeringar och uppmaningar för att främja normer och sociala regler som grupper stödjer.',
  'Social Synergi':
    'Främja socialt samspel som andra människor gillar och kan vara delaktiga i.',
  'Emotionell intelligens':
    'Uttrycka stolthet och tacksamhet på ett autentiskt sätt.',
  'Pålitlig social roll':
    'Förmågan att skapa en bild av sig själv som trogen till sin integritet. Med tydliga värderingar som vägleder beteenden oavsett kontext.'
};

const StatusTracker = () => {
  React.useEffect(() => {
    const script = document.createElement('script');
    script.src = 'js/slider.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  const [totalPoints, setTotalPoints] = React.useState(0);
  const [distributePoints, setDistributePoints] = React.useState(0);
  const [points, setPoints] = React.useState({
    Kompetens: 0,
    Grupporientering: 0,
    'Stå upp för gruppnormer': 0,
    'Social Synergi': 0,
    'Emotionell intelligens': 0,
    'Pålitlig social roll': 0
  });
  const [sliderValues, setSliderValues] = React.useState({
    Kompetens: 0,
    Grupporientering: 0,
    'Stå upp för gruppnormer': 0,
    'Social Synergi': 0,
    'Emotionell intelligens': 0,
    'Pålitlig social roll': 0
  });

  const resetAll = () => {
    console.log('RESET');
    setTotalPoints(0);
    setPoints({
      Kompetens: 0,
      Grupporientering: 0,
      'Stå upp för gruppnormer': 0,
      'Social Synergi': 0,
      'Emotionell intelligens': 0,
      'Pålitlig social roll': 0
    });
    setDistributePoints(0);
  };

  const getCategoryWithLeastPoints = () => {
    const entries = Object.entries(points);

    if (entries.length === 0) {
      // Handle the case when the points object is empty
      return null;
    }

    // Initialize with the first entry
    let [minCategory, minPoints] = entries[0];

    // Find the minimum value and corresponding category
    entries.forEach(([category, value]) => {
      if (value < minPoints) {
        minCategory = category;
        minPoints = value;
      }
    });

    return minCategory;
  };

  const handleTotalPointsChange = (e) => {
    const value = Math.max(0, Math.min(100, parseInt(e.target.value)));
    setTotalPoints(value);
    setDistributePoints(6 * value);
  };

  const handlePointsChange = (category, value) => {
    const numericValue = Math.max(0, Math.min(value, 100));

    setPoints((prevPoints) => {
      const newPoints = { ...prevPoints, [category]: numericValue }; // Tentatively set the new value for the category
      const totalUsedPoints = Object.values(newPoints).reduce(
        (acc, val) => acc + val,
        0
      ); // Calculate the total used points with the new value

      console.log(totalUsedPoints);
      if (totalUsedPoints <= distributePoints) {
        return newPoints;
      } else {
        // If exceeding, calculate the difference and adjust
        const excess = totalUsedPoints - distributePoints;
        const adjustedValue = numericValue - excess;

        // Ensure the slider being adjusted doesn't go below 0
        const correctedValue = Math.max(0, adjustedValue);

        // If user tries to increase a value when no points are left, revert to the previous value
        if (correctedValue > prevPoints[category]) {
          console.log(`ìf: ${prevPoints[category]}`);
          console.log(`corrected: ${correctedValue}`);
          return prevPoints;
        }

        console.log(`then: ${{ ...prevPoints, [category]: correctedValue }}`);
        return { ...prevPoints, [category]: correctedValue };
      }
    });

    setSliderValues((prevValues) => {
      const newValues = { ...prevValues, [category]: numericValue }; // Update the slider value

      return newValues;
    });
  };

  const calculateGradient = (value, totalPoints, usedPoints) => {
    const percentage = ((value - 0) / (totalPoints - usedPoints)) * 100;
    return (
      'background: linear-gradient(to right, #315865, #ACD8E0 ' +
      percentage +
      '%, #d3edff ' +
      percentage +
      '%, #dee1e2 100%)'
    );
  };

  const remainingPoints =
    distributePoints - Object.values(points).reduce((acc, val) => acc + val, 0);

  const categoryWithLeastPoints = getCategoryWithLeastPoints();
  console.log(categoryWithLeastPoints);

  return (
    <>
      <div className="section cc-store-home-wrap">
        <div className="container">
          <div class="divider" id="get-started"></div>
          <div className="blog-heading">
            <div className="label cc-light" id="get-started">
              Kom igång
            </div>
            <h2 className="work-heading">Påbörja din resa</h2>
            <div className="w-layout-blockcontainer w-container"></div>
          </div>
          <div>
            <div className="collection-wrap w-dyn-items w-row">
              <div className="blog-preview-wrap w-dyn-item w-col w-col-3">
                <p className="paragraph-light">
                  En viktig del av att navigera i svåra sociala situationer är
                  att göra pålitliga bedömningar om sin förmåga till inflytande.
                  Samtidigt är det helt normalt att underskatta eller överskatta
                  sin förmåga till inflytande. Föreställ dig hur andra människor
                  skulle skatta din förmåga till inflytande från 1-10. Utifrån
                  skattningen kan du kartlägga varför du har mer inflytande än
                  andra och även få information om vad du kan arbeta vidare på.
                </p>
              </div>
              <div className="blog-preview-wrap w-dyn-item w-col w-col-3 container-slider">
                <form className="range">
                  <div className="form-group range__slider">
                    <div className="w-row">
                      <div className="form-group range__value">
                        <label>Grad av Inflytande</label>
                        <span>{totalPoints}</span>
                      </div>
                    </div>
                    <div className="w-row">
                      <input
                        type="range"
                        step="1"
                        min="0"
                        max="10"
                        value={totalPoints}
                        style={{
                          background: calculateGradient(
                            totalPoints,
                            totalPoints,
                            Object.values(sliderValues).reduce(
                              (acc, val) => acc + val,
                              0
                            )
                          )
                        }}
                        onChange={handleTotalPointsChange}
                      ></input>
                    </div>
                    <div className="center-white-button">
                      <a
                        className="button cc-white-button w-inline-block"
                        onClick={() => resetAll()}
                      >
                        <svg
                          className="undo-arrow"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 512 512"
                          width="24"
                          height="24"
                        >
                          <path d="M212.3 224.3H12c-6.6 0-12-5.4-12-12V12C0 5.4 5.4 0 12 0h48c6.6 0 12 5.4 12 12v78.1C117.8 39.3 184.3 7.5 258.2 8c136.9 1 246.4 111.6 246.2 248.5C504 393.3 393.1 504 256.3 504c-64.1 0-122.5-24.3-166.5-64.2-5.1-4.6-5.3-12.6-.5-17.4l34-34c4.5-4.5 11.7-4.7 16.4-.5C170.8 415.3 211.6 432 256.3 432c97.3 0 176-78.7 176-176 0-97.3-78.7-176-176-176-58.5 0-110.3 28.5-142.3 72.3h98.3c6.6 0 12 5.4 12 12v48c0 6.6-5.4 12-12 12z" />
                        </svg>
                      </a>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="container">
          <div class="blog-heading">
            <div class="label cc-light" id="get-started">
              Fördela
            </div>
            <h2 class="work-heading">Poäng kvar: {remainingPoints}</h2>
            <div class="w-layout-blockcontainer w-container"></div>
          </div>
          <div class="collection-list-wrapper w-dyn-list">
            <div role="list" class="collection-wrap w-dyn-items w-row">
              <div
                role="listitem"
                class="blog-preview-wrap w-dyn-item w-col w-col-3"
              >
                {categories.slice(0, 3).map((category) => (
                  <form className="range" key={category}>
                    <div className="form-group range__slider hover-container">
                      <label className="paragraph-light hover-target">
                        <div className="align-text-and-icon">
                          <i class="gg-info"></i>
                          {category}
                        </div>
                      </label>
                      <aside className="hover-popup">
                        <h2>{category}</h2>
                        <p className="paragraph-light">
                          {description[category]}
                        </p>
                      </aside>
                      <input
                        type="range"
                        step="1"
                        min="0"
                        max="10"
                        value={points[category]}
                        style={{
                          background: calculateGradient(
                            points[category],
                            totalPoints,
                            Object.values(sliderValues).reduce(
                              (acc, val) => acc + val,
                              0
                            )
                          )
                        }}
                        onChange={(e) =>
                          handlePointsChange(category, parseInt(e.target.value))
                        }
                      ></input>
                    </div>
                    <div className="form-group range__value ">
                      <label></label>
                      <span>{points[category]}</span>
                    </div>
                  </form>
                ))}
              </div>
              <div
                role="listitem"
                class="blog-preview-wrap w-dyn-item w-col w-col-3"
              >
                {categories.slice(3, 6).map((category) => (
                  <form className="range" key={category}>
                    <div className="form-group range__slider hover-container">
                      <label className="paragraph-light hover-target">
                        <div className="align-text-and-icon">
                          <i class="gg-info"></i>
                          {category}
                        </div>
                      </label>
                      <aside className="hover-popup">
                        <h2>{category}</h2>
                        <p className="paragraph-light">
                          {description[category]}
                        </p>
                      </aside>
                      <input
                        type="range"
                        step="1"
                        min="0"
                        max="10"
                        value={points[category]}
                        style={{
                          background: calculateGradient(
                            points[category],
                            totalPoints,
                            Object.values(sliderValues).reduce(
                              (acc, val) => acc + val,
                              0
                            )
                          )
                        }}
                        onChange={(e) =>
                          handlePointsChange(category, parseInt(e.target.value))
                        }
                      ></input>
                    </div>
                    <div className="form-group range__value ">
                      <label></label>
                      <span>{points[category]}</span>
                    </div>
                  </form>
                ))}
              </div>
            </div>
          </div>
        </div>
        {remainingPoints === 0 && totalPoints !== 0 && (
          <div className="container section-bottom">
            <div className="blog-heading">
              <div class="label cc-light">Insikt</div>
              <h2 className="work-heading">Resultat</h2>
              <div className="w-layout-blockcontainer w-container"></div>
            </div>
            {categoryWithLeastPoints === 'Kompetens' && (
              <div>
                <p className="paragraph-light">
                  Utifrån din profil bedöms{' '}
                  <span className="highlight-word">Kompetens</span> som ett
                  relevant område att utvecklas inom. Ett vanligt misstag vi
                  människor gör när vi ska förmedla kompetens i kritiska
                  situationer är att vi börjar argumentera och övertala de vi
                  pratar med. När vi gör detta riskerar vi att uppfattas som
                  osäkra och i behov av bekräftelse. Öva på att bli medveten när
                  detta sker för att framstå som mer kompetent.
                </p>
                <p className="paragraph-light">
                  Vi behöver inte heller nödvändigtvis vara kompetenta inom
                  områden som är av central betydelse i ett socialt sammanhang.
                  Det kan höja ens inflytande att kommunicera effektivt och
                  bidra inom mindre centrala områden. Reflektera över när i ett
                  samtal du smidigt kan börja prata om ett mindre centralt
                  område där du kan uppvisa goda kommunikationsfärdigheter. För
                  att säkerställa att ämnet är meningsfullt för andra ta pauser
                  och bjud in till andras deltagande.
                </p>
              </div>
            )}
            {categoryWithLeastPoints === 'Grupporientering' && (
              <div>
                <p className="paragraph-light">
                  Utifrån din profil bedöms{' '}
                  <span className="highlight-word">Grupporientering</span> som
                  ett relevant område att utvecklas inom. Inflytande kopplas
                  ofta till hur uppmärksamhet fördelas. Detta betyder att om du
                  får mindre uppmärksamhet än andra kan ditt sociala inflytande
                  minska.
                </p>
                <p className="paragraph-light">
                  Människor reagerar negativt om du tar mer uppmärksamhet från
                  gruppen än det gruppen tycker är funktionellt. Genom att
                  förstå din nuvarande roll i gruppen kan du balansera hur
                  mycket uppmärksamhet du bör får av andra för att öka ditt
                  inflytande. Ytterligare en strategi är att spegla gruppens
                  samspel och värderingar när ditt inflytande är lägre, och
                  gradvis uttrycka dina egna preferenser och värderingar mer när
                  ditt inflytande ökar.
                </p>
              </div>
            )}
            {categoryWithLeastPoints === 'Stå upp för gruppnormer' && (
              <div className="">
                <p className="paragraph-light">
                  Utifrån din profil bedöms att{' '}
                  <span className="highlight-word">
                    Stå upp for gruppnormer
                  </span>{' '}
                  som ett relevant område att utvecklas inom. Vanliga strategier
                  är att uppmana andra att göra något eller att korrigera något
                  beteende i gruppen. Undvik att korrigera eller uppmana på ett
                  sätt som inte genererar följsamhet. Att stå upp för något utan
                  att det genererar följsamhet riskerar i stället att sänka ditt
                  inflytande. Säkerställ även att gruppen anser att
                  gruppnormerna du står upp för anses vara funktionella för
                  gruppen. Annars riskerar du att framstå som otrevlig.
                </p>
                <p className="paragraph-light">
                  En användbar strategi är att stå upp för pro-sociala
                  gruppnormer. Detta betyder att korrigera när någon talar
                  negativt om sig själv, eller att uppmana någon att vara stolt
                  över det dem åstadkommit. Detta har hög sannolikhet att uppnå
                  följsamhet utan att du framstår som otrevlig vilket kommer öka
                  ditt sociala inflytande.
                </p>
              </div>
            )}
            {categoryWithLeastPoints === 'Social Synergi' && (
              <div>
                <p className="paragraph-light">
                  Utifrån din profil bedöms{' '}
                  <span className="highlight-word">Social synergi</span> som ett
                  relevant område att utvecklas inom. Grupper skapar mening på
                  olika sätt i sitt samspel. Bli medveten om när motivationen
                  att samspela ökar hos gruppen och kategorisera typen av
                  samspel som bidrog till den ökade motivationen. Främja
                  därefter samspelet genom frågor eller uppmaningar. Här följer
                  en lista med vanliga typer av samspel att hålla utkik efter.
                </p>
                <ul>
                  <li>
                    <p class="paragraph-light">
                      Lättsamt skoja och/eller retas{' '}
                    </p>
                  </li>
                  <li>
                    <p class="paragraph-light">
                      Lära ut saker eller bli lärd nya saker{' '}
                    </p>
                  </li>
                  <li>
                    <p class="paragraph-light">
                      Dela med sig av planer, mål eller värderingar{' '}
                    </p>
                  </li>
                  <li>
                    <p class="paragraph-light">
                      Ge och ta emot stöttning i utmaningar{' '}
                    </p>
                  </li>
                  <li>
                    <p class="paragraph-light">Dela personliga erfarenheter</p>
                  </li>
                  <li>
                    <p class="paragraph-light">
                      Diskutera intellektuella områden{' '}
                    </p>
                  </li>
                  <li>
                    <p class="paragraph-light">
                      Prata om människor och relationer{' '}
                    </p>
                  </li>
                  <li>
                    <p class="paragraph-light">
                      Jämföra framgång, kompetenser och färdigheter{' '}
                    </p>
                  </li>
                </ul>
              </div>
            )}
            {categoryWithLeastPoints === 'Pålitlig social roll' && (
              <div>
                <p className="paragraph-light">
                  Utifrån din profil bedöms din{' '}
                  <span className="highlight-word">Pålitliga sociala roll</span>{' '}
                  som ett relevant område att utvecklas inom. För att utveckla
                  en roll som du trivs med och som uppfattas som pålitlig kan du
                  fundera på vad du skulle önska att människor säger om dig
                  efter att lämnat en grupp. Detta synliggör vilka värderingar
                  du har. Arbeta med att vägledas av dem i ditt agerande och i
                  din kommunikation. Nedan följer en lista med vanliga
                  värderingar som kan användas för att formulera en idé över hur
                  du vill presentera dig i sociala sammanhang. sammanhang.
                </p>
                <ul>
                  <li>
                    <p class="paragraph-light">Entusiasm</p>
                  </li>

                  <li>
                    <p class="paragraph-light">Kreativitet</p>
                  </li>

                  <li>
                    <p class="paragraph-light">Vishet</p>
                  </li>

                  <li>
                    <p class="paragraph-light">Mod</p>
                  </li>

                  <li>
                    <p class="paragraph-light">Nyfikenhet</p>
                  </li>

                  <li>
                    <p class="paragraph-light">Lekfullhet</p>
                  </li>

                  <li>
                    <p class="paragraph-light">Lojalitet</p>
                  </li>

                  <li>
                    <p class="paragraph-light">Bekymmersfri</p>
                  </li>

                  <li>
                    <p class="paragraph-light">Elegans</p>
                  </li>

                  <li>
                    <p class="paragraph-light">Ödmjukhet</p>
                  </li>

                  <li>
                    <p class="paragraph-light">Ärlighet</p>
                  </li>

                  <li>
                    <p class="paragraph-light">Framtidsinriktning</p>
                  </li>

                  <li>
                    <p class="paragraph-light">Empati</p>
                  </li>

                  <li>
                    <p class="paragraph-light">Beslutsamhet</p>
                  </li>

                  <li>
                    <p class="paragraph-light">Enkelhet</p>
                  </li>
                </ul>
              </div>
            )}
            {categoryWithLeastPoints === 'Emotionell intelligens' && (
              <p className="paragraph-light">
                Utifrån din profil bedöms{' '}
                <span className="highlight-word">Emotionell intelligens</span>{' '}
                som ett relevant område att utvecklas inom. Utmaningen med att
                uttrycka tacksamhet och stolthet i grupper är att det ibland
                inte finns mycket att vara tacksam eller stolt över. Färdigheten
                ligger i att ändå identifiera små saker som kan främja uttryck
                av dessa känslor på ett autentiskt sätt. Öva på att vara
                medveten om situationer där du faktiskt känner tacksamhet eller
                stolthet även över dina eller andras små prestationer och försök
                uttrycka det på ett sätt som andra kan förstå och relatera till.
              </p>
            )}
          </div>
        )}
      </div>
    </>
  );
};