import React, { useState } from 'react';

interface Props {
  /**
   * The text shown on the button
   */
  buttonText?: string;
  /**
   * The text shown on the button when all is shown
   */
  lessButtonText?: string;
  /**
   * Style of the button
   */
  buttonTheme?: string;
  /**
   * the value to show in the div
   */
  children: string;
  /**
   * How many characters until the read more link shows
   */
  threshold?: number;
  /**
   * Style of the  children
   */
  theme?: string;
}

const SeeMore = ({
  buttonText = ' Read More...',
  lessButtonText = ' Read Less...',
  buttonTheme = 'font--14 font--dark border--none bg--light block text--left padding--none',
  children = '<div>Default</div>',
  theme = 'font--14 font--dark',
  threshold = 255,
}: Props) => {
  const [hide, hideSetter] = useState(threshold);

  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: children }} style={{ maxHeight: hide !== -1 ? threshold : 'inherit', overflow: 'hidden' }} className={theme} />

      {hide !== -1 && (
        <button type="button" onClick={() => hideSetter(-1)} className={buttonTheme}>
          {buttonText}
        </button>
      )}

      {hide === -1 && (
        <button type="button" onClick={() => hideSetter(threshold)} className={buttonTheme}>
          {lessButtonText}
        </button>
      )}
    </div>
  );
};

export default SeeMore;