import React, { Component } from 'react';
import Block from './block.jsx';

class Channel extends Component {
  /** */
  handleScroll(direction, event) {
    event.preventDefault();
    if(window.jQuery) {
      let blocks = $(event.target)
        .closest('.channel')
        .find('.blocks');
      if(direction === 'left') {
        blocks.animate({
          left: '+=250px'
        }, 1000);
      }
      else {
        blocks.animate({
          left: '-=250px'
        }, 1000);
      }
    }
  }

  /** */
  render() {
    let {
      channelDescr,
      channelAka,
      blocks,
      mediumId,
    } = this.props;

    let image = null;
    if(channelAka === 'npo-radio-1') {
      image = 'radio1';
    }
    else if(channelAka === 'npo-radio-2') {
      image = 'radio2';
    }
    else if(channelAka === 'npo-3fm') {
      image = 'radio3';
    }
    else if(channelAka === 'npo-radio-4') {
      image = 'radio4';
    }
    else if(channelAka === 'npo-radio-5') {
      image = 'radio5';
    }
    else if(channelAka === 'npo-radio-6') {
      image = 'radio6';
    }
    else if(channelAka === 'npo1') {
      image = 'televisie1';
    }
    else if(channelAka === 'npo2') {
      image = 'televisie2';
    }
    else if(channelAka === 'npo3') {
      image = 'televisie3';
    }
    else {
      image = 'npo';
    }

    let scrollLinkLeft = (
    <div className="scrollLinkLeft">
      <div className="scrollLink">
        <a href="javascript:void(0);" onClick={this.handleScroll.bind(this, 'left')}>&lt;</a>
      </div>
    </div>);

    let scrollLinkRight = (
    <div className="scrollLinkRight">
      <div className="scrollLink">
        <a href="javascript:void(0);" onClick={this.handleScroll.bind(this, 'right')}>&gt;</a>
      </div>
    </div>);

    return (
      <div ref="channel" className={`${channelAka} channel`}>
        <div className="channelIcon">
          <img src={`/Images/logos/small/${image}.png`} width="80" alt={channelDescr} />
          {scrollLinkLeft}
        </div>
        <div className="blocksContainer">
          <div ref="blocks" className="blocks">
            {blocks.map((b) => (<Block key={b.breakId} mediumId={mediumId} {...b} />))}
          </div>
          {scrollLinkRight}
        </div>
      </div>
      );
  }
}

export default Channel;