/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import React from 'react';
import * as styled from 'styled-components';
import {theme} from 'components/shared/theme';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faBackward, faFastBackward, faFastForward, faForward} from '@fortawesome/free-solid-svg-icons';

const {colors, spacing} = theme;
const ScrollButton = styled.default.button`
  border: none;
  width: 25px;
  height: 25px;
  color: ${colors.white};
  margin: ${spacing.xxSmall} 0;
  background-color: ${colors.gray600};
  cursor: pointer;
  transform: rotate(90deg)
`;
const TwinButtons = styled.default.div`
  display: flex;
  position: absolute;
  right: 64px;
  bottom: 50px;
  flex-direction: column;
`;

export const ScrollButtons = ({current}: {current: HTMLDivElement}): React.JSX.Element => {
  const getScrollStep = (current: HTMLDivElement) => {
    const tableViewHeight = current.offsetHeight;

    return tableViewHeight / 2;
  };

  const scrollToTop = () => {
    if (current) {
      current.scrollTop = 0;
    }
  };

  const scrollTop = () => {
    if (current) {
      current.scrollTop = current.scrollTop - getScrollStep(current);
    }
  };

  const scrollBottom = () => {
    if (current) {
      current.scrollTop = current.scrollTop + getScrollStep(current);
    }
  };

  const scrollToBottom = () => {
    if (current) {
      current.scrollTop = current.scrollHeight;
    }
  };

  return (
    <TwinButtons>
      <ScrollButton onClick={scrollToTop}>
        <FontAwesomeIcon icon={faFastBackward} />
      </ScrollButton>
      <ScrollButton onClick={scrollTop}>
        <FontAwesomeIcon icon={faBackward} />
      </ScrollButton>
      <ScrollButton onClick={scrollBottom}>
        <FontAwesomeIcon icon={faForward} />
      </ScrollButton>
      <ScrollButton onClick={scrollToBottom}>
        <FontAwesomeIcon icon={faFastForward} />
      </ScrollButton>
    </TwinButtons>
  );
};
