import React, { useState, Fragment, ReactElement } from 'react';
import './Expandable.scss';

interface Props {
  valid?: boolean;
  name?: string;
  openContent?: () => void;
}

export const Expandable = (props: Props): ReactElement<HTMLDivElement> => {
  const [state, setState] = useState('closed');

  const checkmark =
    props.valid && state == 'closed' ? (
      <i className="mo-display-icon-checkmark" />
    ) : null;

  return (
    <div className="mo-display-expandable">
      <div className="mo-display-expandable__top">
        {props.name}
        {checkmark}
      </div>
      <hr />
      {state === 'closed' && (
        <Fragment>
          <div className="mo-display-expandable__bottom">
            <div className="mo-display-expandable__bottom-content">
              closedContent
            </div>
            <div className="edit-button" onClick={(): void => setState('open')}>
              Edit
            </div>
          </div>
        </Fragment>
      )}
      {state === 'open' && props.openContent}
    </div>
  );
};