// 3rd-party libs
import React, { useState } from 'react';
import PropTypes from 'prop-types';

// Components
import { Avatar } from '@ui/components';
import { TutorialProp } from '@ui/compositions/TutorialModal/proptypes/tutorials';

// Internals
let classes = {};
/* istanbul ignore next */
if (typeof window !== 'undefined' || typeof _COMPILED_ === 'undefined') classes = require('./style.module.scss');

export default function TutorialTile({ tutorial, openTutorial, status, children }) {
  const { backgroundColor, emoji, title } = tutorial;
  const [displayCallout, toggleCallout] = useState(true);

  return (
    <div
      className={classes.TutorialTile}
      onClick={() => openTutorial({ tutorial })}
      onKeyDown={() => openTutorial({ tutorial })}
      role="button"
      tabIndex={0}
    >
      <div className={classes['TutorialTile-Body']}>
        {emoji && <Avatar hexColor={backgroundColor}>{emoji}</Avatar>}
        <div className={classes['TutorialTile-Body-Text']}>
          <div className={classes['TutorialTile-Body-Text-Title']}>
            {title}
            {status && <div className={classes['TutorialTile-Status']}>{status}</div>}
          </div>
          <div className={classes['TutorialTile-Body-Text-Action']}>
            Start Tutorial
            <i className={[`${classes['TutorialTile-Body-Text-Action-Arrow']} fa fa-chevron-right`].join(' ')} />
          </div>
        </div>
      </div>
      {displayCallout && children && (
        <div
          className={classes['TutorialTile-Notification']}
          onClick={e => e.stopPropagation()}
          onKeyDown={e => e.stopPropagation()}
          role="button"
          tabIndex={-1}
        >
          {children}
          <button
            className={classes['TutorialTile-Notification-Dismiss']}
            onClick={() => toggleCallout(false)}
            type="button"
          >
            Dismiss
          </button>
        </div>
      )}
    </div>
  );
}

TutorialTile.propTypes = {
  openTutorial: PropTypes.func,
  status: PropTypes.string,
  tutorial: TutorialProp,
};

TutorialTile.defaultProps = {
  openTutorial: () => {},
};
