import React from 'react';
import cn from 'classnames';
import PropTypes from 'prop-types';
import { Dialog } from 'coral-ui';
import styles from './FeaturedDialog.css';
import { t } from 'plugin-api/beta/client/services';
import Button from 'coral-ui/components/Button';

const FeaturedDialog = ({
  showFeaturedDialog,
  closeFeaturedDialog,
  postTag,
}) => {
  const onPerform = async () => {
    await postTag();
    await closeFeaturedDialog();
  };

  return (
    <Dialog
      className={cn(styles.dialog, 'talk-featured-dialog')}
      id="talkFeaturedDialog"
      open={showFeaturedDialog}
      onCancel={closeFeaturedDialog}
    >
      <span className={styles.close} onClick={closeFeaturedDialog}>
        ×
      </span>
      <h2 className={styles.header}>
        {t('talk-plugin-featured-comments.feature_comment')}
      </h2>
      <div className={styles.content}>
        {t('talk-plugin-featured-comments.are_you_sure')}
      </div>
      <div className={styles.buttons}>
        <Button
          className={cn(styles.cancel, 'talk-featured-dialog-button-cancel')}
          cStyle="cancel"
          onClick={closeFeaturedDialog}
          raised
        >
          {t('talk-plugin-featured-comments.cancel')}
        </Button>
        <Button
          className={cn(styles.perform, 'talk-featured-dialog-button-confirm')}
          cStyle="black"
          onClick={onPerform}
          raised
        >
          {t('talk-plugin-featured-comments.yes_feature_comment')}
        </Button>
      </div>
    </Dialog>
  );
};

FeaturedDialog.propTypes = {
  showFeaturedDialog: PropTypes.bool.isRequired,
  closeFeaturedDialog: PropTypes.func.isRequired,
};

export default FeaturedDialog;