import React, { PropTypes } from 'react';

import IsAllowed from 'components/IsAllowed/IsAllowed';
import ActionButton from './ActionButton';

import {
  EDIT,
  REVIEW,
  APPROVE,
  DRAFT,
  SENT_FOR_REVIEW,
  WAITING_FOR_APPROVAL,
  APPROVED
} from '../../../../config/constants';

const ActionButtons = ({ cancelEdit, documentState, saveDraft, changeStatus, setDocumentState, status }) => {
  const editMode = documentState === 'edit';
  const editable = (
    <IsAllowed to={EDIT}>
      <span>
        <ActionButton
          className='btn-sm pull-right'
          type={editMode ? 'primary' : 'default'}
          action={editMode ? saveDraft : () => changeStatus(SENT_FOR_REVIEW)}
          label={editMode ? 'Tallenna luonnos' : 'Lähetä tarkastettavaksi'}
        />
        <ActionButton
          className='btn-sm pull-right'
          type={editMode ? 'danger' : 'primary'}
          action={editMode ? cancelEdit : () => setDocumentState('edit')}
          label={editMode ? 'Peruuta muokkaus' : 'Muokkaustila'}
        />
        {editMode &&
        <span className='fa fa-asterisk required-asterisk required-legend'> = Pakollinen tieto</span>
        }
      </span>
    </IsAllowed>
  );

  const reviewable = (
    <IsAllowed to={REVIEW}>
      <span>
        <ActionButton
          className='btn-sm pull-right'
          type='primary'
          action={() => changeStatus(WAITING_FOR_APPROVAL)}
          label={'Lähetä hyväksyttäväksi'}
        />
        <ActionButton
          className='btn-sm pull-right'
          type='danger'
          action={() => changeStatus(DRAFT)}
          label={'Palauta luonnokseksi'}
        />
      </span>
    </IsAllowed>
  );

  const approvable = (
    <IsAllowed to={APPROVE}>
      <span>
        <ActionButton
          className='btn-sm pull-right'
          type='primary'
          action={() => changeStatus(APPROVED)}
          label={'Hyväksy'}
        />
        <ActionButton
          className='btn-sm pull-right'
          type='danger'
          action={() => changeStatus(DRAFT)}
          label={'Palauta luonnokseksi'}
        />
      </span>
    </IsAllowed>
  );

  return (
    <div>
      { status === DRAFT && editable }
      { status === SENT_FOR_REVIEW && reviewable }
      { status === WAITING_FOR_APPROVAL && approvable }
    </div>
  );
};

ActionButtons.propTypes = {
  cancelEdit: PropTypes.func,
  changeStatus: PropTypes.func,
  documentState: PropTypes.string,
  saveDraft: PropTypes.func,
  setDocumentState: PropTypes.func,
  status: PropTypes.string.isRequired
};

export default ActionButtons;

@@ -432,16 +432,17 @@
 'edit';%0A
+%0A
   const 
@@ -2145,16 +2145,275 @@
 %3E%0A  );%0A%0A
+  const draftable = (%0A    %3CIsAllowed to=%7BEDIT%7D%3E%0A      %3CActionButton%0A        className='btn-sm pull-right'%0A        type='primary'%0A        icon='fa-file-o'%0A        action=%7B() =%3E console.log('test')%7D%0A        label=%7B'Luo luonnos'%7D%0A      /%3E%0A    %3C/IsAllowed%3E%0A  );%0A%0A
   return
@@ -2567,24 +2567,67 @@
 pprovable %7D%0A
+      %7B status === APPROVED && draftable %7D%0A
     %3C/div%3E%0A 

Add "Create a draft" button if TOS is in state Approved