Pay bananas, get monkeys 🤯

StepForm.tsx

/* 
  This is a typical example of a codebase I inherited 😭 
  I mean, where do I even start ... 
  - direct DOM manipulation
  - toggling display: none instead of not rendering, ...
  - unclear data paths and constant heavy lookups
  
  Oh, are you surprised that this stinking pile of shit is full of bugs? Me neither.
  
  #kilowott #ninestack
*/

import React from 'react';
import { Workouts, App } from 'app-interfaces';

import {
  useStateValue,
  metricConverter,
  isInt,
} from '../../bin/config/AppContext';

import { makeStyles } from '@material-ui/core/styles';
import { Button } from '@material-ui/core';

import { ExerciseDetailsComponent as ExerciseDetails } from '../Exercises';
import Table from './Table';

import { useTranslation } from 'react-i18next';
import uuid from 'uuid/v4';
import { CatalogClass } from '../../bin/controllers';

const useStyles = makeStyles((theme) => ({
  tablList: {
    '& .step-indicator': {
      width:"60%",
      textAlign: 'center',
      marginTop: 15,
      // marginLeft: '31%',
      right:"90px",
      // position:"sticky",
      position:"absolute",
      [theme.breakpoints.down('md')]: {
        marginTop: 15,
        width:"100%",
        marginLeft: '0%',
        right:'unset'
      },
    },
    '& .action-group': {
      marginTop: -30,
      [theme.breakpoints.down('md')]: {
        marginTop: -35,
      },
      '& .MuiButton-root': {
        height: 40,
        width: 95,
        textTransform: 'capitalize',
        color: '#ffffff',
        fontSize: 14,
        fontWeight: 600,
        '&.prev': {
          float: 'left',
          backgroundColor: '#333333',
        },
        '&.next': {
          float: 'right',
          backgroundColor: 'var(--text-primary)',
        },
      },
    },
  },
  drawerTab:{
    // display:"flex",
    // justifyContent:"space-between",
    width:"25vw",
    
    "& .tabDiv2":{
      width:"44vw",
      marginTop:"1rem"
    }
  }
}));

export default function StepFormComponent(props: {
  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
  supersetList?: Workouts.IExercise[] | null;
  addExercise?: Workouts.IExercise[] | null;
  superset?: Workouts.IExerciseSuperSet | null;
  children?: JSX.Element | JSX.Element[];
}) {
  const { metric } = useStateValue() as { metric: App.State['metric'] };

  const initialTab = 0;
  const [superset, setSuperset] = React.useState(props.superset);
  const [addExercise, setAddExercise] = React.useState(props.addExercise);
  const [supersetList, setSupersetList] = React.useState(props.supersetList);
  const [currentTab, dispatch] = React.useReducer(reduceCurrentTab, initialTab);

  function handleChange(form: HTMLFormElement) {
    const formData = new FormData(form);
    const newExerciseList = formData.get('exercises');
    if (newExerciseList && typeof newExerciseList === 'string') {
      if (supersetList) return setSupersetList(JSON.parse(newExerciseList));
      if (addExercise) return setAddExercise(JSON.parse(newExerciseList));
      if (superset)
        return setSuperset({
          id: superset && superset.id ? superset.id : uuid(),
          exercises: JSON.parse(newExerciseList),
        });
    }
  }

  function reduceCurrentTab(
    tab: number,
    action: { type: string; payload?: any }
  ) {
    const form = document.getElementById('step-form') as HTMLFormElement | null;
    if (!form) return tab;
    switch (action.type) {
      case 'reset':
        handleChange(form);
        break;
      case 'invalid':
        return tab;
      case 'prev':
        if (tab === initialTab) return initialTab;
        return tab - 1;
      case 'next':
        if (tab === initialTab) {
          handleChange(form);
          return tab + 1;
        }
        return tab + 1;
      case 'submit':
        handleChange(form);
        form.dispatchEvent(new Event('submit'));
        break;
      default:
        throw new Error();
    }
    return initialTab;
  }

  // Handle Prev, Next / Submit button action:
  const handleAction = (e: React.MouseEvent) => {
    const action = e.currentTarget.id;
    const form = document.getElementById('step-form') as HTMLFormElement | null;
    const tabs = [...document.getElementsByClassName('tab')] as
      | HTMLElement[]
      | null;

    if (!action || !form || !tabs || !tabs[currentTab]) return;

    const formData = new FormData(form);
    const exercises = formData.get('exercises');
    if (typeof exercises === 'string' && JSON.parse(exercises).length === 0)
      return dispatch({ type: 'reset' });
    // Hide current tab:
    tabs[currentTab].style.display = 'none';

    switch (action) {
      case 'prevBtn':
        if (currentTab === 1) {
          const stepsIndicator=document.getElementById("setMarginTop")
          if(stepsIndicator && window.innerWidth>700){
           stepsIndicator.style.top="unset"
          }
          
        }
        return dispatch({ type: 'prev' });
      case 'nextBtn':
        // If current tab is first tab then move to next tab:
        if (currentTab === 0) {
          return dispatch({ type: 'next' });
        }
        // ...else format and update data input field:
        else {
          // Get current exercise id:
          const exercise_id =
            (supersetList &&
              supersetList[currentTab - 1] &&
              supersetList[currentTab - 1].exercise_id) ||
            (addExercise &&
              addExercise[currentTab - 1] &&
              addExercise[currentTab - 1].exercise_id) ||
            (superset &&
              superset.exercises[
                currentTab === 0 ? currentTab : currentTab - 1
              ] &&
              superset.exercises[currentTab === 0 ? currentTab : currentTab - 1]
                .exercise_id);
          // Collect input fields:
          const tabInputs = superset
            ? ([
                ...tabs[
                  currentTab === 0 ? currentTab : currentTab - 1
                ].querySelectorAll('input.form-control'),
              ] as HTMLInputElement[] | null)
            : ([...tabs[currentTab].querySelectorAll('input.form-control')] as
                | HTMLInputElement[]
                | null);
          // Get target input field:
          const dataInput = document.getElementById(
            'data'
          ) as HTMLInputElement | null;

          if (!exercise_id || !dataInput || !tabInputs) return;

          const initialValues = {
            name: tabInputs[0].name,
            value: Number(tabInputs[0].value),
          };
          const newEntry = {
            id: uuid(),
            exercise_id,
            score_count: 0,
            score_type: initialValues.name,
            score_cols: [initialValues.name],
            score_vals: [
              {
                type: initialValues.name,
                value: [
                  metricConverter(
                    initialValues.value,
                    `${initialValues.name}O`,
                    metric
                  ),
                ],
              },
            ],
            result_vals: [],
            notes_sets: [],
            exercise_notes: null,
          };

          const reduceExerciseItem = (
            accum: Workouts.IExercise,
            tabInput: HTMLInputElement
          ) => {
            // if input name is same as score type, update score count and score vals:
            if (tabInput.name === accum.score_type) {
              if (isInt(tabInput.name) && tabInput.valueAsNumber % 1 !== 0) {
                if (!tabInput.classList.contains('is-invalid'))
                  tabInput.classList.toggle('is-invalid');
              } else {
                if (tabInput.classList.contains('is-invalid'))
                  tabInput.classList.toggle('is-invalid');
              }
              accum.score_vals[0].value[accum.score_count] = metricConverter(
                Number(tabInput.value),
                `${tabInput.name}O`,
                metric
              );
              accum.score_count = accum.score_count + 1;
              return accum;
            }
            // else if input name is exercise_notes update exercise_notes:
            else if (tabInput.name === 'exercise_notes') {
              accum.exercise_notes = tabInput.value;
              return accum;
            }
            // else if input name is notes_sets, update notes_sets:
            else if (tabInput.name === 'notes_sets') {
              const targetData = tabInput.parentElement as HTMLTableDataCellElement | null;
              if (!targetData) return accum;
              const setIndex = targetData.cellIndex - 1;
              accum.notes_sets[setIndex] = tabInput.value;
              return accum;
            }
            // else if input name exists in score cols update score values:
            else if (accum.score_cols.find((el) => el === tabInput.name)) {
              if (isInt(tabInput.name) && !tabInput.valueAsNumber) {
                if (tabInput.classList.contains('is-invalid'))
                  tabInput.classList.toggle('is-invalid');
              } else if (
                isInt(tabInput.name) &&
                tabInput.valueAsNumber % 1 !== 0
              ) {
                if (!tabInput.classList.contains('is-invalid'))
                  tabInput.classList.toggle('is-invalid');
              } else {
                if (tabInput.classList.contains('is-invalid'))
                  tabInput.classList.toggle('is-invalid');
              }
              const targetData = tabInput.parentElement as HTMLTableDataCellElement | null;
              if (!targetData) return accum;
              const setIndex = targetData.cellIndex - 1;
              accum.score_vals[
                accum.score_cols.findIndex((el) => el === tabInput.name)
              ].value[setIndex] = metricConverter(
                Number(tabInput.value),
                `${tabInput.name}O`,
                metric
              );
              return accum;
            }
            // else input name doesn't exist, add score col and score val:
            else {
              if (isInt(tabInput.name) && !tabInput.valueAsNumber) {
                if (tabInput.classList.contains('is-invalid'))
                  tabInput.classList.toggle('is-invalid');
              } else if (
                isInt(tabInput.name) &&
                tabInput.valueAsNumber % 1 !== 0
              ) {
                if (!tabInput.classList.contains('is-invalid'))
                  tabInput.classList.toggle('is-invalid', true);
              } else {
                if (tabInput.classList.contains('is-invalid'))
                  tabInput.classList.toggle('is-invalid', false);
              }
              accum.score_cols.push(tabInput.name);
              accum.score_vals.push({
                type: tabInput.name,
                value: [
                  metricConverter(
                    Number(tabInput.value),
                    `${tabInput.name}O`,
                    metric
                  ),
                ],
              });
              return accum;
            }
          };

          const currentExerciseList = JSON.parse(
            dataInput.value
          ) as Workouts.IExercise[];
          const newExerciseItem = [...tabInputs].reduce(
            reduceExerciseItem,
            newEntry
          );
          Object.assign(
            currentExerciseList[currentTab === 0 ? currentTab : currentTab - 1],
            newExerciseItem
          );
          // Update data input value:
          dataInput.value = JSON.stringify(currentExerciseList);
          // Check metric values
          if (
            [...tabInputs].find((el) => el.classList.contains('is-invalid'))
          ) {
            tabs[currentTab].style.display = 'block';
            // tabs[currentTab][0].style.width = 'unset';
            // tabs[currentTab][0].style.paddingRight = 0;
            // tabs[currentTab][1].style.width = 'unset';
            // tabs[currentTab][1].style.marginTop = 0;
            // return dispatch({ type: 'invalid' });
          }
          // If on the last tab then submit form:
          if (
            (tabs.length > 1 && currentTab === tabs.length - 1) ||
            (currentTab === 0 && superset && superset.exercises.length === 1)
          ) {
            return dispatch({ type: 'submit', payload: dataInput.value });
          }
          // ... else move to next tab:
          return dispatch({ type: 'next' });
        }
      default:
        return dispatch({ type: 'reset' });
    }
  };

  // Handle current tab
  const showTab = React.useCallback(() => {
 
    const tabs = document.getElementsByClassName(
      'tab'
    ) as HTMLCollectionOf<HTMLElement> | null;
    const prevBtn = document.getElementById(
      'prevBtn'
    ) as HTMLButtonElement | null;
    const nextBtn = document.getElementById(
      'nextBtn'
    ) as HTMLButtonElement | null;
     
    if (!tabs || !tabs[currentTab] || !prevBtn || !nextBtn) return;
    const temp= document.getElementById("superset")
    // const temp2= document.getElementById("tablist-container")
    // console.log(temp2?.children[1].className)
  //  const oldClass=temp2?.children[1].className
    if(currentTab){
     if(temp){
      // temp2?.children[1].setAttribute("class", `${oldClass} scroller`)
      window.innerWidth>700 && temp.children[2].setAttribute("style", "width: 87vw")
      // console.log(temp)
     }
     
    }
    else{
      if(temp){
        window.innerWidth>700 && temp.children[2].setAttribute("style", "width: 512px")
      // temp2?.children[1].setAttribute("class", `tab`)
      }
    }
    // Handle step indicator:
    const fixStepIndicator = (n: number) => {
      // Remove class from all steps:
      const steps = document.getElementsByClassName(
        'step'
      ) as HTMLCollectionOf<HTMLSpanElement> | null;
      if (!steps || !steps[n]) return;
      [...steps].forEach((v, i) => {
        steps[i].className = steps[i].className.replace(' active', '');
      });
      // If on first tab remove finish class:
      if (n === 0)
        steps[n].className = steps[n].className.replace(' finish', '');
      // ... else add finish class to previous step:
      if (n !== 0) steps[n - 1].className += ' finish';
      // ... add active class to current step:
      steps[n].className = steps[n].className.replace(' finish', '');
      steps[n].className += ' active';
    };
    // Display the current tab:
    tabs[currentTab].style.display = 'block';
    
    let currentTabTabs = tabs[currentTab].children as HTMLCollectionOf<HTMLElement>;

    currentTabTabs.length > 1 && (currentTabTabs[0].style.width = 'unset');
    currentTabTabs.length > 1 && (currentTabTabs[0].style.paddingRight = "0px");
    currentTabTabs.length > 1 && (currentTabTabs[1].style.width = 'unset');
    currentTabTabs.length > 1 && (currentTabTabs[1].style.marginTop = "0px");

    // Fix previous button:
    if (currentTab === 0) {
      prevBtn.style.display = 'none';
    } else {
      prevBtn.style.display = 'inline';
     
    }
    // Fix next button:
    if (currentTab === tabs.length - 1) {
      // console.log(props.superset && props.superset.exercises.length);
      if (currentTab === 0 && superset && superset.exercises.length === 1)
        nextBtn.innerHTML = 'Submit';
      else if (currentTab === 0) nextBtn.innerHTML = 'Next';
      else nextBtn.innerHTML = 'Submit';
    } else {
      nextBtn.innerHTML = 'Next';
    }
    // Fix step indicators:
    fixStepIndicator(currentTab);
  }, [currentTab, superset]);

  // Effects
  React.useEffect(showTab, [currentTab]);

  return (
    <form id='step-form' className='step-form' onSubmit={props.onSubmit}>
      {/* Tabs section */}
      {props.children}
      <TabsList
        
        currentTab={currentTab}
        superset={superset}
        addExercise={addExercise}
        supersetList={supersetList}
        handleAction={handleAction}
      />
    </form>
  );
}

type TabListProps = {
  currentTab: number;
  supersetList?: Workouts.IExercise[] | null;
  addExercise?: Workouts.IExercise[] | null;
  superset?: Workouts.IExerciseSuperSet | null;
  handleAction: (e: React.MouseEvent) => false | void;
  children?: any;

};
const TabsList: React.FC<TabListProps> = ({
  currentTab,
  supersetList,
  addExercise,
  superset,
  handleAction,
}) => {
  const classes = useStyles();
  
  const { t } = useTranslation();
  if (supersetList) {
    return (
      <div id='tablist-container' className={classes.tablList} style={{width:window.innerWidth>700 ?"48%" :"100%"}}>
        {supersetList.map((exercise, exerciseIndex) => (
          <TabComponent
            key={exerciseIndex}
            exerciseIndex={exerciseIndex}
            currentTab={currentTab}
            exercise={exercise}
          />
          ))}
        {/* Step indicator */}
        <div className='step-indicator' id="setMarginTop">
          {currentTab ? <><span key={0} className='step' />
          {supersetList.map((exercise, exerciseIndex) => (
            <span key={exerciseIndex + 1} className='step' />
            ))}
            </>
            :
            <div style={{marginTop:"40px"}}/>
            }
            {/* Action buttons Previous, Next/Submit */}
        <div className='action-group' 
        // style={{width:window.innerWidth>700 ?"60%": "unset", marginLeft:window.innerWidth>700 ?"31%" :"0px"}}
        >
          <Button
            variant='contained'
            size='small'
            id='prevBtn'
            type='button'
            className='prev'
            onClick={handleAction}
          >
            {t("Previous")}
          </Button>
          <Button
            variant='contained'
            size='small'
            id='nextBtn'
            type='button'
            className='next'
            onClick={handleAction}
            >
            {t("Next")}
          </Button>
        </div>
        </div>
        
      </div>
    );
  } else if (superset) {
    return (
      <div id='tablist-container' className={classes.tablList} style={{width:window.innerWidth>700 ?"48%" :"100%"}}>
        {superset.exercises.map((exercise, exerciseIndex) => {
          return (
            <TabComponent
              key={exerciseIndex}
              currentTab={currentTab + 1}
              exercise={exercise}
              exerciseIndex={exerciseIndex}
            />
            );
        })}
        {/* Step indicator */}
        <div className='step-indicator' id="setMarginTop">
          {/* <span key={0} className='step' /> */}
          {currentTab ?
          <>{superset.exercises.map((exercise, exerciseIndex) => (
            <span key={exerciseIndex} className='step' />
          ))}
          </>
          :
          <div style={{marginTop:"40px"}}/>
          }
           {/* Action buttons Previous, Next/Submit */}
        <div className='action-group'
        //  style={{width:window.innerWidth>700 ?"60%" :"unset", marginLeft:window.innerWidth>700 ?"31%":"0px"}}
         >
          <Button
            variant='contained'
            size='small'
            id='prevBtn'
            type='button'
            className='prev'
            onClick={handleAction}
          >
            {t("Previous")}
          </Button>
          <Button
            variant='contained'
            size='small'
            id='nextBtn'
            type='button'
            className='next'
            onClick={handleAction}
          >
            {t("Next")}
          </Button>
        </div>
        </div>
      </div>
    );
  } else if (addExercise) {
    return (
      <div id='tablist-container' className={classes.tablList} style={{width:window.innerWidth>700 ?"48%" :"100%"}}>
        {addExercise.map((exercise, exerciseIndex) => (
          <TabComponent
          key={exerciseIndex}
            exerciseIndex={exerciseIndex}
            currentTab={currentTab}
            exercise={exercise}
          />
          ))}

        {/* Step indicator */}
        <div className='step-indicator' id="setMarginTop">
          {currentTab ? <><span key={0} className='step' />
          {addExercise.map((exercise, exerciseIndex) => (
            <span key={exerciseIndex + 1} className='step' />
          ))} </>
          :
          <div style={{marginTop:"40px"}}/>
          }
          {/* Action buttons Previous, Next/Submit */}
          <div className='action-group'>
            <Button
              variant='contained'
              size='small'
              id='prevBtn'
              type='button'
              className='prev'
              onClick={handleAction}
            >
              {t("Previous")}
            </Button>
            <Button
              variant='contained'
              size='small'
              id='nextBtn'
              type='button'
              className='next'
              onClick={handleAction}
            >
              {t("Next")}
            </Button>
          </div>
        </div>
      </div>
    );
  }
  return <div id='tablist-container'></div>;
};

type TabProps = {
  currentTab?: number;
  exerciseIndex: number;
  exercise: Workouts.IExercise;
  mystyle?: boolean | undefined
};
export const TabComponent: React.FC<TabProps> = ({
  currentTab,
  exerciseIndex,
  exercise,
  mystyle
}) => {
  const { catalog } = useStateValue() as { catalog: CatalogClass };
const {t} = useTranslation();
const classes = useStyles();
if (!catalog) return <></>;
  const exerciseItem =
  catalog.MyExercises.find((el) => el.id === exercise.exercise_id) ||
    catalog.Exercises.find((el) => el.id === exercise.exercise_id);
  if (!exerciseItem)
    return (
      <div className='tab' style={{width:"25vw"}}>
        <h5 className='section-heading'>{t("Exercise not found")}</h5>
      </div>
    );
    
    
    
    
    return (
  
        window.innerWidth > 700 ?   
      <div className={`tab ${mystyle && classes.drawerTab}`}  style={{width:"25vw"}}>
      {/* <div className='tabDiv1'> */}
        <h5 className='section-heading' style={{ color: '#333333',fontWeight:"bold", marginLeft: "0.5%" }}>
          {exerciseItem.name}
        </h5>
        
      {/* </div>
      <div className='tabDiv2'> */}
        <ExerciseDetails match={{ params: exercise }} mystyle={true} >
        <Table
          exercise={exercise}
          index={exerciseIndex + 1}
          currentTab={currentTab}
          exerciseItem={exerciseItem}
          />
          </ExerciseDetails>
      {/* </div> */}
    </div> : 
    <div className={`tab ${mystyle && classes.drawerTab}`}  style={{width:"25vw"}}>
    <h5 className='section-heading' style={{ color: '#333333',fontWeight:"bold", marginLeft: "1.5%" }}>
      {exerciseItem.name}
    </h5>
  <ExerciseDetails match={{ params: exercise }} mystyle={true}>   
      <Table
        exercise={exercise}
        index={exerciseIndex + 1}
        currentTab={currentTab}
        exerciseItem={exerciseItem}
      />
 </ExerciseDetails>
  </div>
  
  );
};

Table.tsx

import React from 'react';
import Popup from 'reactjs-popup';

import {
  ExerciseTypes,
  WorkoutScoreType,
  CardioScoreType,
  CardioScoreCloumns,
  StrengthScoreColumns,
  WorkoutScoreColumns,
  ScoreType,
} from '../../bin/models/StaticTypes';
import {
  useStateValue,
  metricConverter,
  metricUnit,
  isInt,
} from '../../bin/config/AppContext';
import { App, Workouts, Exercises } from 'app-interfaces';

import { makeStyles } from '@material-ui/core/styles';
import {
  Table,
  TableHead,
  TableBody,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Button,
} from '@material-ui/core';
import { Clear } from '@material-ui/icons';

import { useTranslation } from 'react-i18next';
import { ConfirmModal as ConfirmCol } from '../Modals';
import Icons from '../Utilities/Icons';

const useStyles = makeStyles((theme) => ({
  addSetBtn:{
    backgroundColor:"#7ed320",
    borderColor:"#7ed320"
  },
  tableToppy: { width: "10px", 
  borderTop: "3px solid var(--text-primary)",
  borderLeft: "3px solid #5692F4",
  borderBottom: "3px solid #5692F4" },
  tableContainer: {
    margin: '12px 0',
    maxWidth: '100%',
    maxHeight: 560,
    overflow: 'auto',
    position: 'relative',
    backgroundImage: `url(${process.env.PUBLIC_URL}/table.png)`,
    backgroundSize: "248px",
    '& .MuiTable-root': {
      '& tr': {
        height: 38,
        '& th, & td, ': {
          minWidth: 130,
          border: '1px solid #ffffff',
          padding: "12px 20px",
          fontSize: 14,
          fontWeight: 500,
          color: '#ffffff',
        },
        '& th:first-child': {
          width: 124,
        },
      },
      '& .MuiTableHead-root': {
        backgroundColor: 'var(--text-primary)',
      },
      '& .MuiTableBody-root': {
        backgroundColor: '#5692F4',
        '& tr': {
          '& td': {
            paddingTop: 5,
            paddingBottom: 2,
            verticalAlign: 'top',
            '& .form-label, & .form-control': {
              marginTop: "0px",
              fontSize: 14,
              fontWeight: 500,
              textAlign: 'left',
              textTransform: 'capitalize',
              '& span': {
                color: '#ffffff',
                display: 'block',
                textTransform: 'lowercase',
              },
            },
            '& .form-label': {
              color: '#ffffff',
            },
            '& .form-control': {
              display: 'block',
              width: '100%',
              height: 'calc(1.5em + .75em + 2px)',
              padding: '.375rem .75rem',
              color: '#495057',
              backgroundColor: '#ffffff',
              backgroundClip: 'padding-box',
              border: '1px solid #ced4da',
              borderRadius: '.25rem',
              transition:
                'border-color .15s ease-in-out,box-shadow .15s ease-in-out',
            },
          },
        },
      },
    },
  },
  dialog: {
    '& .MuiDialogTitle-root': {
      height: 75,
      backgroundColor: 'var(--text-primary)',
      color: '#ffffff',
      fontSize: 20,
      fontWeight: 500,
      padding: '25px 15px',
      '& svg': {
        float: 'right',
        marginRight: 15,
        marginTop: -2,
      },
      '& .session-options': {
        float: 'right',
        fontSize: 14,
        fontWeight: 400,
        '& li': {
          fontSize: 16,
          fontWeight: 'bold',
          padding: '5px 0',
          '& svg': {
            height: 24,
            width: 24,
            marginRight: 14,
          },
        },
      },
    },
    '& .MuiDialogContent-root': {
      '& textarea': {
        marginTop: 15,
        padding: 15,
        borderRadius: 3,
        width: '100%',
        height: 83,
        border: '1px solid #dcdcdc',
        backgroundColor: 'transparent',
        fontSize: 16,
      },
    },
    '& .MuiDialogActions-root': {
      paddingLeft: 20,
      paddingRight: 20,
      width: '100%',
      '& button': {
        height: 50,
        backgroundColor: 'var(--text-primary)',
        color: '#ffffff',
        fontSize: theme.spacing(2),
        textTransform: 'capitalize',
      },
    },
  },
}));

type TableProps = {
  // tabDiv2:Boolean;
  exercise: Workouts.IExercise;
  exerciseItem: Exercises.IExercise;
  currentTab?: number;
  index: number;
};

export default function TableComponent(props: TableProps) {
  const classes = useStyles();
  const { t } = useTranslation();
  const { exercise, exerciseItem, currentTab, index } = props;
  const { ic_del, ic_info } = Icons;

  const { catalog, metric, Methods } = useStateValue() as {
    catalog: App.State['catalog'];
    metric: App.State['metric'];
    Methods: App.Methods;
  };

  const isSchedule = !/workouts/.test(window.location.href);
  const [labelState, setLabelState]: any = React.useState([]);
  const [tableHead, setTableHead] = React.useState<JSX.Element>();
  const [tableBody, setTableBody] = React.useState<JSX.Element[]>();
  const [resultRow, setResultRow] = React.useState<JSX.Element[]>();
  const [targetCol, setTargetCol] = React.useState<number | null>(null);
  const [targetSetNotes, setTargetSetNotes] = React.useState<number | null>(
    null
  );
  const [showConfirmCol, setShowConfirmCol] = React.useState(false);
  const [showSetNotes, setShowSetNotes] = React.useState(false);
  const [generateTableCount, setGenerateTableCount] = React.useState(0);

  React.useEffect(()=>{
    setTimeout(function(){
      const x=document.getElementById(
        `table-container-${index}`)?.clientHeight
        const y=document.getElementById("setTop")
        const z=document.getElementById(
          `table-container-${index}`)?.clientWidth
        const stepsIndicator=document.getElementById("setMarginTop")
        // console.log('tablewidth', z)
        if(y && x && window.innerWidth>700){
        y.style.top=`${x+130}px`
        }
        if(stepsIndicator && x && window.innerWidth>700){
        stepsIndicator.style.top=`${x+150}px`
        if(z){
          stepsIndicator.style.width=`${z}px`
        }
        }
    },10)
   
  })
  // Show confirm rem Col
  const showConfirmColModal = React.useCallback(() => {
    if (!targetCol) return setShowConfirmCol(false);
    return setShowConfirmCol(true);
  }, [targetCol]);
  // Show set note
  const showSetNoteModal = React.useCallback(() => {
    if (!targetSetNotes) return setShowSetNotes(false);
    return setShowSetNotes(true);
  }, [targetSetNotes]);

  // Handle rem set click
  const handleRemCol = (e: MouseEvent) => {
    const currentTarget = e.currentTarget as HTMLSpanElement | null;
    if (currentTarget) {
      const tableHeadCell = currentTarget.parentElement as HTMLTableHeaderCellElement | null;
      return tableHeadCell && setTargetCol(tableHeadCell.cellIndex);
    }
  };
  // Handle set notes click
  const handleSetNotes = (e: MouseEvent) => {
    const currentTarget = e.currentTarget as HTMLSpanElement | null;
    if (currentTarget) {
      const tableHeadCell = currentTarget.parentElement as HTMLTableHeaderCellElement | null;
      return tableHeadCell && setTargetSetNotes(tableHeadCell.cellIndex);
    }
  };

  // Save set notes
  const saveSetNotes = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    e.stopPropagation();
    const formData = new FormData(e.currentTarget);
    const newNotes = formData.get('notes') as string;
    const targetTable = document.getElementById(
      `set-table-${index}`
    ) as HTMLTableElement | null;
    if (!targetTable || !targetSetNotes) return;
    const tableBody = targetTable.children[1] as HTMLTableElement; // <tbody/>
    const tableBodyRows = tableBody.children as HTMLCollectionOf<HTMLTableRowElement>; // <tr/>
    const tableSetNotes = tableBodyRows[0].children[targetSetNotes]
      .children[1] as HTMLInputElement;
    tableSetNotes.setAttribute('value', newNotes);
    if (!exercise.notes_sets) Object.assign(exercise, { notes_sets: [] });
    exercise.notes_sets[targetSetNotes - 1] = newNotes;
    return setTargetSetNotes(null);
  };
  // Confirm remove column
  const confirmRemCol = () => {
    const targetTable = document.getElementById(
      `set-table-${index}`
    ) as HTMLTableElement | null;
    const dataInput = document.getElementById(
      'data'
    ) as HTMLInputElement | null;
    if (!targetTable || !targetCol || !dataInput) return;

    const tableHead = targetTable.children[0] as HTMLTableElement; // <thead/>
    const tableHeadRow = tableHead.children[0] as HTMLTableHeaderCellElement; // <th/>
    const tableBody = targetTable.children[1] as HTMLTableElement; // <tbody/>
    const tableBodyRows = tableBody.children as HTMLCollectionOf<HTMLTableRowElement>; // <tr/>

    // Remove the head cell.
    tableHeadRow.children[targetCol].remove();
    // Remove coresponding column cells.
    [...tableBodyRows].forEach((v) => v.children[targetCol].remove());

    // Get current exercise
    const currentExercise = exercise;
    // Decrement score count.
    currentExercise.score_count && currentExercise.score_count--;
    // Splice score values.
    currentExercise.score_vals &&
      currentExercise.score_vals.map((val) =>
        val.value.splice(targetCol - 1, 1)
      );
    // Update data input value
    const currentDataInput = JSON.parse(
      dataInput.value
    ) as Workouts.IExercise[];
    if (currentTab) {
      currentDataInput[currentTab - 1] = currentExercise;
      dataInput.value = JSON.stringify(currentDataInput);
    } else {
      dataInput.value = JSON.stringify([currentExercise]);
    }

    if (targetCol >= 1) {
      for (let i = targetCol; i < tableHeadRow.children.length; i++) {
        tableHeadRow.children[
          i
        ].innerHTML = `<td>${i}
        <span class='info-icon' onClick='${handleSetNotes}'>
                    <img
                      src='${ic_info}'
                      alt='${t('notes')}'
                      title='${t(`Set ${i + 1} Notes`)}'
                    />
                  </span>
        <span class='del-icon' id='dlt${i + 1}'><img src='${ic_del}'/></span></td>`;
        tableHeadRow.children[i].children[0].addEventListener("click", (e: any) => handleSetNotes(e));
        tableHeadRow.children[i].children[1].addEventListener("click", (e: any) => handleRemCol(e));

      }
    }

    return setTargetCol(null);
  };
  // Generate Metrics
  const generateMetrics = React.useCallback(
    (name: string) => metricUnit(name, metric),
    [metric]
  );

  // Generate HeadRow
  const generateHeadRow = React.useCallback(() => {
    const handleRemCol = (e: React.MouseEvent<HTMLSpanElement>) => {
      if (e.currentTarget) {
        const targetRow = e.currentTarget
          .parentElement as HTMLTableHeaderCellElement | null;
        return targetRow && setTargetCol(targetRow.cellIndex);
      }
    };
    const handleSetNotes = (e: React.MouseEvent<HTMLSpanElement>) => {
      if (e.currentTarget) {
        const tableHeadCell = e.currentTarget
          .parentElement as HTMLTableHeaderCellElement | null;
        return tableHeadCell && setTargetSetNotes(tableHeadCell.cellIndex);
      }
    };

    const setHeads = () => {
      const scoreCount = exercise.score_count;
      let heads: JSX.Element[] = scoreCount
        ? []
        : [
          <th key={0}>
            {1}
            <span className='info-icon' onClick={handleSetNotes}>
              <img src={ic_info} alt={t('notes')} title={t('Set 1 Notes')} />
            </span>
          </th>,
        ];
      if (scoreCount) {
        for (let i = 0; i < scoreCount; i++) {
          heads.push(
            <th key={i + 1}>
              {i + 1}
              {i >= 0 ? (
                <>
                  <span className='info-icon' onClick={handleSetNotes}>
                    <img
                      src={ic_info}
                      alt={t('notes')}
                      title={t(`Set ${i + 1} Notes`)}
                    />
                  </span>
                  <span
                    className='del-icon'
                    onClick={handleRemCol}
                  >
                    <img
                      src={ic_del}
                      alt={t('delete')}
                      title={t(`Remove Set ${i + 1}`)}
                    />
                  </span>
                </>
              ) : (
                  <span
                    className='info-icon'
                    onClick={() => setTargetSetNotes(i + 1)}
                  >
                    <img src={ic_info} alt={t('notes')} title={t(`Set ${i + 1} Notes`)} />
                  </span>
                )}
            </th>
          );
        }
      }
      return heads;
    };
    if (!tableHead) {
      return setTableHead(
        <tr>
          <th>{t("Sets")}</th>
          {setHeads()}
        </tr>
      );
    }
  }, [tableHead, exercise, ic_del, ic_info, t]);
  // Generate BodyRow
  const generateBodyRow = React.useCallback(() => {
    // toggle option select
    const toggleOptions = (e: React.ChangeEvent<HTMLInputElement>) => {
      e.preventDefault();
      const currentTargetValue = e.currentTarget.value;
      const currentTargetDataCell = e.currentTarget
        .parentElement as HTMLTableDataCellElement | null;
      const currentTargetRow =
        currentTargetDataCell &&
        (currentTargetDataCell.parentElement as HTMLTableRowElement | null);
      const selectDataCell =
        currentTargetRow &&
        (currentTargetRow.firstElementChild as HTMLTableDataCellElement | null);

      const selectInput =
        selectDataCell &&
        (selectDataCell.firstElementChild as HTMLSelectElement | null);

      if (!selectInput)
        return Methods.handleUnauthorized({
          error_code: 504,
          error_message: t('Input not found'),
          title: t('App Error!'),
        });
      if (currentTargetValue === '')
        return selectInput.removeAttribute('disabled');
      if (selectInput.disabled) return;
      return selectInput.setAttribute('disabled', 'true');
    };
    // set name attribute for corresponding row inputs
    const handleOptions = (e: React.ChangeEvent<HTMLSelectElement>) => {
      e.preventDefault();
      const name = e.currentTarget.value;
      const metric = e.currentTarget
        .nextElementSibling as HTMLSpanElement | null;
      const currentIndex = parseInt(e.currentTarget.id);
      const targetTable = document.getElementById(`set-table-${currentIndex}`);

      if (e.currentTarget.value === '' || !targetTable) return;

      const targetTableBody = targetTable.children[1].children;

      if (!targetTableBody[0] || !metric) return;

      const targetTableBodyInputs = [
        ...targetTableBody[0].querySelectorAll('input.form-control'),
      ] as HTMLInputElement[];

      targetTableBodyInputs.forEach((v, i) => {
        if (targetTableBodyInputs[i].name !== 'notes_sets') {
          targetTableBodyInputs[i].name = name;
          targetTableBodyInputs[i].step = isInt(name) ? '1' : '0.01';
        }
      });
      metric.innerText = generateMetrics(name);
      if (isSchedule) {
        const resultsRow = targetTable.children[1]
          .lastElementChild as HTMLTableRowElement;
        const resultMetric = resultsRow.getElementsByTagName('span')[0];
        if (resultMetric) resultMetric.innerText = generateMetrics(name);
      }
    };
    // Generate options list based on exercise type
    const generateOptionSelect = () => {
      let scoreColumnOptions;
      let length;
      const type = exerciseItem && exerciseItem.type;
      if (!catalog || !type) return;
      if (type.toString() === ExerciseTypes[1]) {
        scoreColumnOptions = CardioScoreType;
        length = Object.keys(CardioScoreType).length / 2;
      } else {
        scoreColumnOptions = WorkoutScoreType;
        length = Object.keys(WorkoutScoreType).length / 2;
      }
      let options: JSX.Element[] = [];
      for (let i = 0; i < length; i++) {
        options = [
          ...options,
          <option
            key={i}
            value={catalog.typesDisplay(scoreColumnOptions[i])}
            style={{
              textTransform: 'capitalize',
            }}
          >
            {catalog.typesDisplay(scoreColumnOptions[i].toLowerCase())}
          </option>,
        ];
      }
      return exercise.score_vals &&
        exercise.score_vals.length > 0 &&
        exercise.score_vals[0].value[0] &&
        exercise.score_vals[0].value.find((el) => el === 0) ? (
          <>
            <select
              disabled
              id={`${index}`}
              name='score_type'
              className='form-control'
              onChange={handleOptions}
              defaultValue={exercise.score_type}
            >
              {options}
            </select>
            <span>{generateMetrics(exercise.score_type)}</span>
          </>
        ) : (
          <>
            <select
              id={`${index}`}
              name='score_type'
              className='form-control'
              onChange={handleOptions}
              defaultValue={exercise.score_type}
            >
              {options}
            </select>
            <span>{generateMetrics(exercise.score_type)}</span>
          </>
        );
    };
    // Generate Table Data cells
    const setData = (name: string) => {
      const scoreCount = exercise.score_count;
      const colIndex =
        exercise.score_cols &&
        exercise.score_cols.findIndex((el) => el === name);
      let dataCells: JSX.Element[] =
        colIndex > -1
          ? [
            <td key={0}>
              <input
                type='text'
                className='form-control'
                name={name}
                autoComplete="off"
                // min={0}
                // step={isInt(name) ? 1 : 0.01}
                defaultValue={
                  exercise.score_vals &&
                    exercise.score_vals.length > 0 &&
                    exercise.score_vals[colIndex].value[0]
                    ? isInt(name)
                      ? metricConverter(
                        exercise.score_vals[colIndex].value[0],
                        name,
                        metric
                      )
                      : metricConverter(
                        exercise.score_vals[colIndex].value[0],
                        name,
                        metric
                      ).toFixed(2)
                    : undefined
                }
                onChange={toggleOptions}
                onKeyUp={handleInputChange}
                />
              {name === exercise.score_type && (
                <input
                  type='text'
                  name='notes_sets'
                  className='form-control'
                  defaultValue={exercise.notes_sets[colIndex]}
                  style={{ display: 'none' }}
                />
              )}
            </td>,
          ]
          : [
            <td key={0}>
              <input
                type='text'
                className='form-control'
                name={name}
                autoComplete="off"
                // min={0}
                // step={isInt(name) ? 1 : 0.01}
                defaultValue={
                  exercise.score_vals &&
                  exercise.score_vals.length > 0 &&
                  exercise.score_vals[0].value[0]
                  ? isInt(name)
                      ? metricConverter(
                        exercise.score_vals[0].value[0],
                        name,
                        metric
                      )
                      : metricConverter(
                        exercise.score_vals[0].value[0],
                        name,
                        metric
                        ).toFixed(2)
                        : undefined
                      }
                      onChange={toggleOptions}
                      onKeyUp={handleInputChange}
              />
              <input
              autoComplete="off"
                type='text'
                name='notes_sets'
                className='form-control'
                defaultValue={
                  exercise.notes_sets ? exercise.notes_sets[0] : undefined
                }
                style={{ display: 'none' }}
              />
            </td>,
          ];
      if (scoreCount >= 1) {
        for (let i = 1; i < scoreCount; i++) {
          dataCells = [
            ...dataCells,
            <td key={i}>
              <input
                set-index={i}
                type='text'
                className='form-control'
                name={name}
                autoComplete="off"
                // min={0}
                // step={isInt(name) ? 1 : 0.01}
                onKeyUp={handleInputChange}
                defaultValue={
                  exercise.score_vals &&
                    exercise.score_vals.length > 0 &&
                    exercise.score_vals[colIndex].value[i]
                    ? isInt(name)
                      ? metricConverter(
                        exercise.score_vals[colIndex].value[i],
                        name,
                        metric
                      )
                      : metricConverter(
                        exercise.score_vals[colIndex].value[i],
                        name,
                        metric
                      ).toFixed(2)
                    : undefined
                }
              />
              {name === exercise.score_type && (
                <input
                  type='text'
                  name='notes_sets'
                  className='form-control'
                  defaultValue={exercise.notes_sets[i]}
                  style={{ display: 'none' }}
                />
              )}
            </td>,
          ];
        }
      }
      return dataCells;
    };
    if (!tableBody) {
      const exerciseType = exerciseItem.type;
      const scoreType = exercise.score_type;
      const scoreCols = exercise.score_cols;
      // If no score type or no score cols then return template
      if (!scoreType || !scoreCols) {
        // If exercise type is STRENGTH or KETTLEBELLS add KG_WEIGHTS to defau;t template
        if (
          `${exerciseType}` === ExerciseTypes[4]
        ) {
          return setTableBody([
            <tr key={0}>
              <td>{generateOptionSelect()}</td>
              {setData('TIME')}
            </tr>,
            <tr key={1}>
              <td>
                <label className='form-label'>
                  {t("pause")}
                  <span
                    style={{ display: 'block', textTransform: 'lowercase' }}
                  >
                    {generateMetrics(ScoreType[3])}
                  </span>
                </label>
              </td>
              {setData('PAUSE')}
            </tr>,
            <tr key={2}>
              <td>
                <label className='form-label'>
                  {t("Weights")}
                  <span
                    style={{ display: 'block', textTransform: 'lowercase' }}
                  >
                    {generateMetrics(ScoreType[4])}
                  </span>
                </label>
              </td>
              {setData(ScoreType[4])}
            </tr>,
          ]);
        }
        // else default template
        return setTableBody([
          <tr key={0}>
            <td>{generateOptionSelect()}</td>
            {setData('TIME')}
          </tr>,
          <tr key={1}>
            <td>
              <label className='form-label'>
                {t("pause")}
                <span>{generateMetrics(ScoreType[3])}</span>
              </label>
            </td>
            {setData('PAUSE')}
          </tr>,
        ]);
      }
      // ... else return existing set data
      const exisitingSetData = scoreCols.map((col, i) => {
        return i === 0 ? (
          // if first column then set option return option selector & score type
          <tr key={i}>
            <td>{generateOptionSelect()}</td>
            {setData(col)}
          </tr>
        ) : (
            // ...else return label and optional score keys
            <tr key={i}>
              <td>
                <label className='form-label'>
                  {catalog.typesDisplay(col).toLowerCase()}
                  <span>{generateMetrics(col)}</span>
                </label>
              </td>
              {setData(col)}
            </tr>
          );
      });
      return setTableBody(exisitingSetData);
    }
  }, [
    t,
    catalog,
    index,
    exercise,
    exerciseItem,
    tableBody,
    metric,
    generateMetrics,
    Methods,
    isSchedule,
  ]);
  // Generate Results row
  const generateResultsRow = React.useCallback(() => {
    // Generate result columns
    const generateResults = () => {
      const results: JSX.Element[] = [
        <td key={0}>
          <label className='form-label'>
            {t("Results")}
            <span>{generateMetrics(exercise.score_type)}</span>
          </label>
        </td>,
      ];
      if (!exercise.score_count) {
        results.push(
          <td key={1}>
            <input
              className='form-control'
              name='result_vals'
              type='text'
              // min={0}
              onKeyUp={handleInputChange}
              // step={isInt(exercise.score_type) ? 0 : 0.01}
              defaultValue={undefined}
            />
          </td>
        );
        return setResultRow(results);
      }
      for (let i = 1; i <= exercise.score_count; i++) {
        const value = metricConverter(
          exercise.result_vals[i - 1],
          exercise.score_type,
          metric
        );
        results.push(
          <td key={i}>
            <input
              className='form-control'
              name='result_vals'
              type='text'
              // min={0}
              onKeyUp={handleInputChange}
              // step={isInt(exercise.score_type) ? 0 : 0.01}
              defaultValue={value && value !== 0 ? value : undefined}
            />
          </td>
        );
      }
      return setResultRow(results);
    };
    if (!resultRow && exercise.result_vals && isSchedule)
      return generateResults();
  }, [exercise, resultRow, isSchedule, metric, generateMetrics, t]);

  // Effects
  React.useEffect(generateHeadRow, [currentTab]);
  React.useEffect(generateBodyRow, [currentTab]);
  React.useEffect(generateResultsRow, [exercise, resultRow, isSchedule]);
  React.useEffect(showConfirmColModal, [targetCol]);
  React.useEffect(showSetNoteModal, [targetSetNotes]);

  if (!exerciseItem || !catalog) return <></>;

  const exerciseType = exerciseItem.type;
  // Generate select input & options:
  const generateOptions = (close: () => void) => {
    let scoreColumnOptions: any;
    let length;
    const type = exerciseType;
    switch (`${type}`) {
      case ExerciseTypes[1]:
        scoreColumnOptions = CardioScoreCloumns;
        length = Object.keys(CardioScoreCloumns).length / 2;
        break;
      case ExerciseTypes[4]:
        scoreColumnOptions = StrengthScoreColumns;
        length = Object.keys(StrengthScoreColumns).length / 2;
        break;
      default:
        scoreColumnOptions = WorkoutScoreColumns;
        length = Object.keys(WorkoutScoreColumns).length / 2;
        break;
    }
    let options: JSX.Element[] = [
      <li
        key={0}
        value={''}
        style={{ cursor: 'pointer', textTransform: 'capitalize', color: "var(--gray)" }}
        onClick={handleAddOptions}
      >
        {t("SELECT")}
      </li>,
    ];
    const targetTable = document.querySelector(`#set-table-${index}`);
    const targetTableBody = targetTable && targetTable.children[1];
    const targetFormLabels: any =
      targetTableBody && targetTableBody.querySelectorAll('label.form-label');
    for (let i = 0; i < length; i++) {
      const isActive = [...targetFormLabels].find(
        (el: HTMLLabelElement | any) =>
          el.innerText
            .replace(generateMetrics(scoreColumnOptions[i]), '')
            .trim()
            .toUpperCase() === catalog.typesDisplay(scoreColumnOptions[i])
      );
      options = [
        ...options,
        <li
          key={i + 1}
          value={catalog.typesDisplay(scoreColumnOptions[i])}
          style={{ cursor: 'pointer', textTransform: 'capitalize', textAlign: "left" }}
          onClick={handleAddOptions}
        >
          <span className={isActive ? 'checkbox active' : 'checkbox'} style={{ marginRight: 8 }}></span>
          {catalog.typesDisplay(scoreColumnOptions[i].toLowerCase())}
        </li>,
      ];
    }
    options = [
      ...options,
      <li
        key={options.length}
        style={{ cursor: 'pointer', textTransform: 'capitalize' }}
      >
        <button
          type='button'
          className='btn'
          style={{ width: '100%', backgroundColor: "black", color: "white", padding: ".3rem", margin: "10px 0px 0" }}
          onClick={() => {
            handleDone();
            close()
          }}
        >
          {t("Done")}
        </button>
      </li>,
    ];
    return <ul style={{ marginBottom: '0' }}>{options}</ul>;
  };
  // Check if add options is required:
  const requireOptions = () => {
    switch (exerciseType.toString()) {
      case ExerciseTypes[1]:
        return true;
      default:
        return false;
    }
  };

  const handleInputChange = (e:any)=>{
    let stVal = e.target.value 
    var regex = /^[0-9.,]+$/;
    if(regex.test(e.key)){
      if(e.key === '.' ){
        let dotScore = 0;
        for(let i = 0; i < e.target.value.length; i++ ){
          if(e.target.value[i] === '.'){
            dotScore = dotScore +1 ;
          }
        }
        if(dotScore > 1){
          stVal = stVal.slice(0,-1)
          e.target.value = stVal
        }
      }
      if(e.key === ','){ 
        stVal = stVal.slice(0,-1) + "."
        let dotScore = 0;
        for(let i = 0; i < stVal.length; i++ ){
          if(stVal[i] === '.'){
            dotScore = dotScore +1 ;
          }
        }
        if(dotScore > 1){
          stVal = stVal.slice(0,-1)
         return e.target.value = stVal
        }
        return e.target.value = stVal
      }
    }else{
      stVal = stVal.slice(0,-1)
      e.target.value = stVal
    }
  }

  // Generate table heads after add set button click
  const generateTableHeads = () => {
    setGenerateTableCount(1 + generateTableCount);
    const newTableHead = document.createElement('th');
    const newTableSpan = document.createElement('span');
    const newTableIcon = document.createElement('img');
    const newTableBody = document.createElement('td');
    const newTableBodyInput = document.createElement('input');
    const newTableNoteSpan = document.createElement('span');
    const newTableNoteIcon = document.createElement('img');
    const newTableBodyNote = document.createElement('input');

    newTableSpan.className = 'del-icon';
    // @ts-ignore
    newTableSpan.style.float = 'right';
    newTableIcon.src = ic_del;

    newTableBodyInput.className = 'form-control';
    newTableBodyInput.type = 'text';
    newTableBodyInput.autocomplete = 'off';
    newTableBodyInput.id = `newGeneratedInput-${generateTableCount}`;
    // newTableBodyInput.addEventListener('keyup', handleInputChange);
    // newTableBodyInput.oninput = (e:any) => console.log(e);
    // newTableBodyInput.min = '0';
    
    console.log(newTableBodyInput , ' new element')

    newTableNoteSpan.className = 'info-icon';
    newTableNoteIcon.src = ic_info;
    newTableBodyNote.style.display = 'none';
    newTableBodyNote.className = 'form-control';
    newTableBodyNote.type = 'text';
    newTableBodyNote.name = 'notes_sets';

    const targetTable = document.getElementById(
      `set-table-${index}`
      ) as HTMLTableElement | null;
      if (!targetTable) return;
      
    const tableHead = targetTable.children[0]; // <thead/>
    const tableBody = targetTable.children[1]; // <tbody/>
    const tableHeadRow = tableHead.children[0]; // <th/>
    const tableBodyRows = tableBody.children as HTMLCollectionOf<HTMLTableRowElement>; // <tr/>
    const scoreRows = tableBodyRows.length; // Number of scores
    newTableHead.innerHTML = `${tableHeadRow.children.length}`;
    newTableSpan.addEventListener('click', handleRemCol);
    newTableNoteSpan.addEventListener('click', handleSetNotes);
    // Add icon img to span
    newTableSpan.append(newTableIcon);
    newTableNoteSpan.append(newTableNoteIcon);
    // Add new span to th
    newTableHead.append(newTableSpan, newTableNoteSpan);
    // Add new th to table head
    tableHeadRow.append(newTableHead);
    // Generate inputs for each selected option
    for (let i = 0; i < scoreRows; i++) {
      const targetRow = tableBodyRows.item(i) as HTMLTableRowElement;
      newTableBodyInput.value = '';
      if (targetRow && targetRow.cells[targetRow.cells.length - 1]) {
        const prevColInput = targetRow.cells[targetRow.cells.length - 1]
          .firstElementChild as HTMLInputElement | null;
          if (i === 0) {
          const newSelectInput = targetRow.cells[0]
          .firstElementChild as HTMLSelectElement;
          // console.log('val', prevColInput?.id, prevColInput)
          if (prevColInput && prevColInput?.id!=="1") {
            newTableBodyInput.value = prevColInput.value;
          }
          else{
            newTableBodyInput.value = ""
          }
          
          newTableBodyInput.name = newSelectInput.value;
          // newTableBodyInput.step = isInt(newSelectInput.value) ? '1' : '0.01';
          newTableBody.append(newTableBodyInput, newTableBodyNote);
        } else if (/Results/.test(targetRow.innerText.trim())) {
          newTableBodyInput.name = 'result_vals';
          // newTableBodyInput.step = isInt(`${exercise.score_type}`)
          //   ? '1'
          //   : '0.01';
          newTableBody.append(newTableBodyInput);
        } else {
          // console.log('val2', prevColInput?.id, prevColInput)
          if (prevColInput?.value){
             newTableBodyInput.value = prevColInput.value;}
             else{
              newTableBodyInput.value=""
             }
          newTableBodyInput.name = targetRow.innerText.includes("Weights") ? "KG_WEIGHTS" :
          targetRow.innerText.split('(')[0]
            .trim()
            .toUpperCase();
          // newTableBodyInput.step = isInt(newTableBodyInput.name) ? '1' : '0.01';
          newTableBody.append(newTableBodyInput);
        }
        
        targetRow.append(newTableBody.cloneNode(true));
        for (let j = 0; j < newTableBody.children.length; j++) {
          const tableBodyNote = newTableBody.children[j].getAttribute('name');
          if (!tableBodyNote) return;
          if (
            /notes_sets/.test(tableBodyNote) ||
            /result_vals/.test(tableBodyNote)
            )
            newTableBody.removeChild(newTableBody.children[j]);
        }
      }
    }
    const tableContainer = document.getElementById(
      `table-container-${index}`
    ) as HTMLDivElement | null;
    tableContainer &&
      tableContainer.scrollTo({
        left: targetTable.scrollWidth,
        behavior: 'smooth',
      });
      document.querySelector(`#newGeneratedInput-${generateTableCount}`)!.addEventListener('keyup', handleInputChange);
  };
  // Generate table rows
  const generateTableRows = (label: string) => {
    const targetTable = document.getElementById(
      `set-table-${index}`
    ) as HTMLTableElement | null;

    if (!targetTable) return;

    const tableHeadRow = targetTable.children[0]
      .children[0] as HTMLTableRowElement;
    const setNumber = tableHeadRow.children.length;
    const tableBody = targetTable.children[1] as HTMLTableRowElement;

    // Check if entry already exists in the table:
    const targetEntry = [...tableBody.children].find((row, i) => {
      const td = row.firstElementChild as HTMLTableDataCellElement;
      if (!td) return false;
      if (i === 0) {
        const selectInput = td.firstElementChild as HTMLSelectElement;
        if (selectInput && selectInput.value === label) return true;
      }
      const labelElement = td.firstElementChild as HTMLLabelElement;
      if (
        labelElement.innerText
          .replace(generateMetrics(label), '')
          .toUpperCase()
          .trim() === label
      )
        return true;
      return false;
    }) as HTMLTableRowElement | undefined;
    // If entry exists & not first row then remove corresponding row:
    if (targetEntry) {
      if (targetEntry.rowIndex > 1) {
        return targetEntry.remove();
      }
      // Prevent adding duplicate rows
      return alert(`${label.toLowerCase()} ${t("already exists")}`);
    }

    // If entry doesn't exist then generate new table row:
    const newTableBodyRow = document.createElement('tr');
    const newTableBodyRowData1 = document.createElement('td');
    const newTableBodyRowData2 = document.createElement('td');
    const newTableBodyRowDataLabel = document.createElement('label');
    const newTableBodyRowDataSpan = document.createElement('span');
    const newTableBodyRowDataInput = document.createElement('input');

    newTableBodyRowDataLabel.className = 'form-label';
    newTableBodyRowDataLabel.innerText = label.toLowerCase();
    Object.assign(newTableBodyRowDataLabel.style, {
      textTransform: 'capitalize',
      textAlign: 'left',
      width: '100%',
    });
    newTableBodyRowDataSpan.innerText = generateMetrics(label);
    Object.assign(newTableBodyRowDataSpan.style, {
      display: 'block',
      textAlign: 'left',
      width: '100%',
      textTransform: 'lowercase',
    });
    // newTableBodyRowDataLabel.addEventListener('click', handleRemRow);

    newTableBodyRowDataInput.className = 'form-control';
    newTableBodyRowDataInput.name = label;
    newTableBodyRowDataInput.type = 'number';
    newTableBodyRowDataInput.min = '0';
    newTableBodyRowDataInput.step = isInt(label) ? '1' : '0.01';

    newTableBodyRowDataInput.addEventListener('invalid', (e) =>
      console.log(e.currentTarget)
    );

    // Append the span element to the new label
    newTableBodyRowDataLabel.append(newTableBodyRowDataSpan);
    // Append the label element to the new td.
    newTableBodyRowData1.append(newTableBodyRowDataLabel);
    // Append the input element to the new td.
    newTableBodyRowData2.append(newTableBodyRowDataInput);
    // Append the new td to the new tr.
    newTableBodyRow.append(newTableBodyRowData1);
    // Append new inputs according to set number.
    for (let i = 1; i < setNumber; i++) {
      const newTableRowData = newTableBodyRowData2.cloneNode(
        true
      ) as HTMLTableDataCellElement;
      const existingValue =
        exercise.score_vals &&
        exercise.score_vals.find((el) => el.type === label);
      if (existingValue && newTableRowData.children[0])
        newTableRowData.children[0].setAttribute(
          'value',
          JSON.stringify(existingValue.value[i - 1])
        );
      newTableBodyRow.append(newTableRowData);
    }
    // Append the new tr before results row
    if (isSchedule) {
      const resultRow = tableBody.lastChild;
      tableBody.insertBefore(newTableBodyRow, resultRow);
      // Append the new tr to the current table.
    } else {
      tableBody.append(newTableBodyRow);
    }
  };



  // Handle add set click
  const handleAddSet = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    generateTableHeads();
  };
  // Handle options selection
  const handleAddOptions = (e: React.MouseEvent<HTMLLIElement>) => {
    e.preventDefault();
    const label = e.currentTarget.getAttribute('value');
    if (label === 'all') {
      // TODO add select all functionality
    }
    const targetCheckBox = e.currentTarget.firstElementChild;
    if (targetCheckBox) targetCheckBox.classList.toggle('active');
    if (!label || label === '') return;
    let labelArray = [...labelState];
    labelArray.push(label)
    setLabelState(labelArray)
  };
  const handleDone = () => {
    if (!labelState.length || labelState[0] === '') return;
    labelState.forEach((v: string) => {
      generateTableRows(v.toUpperCase());
    })
    setLabelState([])
  }
  return (
    <>
      <div className={`button-group`} style={{ padding: '5px 0px' }}>
        {requireOptions() && (
          <Popup
            trigger={
              <button
                type='button'
                style={{
                  position: 'relative',
                  float: 'left',
                  textTransform: "none",
                  userSelect: 'none',
                  marginTop: 0,
                  marginRight: "10px",
                }}
                className='btn btn-primary'
              >
                {t("Add option")}
              </button>
            }
            arrow={true}
            arrowStyle={{ left: "22%" }}
            position={'bottom center'}
            contentStyle={{
              textAlign: 'left',
              fontSize: 14,
              maxWidth: '140px',
              minWidth: '100px',
              cursor: 'pointer',
              borderRadius: '5px',
              backgroundColor: 'var(--white)',
              color: 'black',
            }}
          >
            {generateOptions}
          </Popup>
        )}

        <button
          type='button'
          style={{ float: 'left', textTransform: "none", marginTop: 0 }}
          className={`btn btn-success ${classes.addSetBtn}`}
          onClick={handleAddSet}
        >
          {t("Add set")}
        </button>
      </div>
      <div id={`table-container-${index}`} className={classes.tableContainer}>
        <Table id={`set-table-${index}`} className={`set-table ${classes.tableToppy}`}>
          <TableHead>{tableHead}</TableHead>
          <TableBody>
            {tableBody}
            {/* {console.log('resultRow', resultRow, tableHead)} */}
            {isSchedule && resultRow &&
              <tr>{resultRow}</tr>
              // :
              // <tr>
              //   <td><label className="form-label">Results<span>(mm.ss)</span></label></td>
              //   <td>
              //     <input
              //       className='form-control'
              //       name='result_vals'
              //       type='number'
              //       min={0}
              //       onKeyUp={handleInputChange}
              //       step={isInt(exercise.score_type) ? 0 : 0.01}
              //       defaultValue={undefined}
              //   />
              //   </td>
              // </tr>
            
            }
          </TableBody>
        </Table>
      </div>
      <ConfirmCol
        show={showConfirmCol}
        onSubmit={confirmRemCol}
        onHide={() => setTargetCol(null)}
        title={t('Remove Column')}
        message={t('Are you sure you want to remove this column?')}
      />
      <Dialog
        fullWidth
        maxWidth='sm'
        open={showSetNotes}
        onClose={() => setTargetSetNotes(null)}
        className={classes.dialog}
      >
        <DialogTitle>
          {t("Set")} {targetSetNotes} {t("Notes")}{' '}
          <Clear onClick={() => setTargetSetNotes(null)} />
        </DialogTitle>

        <DialogContent>
          <form id='set-note' onSubmit={saveSetNotes}>
            <textarea
              name='notes'
              defaultValue={
                targetSetNotes && exercise.notes_sets
                  ? exercise.notes_sets[targetSetNotes - 1]
                  : undefined
              }
              placeholder={t(`Notes for set ${targetSetNotes}`)}
            />
          </form>
        </DialogContent>
        <DialogActions>
          <Button variant='contained' type='submit' form='set-note'>
            {t("Save")}
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}