'use strict';

const React = require('react');
const moment = require('moment');
const PropTypes = require('prop-types');

const Layout = require('./layout.jsx');

const Home = ({ releases }) => (
    <Layout>
        <ul className="scenes">
            {releases.map(release => (
                <li key={release.id} className="scene">
                    <span
                        className="scene-banner"
                    >
                        <span className="scene-details">
                            <a
                                href={`/site/${release.site.id}`}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="scene-site site-link"
                                title={release.network.name}
                            >
                                {release.site.name}
                            </a>

                            <a
                                href={release.url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="scene-date"
                            >
                                {moment(release.date).format('MMM D, YYYY')}
                            </a>
                        </span>

                        <a
                            href={`/scene/${release.id}`}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="scene-row scene-link"
                        >
                            <img
                                src={`/${release.site.id}/${release.id}/0.jpg`}
                                alt={release.id}
                                className="scene-thumbnail"
                            />
                        </a>
                    </span>

                    <div className="scene-info">
                        <a
                            href={`/scene/${release.id}`}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="scene-row scene-link"
                        >
                            <h2 className="scene-title">{release.title}</h2>
                        </a>

                        <span className="scene-row">
                            <ul className="scene-actors nolist">
                                {release.actors.map(actor => (
                                    <li
                                        key={actor.id}
                                        className="scene-actor"
                                    >
                                        <a
                                            href={`/actor/${actor.id}`}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            className="actor-link"
                                        >
                                            {actor.name}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </span>

                        <span
                            title={release.tags.map(tag => tag.tag).join(', ')}
                            className="scene-row"
                        >
                            <ul className="scene-tags nolist">
                                {release.tags.map(tag => (
                                    <li
                                        key={tag.tag}
                                        className="scene-tag"
                                    >
                                        <a
                                            href={`/tag/${tag.tag}`}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            className="tag-link"
                                        >
                                            {tag.tag}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </span>
                    </div>
                </li>
            ))}
        </ul>
    </Layout>
);

Home.propTypes = {
    releases: PropTypes.arrayOf(PropTypes.object),
};

Home.defaultProps = {
    releases: [],
};

module.exports = Home;