From 7523d56bde7601a52e115c8afec7436530bfcbe8 Mon Sep 17 00:00:00 2001
From: James Muscat <jamesremuscat@gmail.com>
Date: Mon, 3 Jun 2024 23:17:26 +0100
Subject: [PATCH] Tooltips for timing table headers.

---
 .../components/TimingTableHeader.js           | 68 ++++++++++++++++++-
 1 file changed, 65 insertions(+), 3 deletions(-)

diff --git a/src/modules/timingScreen/components/TimingTableHeader.js b/src/modules/timingScreen/components/TimingTableHeader.js
index 0b454ee..51e65d4 100644
--- a/src/modules/timingScreen/components/TimingTableHeader.js
+++ b/src/modules/timingScreen/components/TimingTableHeader.js
@@ -1,5 +1,7 @@
 import styled from "styled-components";
 import { useSetting } from "../../settings";
+import { Tooltip, TooltipReference, useTooltipState } from 'reakit';
+import { QuestionCircle } from 'styled-icons/fa-regular';
 
 const HeaderRow = styled.tr`
   background-color: black;
@@ -7,7 +9,7 @@ const HeaderRow = styled.tr`
   top: 0;
 `;
 
-const Header = styled.th`
+const HeaderInner = styled.th`
   font-family: Play, sans-serif;
   text-transform: uppercase;
   text-align: left;
@@ -15,20 +17,80 @@ const Header = styled.th`
   font-weight: normal;
 
   border-bottom: 2px solid #54FFFF;
+
+  user-select: none;
+`;
+
+const Tip = styled.div`
+  background-color: rgba(0, 0, 0, 0.85);
+
+  border: 1px solid ${ props => props.theme.site.highlightColor };
+  border-radius: 0.25em;
+
+  padding: 0.5em;
+
+  transition: opacity 250ms ease-in-out;
+  opacity: 0;
+  [data-enter] & {
+    opacity: 1;
+  }
+`;
+
+const Q = styled(QuestionCircle)`
+  padding-left: 0.25em;
+  margin-top: -0.25em;
+  display: inline;
 `;
 
+const Header = ({ stat, ...props }) => {
+  if (stat[2]) {
+    return (
+      <HeaderWithPopover stat={stat} />
+    );
+  }
+  return (
+    <HeaderInner {...props}>
+      {stat[0]}
+    </HeaderInner>
+  );
+};
+
+const HeaderWithPopover = ({ stat }) => {
+  const tooltip = useTooltipState({
+    animated: 250,
+    gutter: -6
+  });
+  return (
+    <TooltipReference
+      as={HeaderInner}
+      {...tooltip}
+    >
+      {stat[0]}
+      <Q size={14} />
+      <Tooltip {...tooltip}>
+        <Tip>
+          {stat[2]}
+        </Tip>
+      </Tooltip>
+    </TooltipReference>
+  );
+};
+
 export const TimingTableHeader = ({ manifest }) => {
   const [hiddenCols] = useSetting('columns.hidden', []);
   return (
     <thead>
       <HeaderRow>
-        <Header>Pos</Header>
+        <HeaderInner>Pos</HeaderInner>
         {
           manifest.colSpec && manifest.colSpec.filter(
             stat => !hiddenCols.includes(stat[0])
           ).map(
             (stat, idx) => (
-              <Header key={idx}>{stat[0]}</Header>
+              <Header
+                key={idx}
+                stat={stat}
+              />
             )
           )
         }