'use strict';

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

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

const Release = ({ release, thumbnails }) => (
    <Layout title={release.title}>
        <div>
            <h2>{release.title}</h2>
            <p>{moment(release.date).format('MMMM DD, YYYY')}</p>
            <p>{release.shootId}</p>

            <h3>
                <a
                    href={`/site/${release.site.id}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    title={release.network.name}
                >
                    {release.site.name}
                </a>
            </h3>

            <p>{release.network.name}</p>

            <p>
                <a
                    href={release.url}
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    View on {new URL(release.site.url).host.replace('www.', '')}
                </a>
            </p>

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

            <p>{release.description}</p>

            <ul>
                {release.tags.map(tag => (
                    <li key={tag.tag}>
                        <a
                            href={`/tag/${tag.tag}`}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="actor-link"
                        >
                            {tag.tag}
                        </a>
                    </li>
                ))}
            </ul>

            {thumbnails.map((thumbnail, index) => (
                <img
                    key={thumbnail}
                    src={`/${release.site.id}/${release.id}/${thumbnail}`}
                    alt={`Thumbnail ${index}`}
                    className="thumbnail"
                />
            ))}
        </div>
    </Layout>
);

Release.propTypes = {
    release: PropTypes.object,
    thumbnails: PropTypes.arrayOf(PropTypes.string),
};

Release.defaultProps = {
    release: null,
    thumbnails: [],
};

module.exports = Release;