import React from 'react';
import PropTypes from 'prop-types';

import './Todo.css';

const ARCHIVE_SHORTCUT_KEY_CODE = 65; // 'a'

const onArchiveShortcutPress = (handler, event) => {
  if(event.keyCode === ARCHIVE_SHORTCUT_KEY_CODE) handler(event);
};

const Todo = ({text, completed, onClick, onDeleteClick}) => (
  <li className={completed ? 'TodoList_Item-completed' : 'TodoList_Item'}>
    <span
      className={completed ? 'TodoList_Text-completed' : 'TodoList_Text'}
      onClick={onClick}
      onKeyDown={onArchiveShortcutPress.bind(null, onClick)}
      role='button'
      tabIndex='0'
    >
      {text}
    </span>
    <button className='Todo_Delete' onClick={onDeleteClick} style={{color: 'red'}}>
      <svg width="26" height="26" viewBox="0 0 1024 1024">
        <g style={{fill: '#b3b3b3'}}>
          <path d="M640.35,91.169H536.971V23.991C536.971,10.469,526.064,0,512.543,0c-1.312,0-2.187,0.438-2.614,0.875
            C509.491,0.438,508.616,0,508.179,0H265.212h-1.74h-1.75c-13.521,0-23.99,10.469-23.99,23.991v67.179H133.916
            c-29.667,0-52.783,23.116-52.783,52.783v38.387v47.981h45.803v491.6c0,29.668,22.679,52.346,52.346,52.346h415.703
            c-3.052,0-4.364-1.303-4.364-4.363V230.32h424.431V721.922z M644.715,182.339H129.551v-38.387c0-3.053,1.312-4.802,4.364-4.802
            H640.35c3.053,0,4.365,1.749,4.365,4.802V182.339z"/>
          <rect x="475.031" y="286.593" width="48.418" height="396.942"/>
          <rect x="363.361" y="286.593" width="48.418" height="396.942"/>
          <rect x="251.69" y="286.593" width="48.418" height="396.942"/>
        </g>
      </svg>
    </button>
  </li>
);

Todo.propTypes = {
  text: PropTypes.string.isRequired,
  completed: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
  onDeleteClick: PropTypes.func.isRequired
};

export default Todo;
            c29.667,0,52.782-22.678,52.782-52.346v-491.6h45.366v-47.981v-38.387C693.133,114.286,670.008,91.169,640.35,91.169z
             M285.713,47.981h202.84v43.188h-202.84V47.981z M599.349,721.922c0,3.061-1.312,4.363-4.364,4.363H179.282