import React from 'react';
import FlagButton from './FlagButton';

import t from 'coral-framework/services/i18n';
import { username, comment } from '../helpers/flagReasons';

const FlagComment = props => (
  <FlagButton {...props} getPopupMenu={getPopupMenu} />
);

const getPopupMenu = [
  () => {
    return {
      header: t('step_1_header'),
      options: [
        { val: 'COMMENTS', text: t('flag_comment') },
        { val: 'USERS', text: t('flag_username') },
      ],
      button: t('continue'),
      sets: 'itemType',
    };
  },
  itemType => {
    const options =
      itemType === 'COMMENTS'
        ? [
            { val: comment.offensive, text: t('comment_offensive') },
            { val: comment.spam, text: t('marketing') },
            { val: comment.noagree, text: t('no_agree_comment') },
            { val: comment.other, text: t('other') },
          ]
        : [
            { val: username.offensive, text: t('username_offensive') },
            { val: username.nolike, text: t('no_like_username') },
            { val: username.impersonating, text: t('user_impersonating') },
            { val: username.spam, text: t('marketing') },
            { val: username.other, text: t('other') },
          ];
    return {
      header: t('step_2_header'),
      options,
      button: t('continue'),
      sets: 'reason',
    };
  },
  () => {
    return {
      header: t('step_3_header'),
      text: t('thank_you'),
      button: t('done'),
    };
  },
];

export default FlagComment;