import React from 'react';
import { Cell } from 'fixed-data-table';
import { SortTypes } from './CalendarTable.jsx';

export default class CalendarCellHeader extends React.Component {

  render() {
    const { isColFrozen, freezeColumn, changeSort,
      listName, sortDir } = this.props;

    let sortSign = '';
    if (sortDir) {
      if (sortDir === SortTypes.DESC) {
        sortSign = '↓';
      } else {
        sortSign = '↑';
      }
      sortSign = sortSign + ' ';
    }

    // TODO: change the fontzzz
    return (
      <Cell>
        <div onClick={() => changeSort()}>
          {isColFrozen && (
            <a onClick={() => freezeColumn()}>
              {'* '}
            </a>
          )} {listName} {sortSign}
        </div>
      </Cell>
    );
  }
}

CalendarCellHeader.propTypes = {
  isColFrozen: React.PropTypes.bool,
  sortDir: React.PropTypes.string,
  listName: React.PropTypes.string,
  freezeColumn: React.PropTypes.func,
  changeSort: React.PropTypes.func,
};