// Libs
// -----------------------------------------------------------------------------
import React, { FC, useState } from 'react';

// App
// -----------------------------------------------------------------------------
import styles from './EllipsisWithToggle.module.scss';

// Props
// -----------------------------------------------------------------------------
type EllipsisWithToggleProps = {
  text: string;
  expandLabel: string;
  collapseLabel: string;
  maxWidth: number;
};

/**
 * Компонент для блока текста разворачиваемого из одной строки и обратно.
 */
export const EllipsisWithToggle: FC<EllipsisWithToggleProps> = ({
  text,
  expandLabel,
  collapseLabel,
  maxWidth,
}) => {
  const [isExpanded, setIsExpanded] = useState<boolean>(false);

  return (
    <div
      className={styles['container']}
      data-expanded={isExpanded}
      style={{ maxWidth }}
    >
      <div
        className={styles['content']}
        data-expanded={isExpanded}
        title={!isExpanded ? text : undefined}
      >
        {text}
      </div>

      <span
        className={styles['toggler']}
        data-expanded={isExpanded}
        onClick={() => {
          setIsExpanded((prev) => !prev);
        }}
      >
        {!isExpanded ? expandLabel : collapseLabel}
      </span>
    </div>
  );
};
