import React, { PropTypes } from 'react';
import CSSModules from 'react-css-modules';
import { flatMap } from 'lodash';
import { DataGrid, Row, Cell } from '../data-grid';
import { Age, Draw, OrdinalNumber, Price, Runner, Selection, Spotlight, JockeyShirt } from '../cell';
import styles from './Racecard.scss';

const Racecard = ({
  selections,
  onSelectionToggle,
  onGuideDiscard,
  onExpand,
  onGuideClose
}) => (
  <DataGrid styleName="racecard">
    <tbody>
      <tr styleName="racecard-header">
        <td styleName="racecard__heading" style={{ width: '30px' }}>No.</td>
        <td styleName="racecard__heading" style={{ width: '25px' }}>Draw</td>
        <td styleName="racecard__heading" style={{ width: '45px' }}/>
        <td styleName="racecard__heading">Selection</td>
        <td styleName="racecard__heading racecard__heading--centered" style={{ width: '80px' }}>
          <div>Age,</div>
          <div>weight</div>
        </td>
        <td styleName="racecard__heading--centered" style={{ width: '112px' }}>RP</td>
        <td styleName="racecard__heading racecard__heading--centered" style={{ width: '55px' }}>
          <div>Guide</div>
          <div>price</div>
        </td>
        <td styleName="racecard__heading racecard__heading--centered" style={{ width: '58px' }}/>
      </tr>
      {flatMap(selections, ({
        id,
        number,
        draw,
        shirtNumber,
        silk,
        daysSinceRun,
        name,
        jockey,
        trainer,
        age,
        weight,
        rp,
        odds,
        overview,
        selected,
        guided,
        expanded,
        scratched
      }) => [(
        <Row data-test="selection" key={id}>
          <Cell styleName="racecard__cell" align="top"  width="30">
            <OrdinalNumber number={number} draw={draw} scratched={scratched} />
          </Cell>
          <Cell styleName="racecard__cell racecard__cell--tablet" align="top" width="25">
            <Draw draw={draw} scratched={scratched} />
          </Cell>
          <Cell styleName="racecard__cell" align="top" width="55">
            <JockeyShirt silk={silk} number={shirtNumber} scratched={scratched} />
          </Cell>
          <Cell>
            <Runner
              id={id}
              expanded={expanded}
              daysSinceRun={daysSinceRun}
              name={name}
              description={overview}
              jockey={jockey}
              trainer={trainer}
              onExpand={onExpand}
              scratched={scratched}
            />
          </Cell>
          <Cell styleName="racecard__cell--tablet" width="80">
            <Age age={age} weight={weight} scratched={scratched} />
          </Cell>
          <Cell styleName="racecard__cell--tablet" width="112">
            <Spotlight
              id={id}
              rating={rp}
              description={overview}
              onExpand={onExpand}
              scratched={scratched}
            />
          </Cell>
          <Cell styleName="racecard__odds-column" width="55">
            <Price odds={scratched ? 'Non runner' : odds} scratched={scratched} />
          </Cell>
          <Cell width="58">
            <Selection
              id={id}
              guided={guided}
              selected={selected}
              onGuideClose={onGuideClose}
              onSelectionToggle={onSelectionToggle}
              onGuideDiscard={onGuideDiscard}
              disabled={scratched}
            />
          </Cell>
        </Row>
      ), expanded && (
        <Row key={`${id}_expanded`}>
          <Cell styleName="racecard__overview" colSpan="8">{overview}</Cell>
        </Row>
      )])}
    </tbody>
  </DataGrid>
);

Racecard.propTypes = {
  selections: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number,
    number: PropTypes.number,
    draw: PropTypes.number,
    shirtNumber: PropTypes.string,
    name: PropTypes.string,
    jockey: PropTypes.string,
    trainer: PropTypes.string,
    age: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    weight: PropTypes.string,
    rp: PropTypes.string,
    previousOdds: PropTypes.string,
    odds: PropTypes.string,
    silk: PropTypes.string.isRequired,
    daysSinceRun: PropTypes.number,
    overview: PropTypes.string,
    selected: PropTypes.bool,
    guided: PropTypes.bool,
    expanded: PropTypes.bool,
    scratched: PropTypes.bool
  })),
  onSelectionToggle: PropTypes.func,
  onGuideDiscard: PropTypes.func,
  onExpand: PropTypes.func,
  onGuideClose: PropTypes.func
};

export default CSSModules(
  Racecard,
  styles,
  { allowMultiple: true }
);