import 'react-select/dist/react-select.css';
import * as TicketsActions from '../../actions/tickets';
import React from 'react';
import { connect } from 'react-redux';

const statuses = [
  'Completed',
  'In Progress',
  'Open',
  'New',
  'Canceled',
];

const Icon = ({ pending }) => {
  // No response yet
  if (pending.inProgress) {
    return <span className="glyphicon glyphicon-refresh" aria-hidden="true"></span>;
  }

  if (pending.response) {
    if (pending.response.status === 200) {
      return <span className="glyphicon glyphicon-ok" aria-hidden="true"></span>;
    }

    if (pending.response.status === 400) {
      return <span className="glyphicon glyphicon-remove" aria-hidden="true"></span>;
    }
  }

  return null;
};


const UpdateStatus = ({ 
  dispatch,
  pending,
  projectId,
  ticket,
  value,
}) => {   
  const updateStatus = (status) => {
    dispatch(TicketsActions.updateStatus({ params: { ticket, status, projectId }}));
  };

  const isPending = pending.find(item => {
    return item.params.ticket === ticket;
  });

  return (
    <div style={{ display: 'flex' }}>
      <select 
        disabled={isPending && isPending.inProgress}
        onChange={e => updateStatus(e.target.value)}
        value={value}
      >
        {statuses.map(status => (
          <option value={status} key={status}>{status}</option>
        ))}
      </select>
      {isPending && <Icon pending={isPending} /> }
    </div>
  )
};

const mapStateToProps = state => ({
  pending: state.tickets.pending,
});

export default connect(mapStateToProps)(UpdateStatus);

@@ -188,67 +188,195 @@
 %0A  '
-Completed',%0A  'In Progress',%0A  'Open',%0A  'New',%0A  'Canceled
+Assigned',%0A  'Canceled',%0A  'Closed',%0A  'Completed',%0A  'Failed QA',%0A  'In Progress',%0A  'Move to Next Sprint',%0A  'New',%0A  'Pending Code Review',%0A  'Ready for QA',%0A  'Waiting on parts/repair
 ',%0A%5D

Add statuses