import React from 'react';
import { Link } from 'react-router-dom';

import '../../style/module/comic.card.css';

export default class ComicCardCol2 extends React.Component {
  static defaultProps = {
    topicIcon: require('../../static/section/tangerine.svg'),
    comicList: [],
    topicTitle: 'marvel comic topic',
  }

  componentDidMount() {
    const { content } = this;
    const covers = content.querySelectorAll('.cover');
    for (const c of covers) {
      c.style.height = `${c.clientWidth / 1.618}px`;
    }
  }

  render() {
    const { comicList, topicTitle, topicIcon } = this.props;
    return (
      <section className="section">
        <div className="header">
          <h2>
            <img className="topic-icon" src={topicIcon} alt={topicTitle} />
            {topicTitle}
          </h2>
          <a className="more" href="/" >
            <i className="fa fa-angle-right" />
          </a>
        </div>
        <div className="pure-g" ref={(c) => { this.content = c; }}>
          {comicList.map((comic) => {
            const coverStyle = {
              backgroundImage: `url(${comic.thumbnail})`,
            };
            return (
              <Link className="pure-u-11-24 comic-card" to={`/comic/${comic.id}`} key={comic.id}>
                <div className="cover" style={coverStyle} />
                <div className="content">
                  <h1 className="ellipsis">{comic.title}</h1>
                </div>
              </Link>
            );
          })}
        </div>
      </section>
    );
  }
}
