import React from 'react';
import PropTypes from 'prop-types';
import { Dialog, Icon } from '@doodle/components';
import InfoIcon from '@doodle/components/visuals/Icon/svg/ic_info.svg';

import './PropNameWithDescription.css';

const PropNameWithDescription = ({
  propName,
  dialogId,
  description,
  isDialogVisible,
  handleDialogShow,
  handleDialogHide,
}) => (
  <div className="PropWithDescription">
    <span className="PropWithDescription__propName">{propName}</span>
    <Icon
      className="PropWithDescription__info-icon"
      icon={InfoIcon}
      data-source={dialogId}
      onMouseEnter={handleDialogShow}
    />
    <Dialog
      className="PropWithDescription__dialog"
      title="Dialog with prop description"
      id={dialogId}
      isDismissible
      isVisible={isDialogVisible}
      onDismiss={handleDialogHide}
      verticalAlign="middle"
      horizontalAlign="right"
    >
      <span className="PropWithDescription__description">{description}</span>
    </Dialog>
  </div>
);

PropNameWithDescription.propTypes = {
  propName: PropTypes.string.isRequired,
  dialogId: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  isDialogVisible: PropTypes.bool.isRequired,
  handleDialogShow: PropTypes.func.isRequired,
  handleDialogHide: PropTypes.func.isRequired,
};

export default PropNameWithDescription;