import React, { Component } from 'react';
import { show } from 'actions/menu';
import { active } from 'actions/file';
import { MENU_WIDTH } from './menu';
import store from 'store';
import { humanSize } from 'utils';

const MENU_TOP_SPACE = 20;

export default class File extends Component {
  constructor() {
    super();
  }

  render() {
    let checkId = `file-${this.props.index}`;

    let input, label;
    if (this.props.selectView) {
      input = <input type='checkbox' id={checkId} defaultChecked={this.props.selected} readOnly />;
      label = <label htmlFor={checkId}></label>;
    }

    let clickHandler = this.props.selectView ? this.select.bind(this)
                                             : null;

    return (
      <div className='file' ref='container'
           onClick={clickHandler}
           onContextMenu={this.contextMenu.bind(this)}>

        {input}
        {label}

        <i></i>
        <p>{this.props.name}</p>
        <span>{humanSize(this.props.size)}</span>
      </div>
    );
  }

  contextMenu(e) {
    e.preventDefault();

    let rect = React.findDOMNode(this.refs.container).getBoundingClientRect();
    let {x, y, width, height} = rect;

    let left = x + width / 2 - MENU_WIDTH / 2,
        top  = y + height / 2 + MENU_TOP_SPACE;
    store.dispatch(show('fileMenu', {style: {left, top}}));
    store.dispatch(active(this.props.index));
  }

  select() {
    let current = (store.getState().get('activeFile') || []).slice(0);
    let index = this.props.index;

    if (current.indexOf(index) > -1) {
      current.splice(current.indexOf(index), 1);
    } else {
      current.push(index)
    }
    store.dispatch(active(current));
  }
}