/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import {JSX, useEffect, useRef, useState} from 'react';
import {faEye, faEyeSlash} from '@fortawesome/free-regular-svg-icons';

import {Link} from 'components/ui';
import IconButton from 'components/buttons/icon-button';
import {CopyIconButton} from 'components/buttons/copy-icon-button';
import NewTabLink from 'components/new-tab-link';

import {RestrictedDiv, MeasuringBlock, TruncatedBlock} from './style';

export interface IRestrictedText {
  text: string;
  hasViewOption?: boolean;
  hasCopyOption?: boolean;
  isLink?: boolean;
  linkValue?: string;
  linkClassName?: string;
  index?: number;
  fullWidth?: boolean;
}

const iconButtonsWidth = 48;

export const RestrictedText = ({
  text,
  hasViewOption = true,
  hasCopyOption = true,
  isLink = false,
  linkValue,
  linkClassName = '',
  fullWidth = true
}: IRestrictedText): JSX.Element => {
  const restrictedDivRef = useRef(null);
  const measuringRef = useRef(null);
  const [showValue, setShowValue] = useState(false);
  const [showEyeIcon, setShowEyeIcon] = useState(hasViewOption);

  useEffect(() => {
    const handleResize = () => {
      handleShowEyeIcon();
    };

    window.addEventListener('resize', handleResize);

    handleShowEyeIcon();

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  const handleShowEyeIcon = () => {
    if (!restrictedDivRef.current || !measuringRef.current) {
      return;
    }

    const containerWidth = restrictedDivRef.current.clientWidth - iconButtonsWidth;
    const fullTextWidth = measuringRef.current.getBoundingClientRect()?.width;

    setShowEyeIcon(fullTextWidth > containerWidth);
  };

  const handleShowValueChange = () => setShowValue(!showValue);
  const CurrentTextView = (): JSX.Element => {
    if (isLink && !linkValue) {
      return (
        <NewTabLink
          link={text}
          className={linkClassName}
          text={text}
        />
      );
    }

    if (isLink && linkValue) {
      return (
        <Link
          to={linkValue}
          className={linkClassName}
        >
          {text}
        </Link>
      );
    }

    return <>{text}</>;
  };

  return (
    <RestrictedDiv ref={restrictedDivRef} className={`testId-truncatedDetails ${fullWidth && 'full-width'}`}>
      <MeasuringBlock ref={measuringRef}>{text}</MeasuringBlock>
      <TruncatedBlock className={showValue ? '' : 'truncated'}>
        <CurrentTextView />
      </TruncatedBlock>
      <div>
        {showEyeIcon && (
          <IconButton
            onClick={handleShowValueChange}
            tooltipText={showValue ? 'Hide' : 'Show'}
            icon={showValue ? faEyeSlash : faEye}
            className={`${isLink ? 'testId-permalink' : ''} testId-viewDetails`}
          />
        )}
        {hasCopyOption && (
          <CopyIconButton text={text} displayText={false} className="testId-copyDetails" />
        )}
      </div>
    </RestrictedDiv>
  );
};

export default RestrictedText;