(function() {
  'use strict';

  const e = React.createElement;

  function timeAge(time) {
    const now = new Date().getTime() / 1000;
    const minutes = (now - time) / 60;

    if (minutes < 60) {
      return Math.round(minutes) + ' minutes ago';
    }
    return Math.round(minutes / 60) + ' hours ago';
  }

  function getHostUrl(url) {
    return (url + '')
      .replace('https://', '')
      .replace('http://', '')
      .split('/')[0];
  }

  function HeaderBar() {
    return e(
      'tr',
      {
        style: {
          backgroundColor: '#222',
        },
      },
      e(
        'table',
        {
          style: {
            padding: 4,
          },
          width: '100%',
          cellSpacing: 0,
          cellPadding: 0,
        },
        e(
          'tbody',
          null,
          e(
            'tr',
            null,
            e(
              'td',
              {
                style: {
                  width: 18,
                  paddingRight: 4,
                },
              },
              e(
                'a',
                {
                  href: '#',
                },
                e('img', {
                  src: 'logo.png',
                  width: 16,
                  height: 16,
                  style: {
                    border: '1px solid #00d8ff',
                  },
                })
              )
            ),
            e(
              'td',
              {
                style: {
                  lineHeight: '12pt',
                },
                height: 10,
              },
              e(
                'span',
                {
                  className: 'pagetop',
                },
                e('b', {className: 'hnname'}, 'React HN Benchmark'),
                e('a', {href: '#'}, 'new'),
                ' | ',
                e('a', {href: '#'}, 'comments'),
                ' | ',
                e('a', {href: '#'}, 'show'),
                ' | ',
                e('a', {href: '#'}, 'ask'),
                ' | ',
                e('a', {href: '#'}, 'jobs'),
                ' | ',
                e('a', {href: '#'}, 'submit')
              )
            )
          )
        )
      )
    );
  }

  function Story({story, rank}) {
    return [
      e(
        'tr',
        {
          className: 'athing',
        },
        e(
          'td',
          {
            style: {
              verticalAlign: 'top',
              textAlign: 'right',
            },
            className: 'title',
          },
          e(
            'span',
            {
              className: 'rank',
            },
            `${rank}.`
          )
        ),
        e(
          'td',
          {
            className: 'votelinks',
            style: {
              verticalAlign: 'top',
            },
          },
          e(
            'center',
            null,
            e(
              'a',
              {
                href: '#',
              },
              e('div', {
                className: 'votearrow',
                title: 'upvote',
              })
            )
          )
        ),
        e(
          'td',
          {
            className: 'title',
          },
          e(
            'a',
            {
              href: '#',
              className: 'storylink',
            },
            story.title
          ),
          story.url
            ? e(
                'span',
                {
                  className: 'sitebit comhead',
                },
                ' (',
                e(
                  'a',
                  {
                    href: '#',
                  },
                  getHostUrl(story.url)
                ),
                ')'
              )
            : null
        )
      ),
      e(
        'tr',
        null,
        e('td', {
          colSpan: 2,
        }),
        e(
          'td',
          {
            className: 'subtext',
          },
          e(
            'span',
            {
              className: 'score',
            },
            `${story.score} points`
          ),
          ' by ',
          e(
            'a',
            {
              href: '#',
              className: 'hnuser',
            },
            story.by
          ),
          ' ',
          e(
            'span',
            {
              className: 'age',
            },
            e(
              'a',
              {
                href: '#',
              },
              timeAge(story.time)
            )
          ),
          ' | ',
          e(
            'a',
            {
              href: '#',
            },
            'hide'
          ),
          ' | ',
          e(
            'a',
            {
              href: '#',
            },
            `${story.descendants || 0} comments`
          )
        )
      ),
      e('tr', {
        style: {
          height: 5,
        },
        className: 'spacer',
      }),
    ];
  }

  function StoryList({stories}) {
    return e(
      'tr',
      null,
      e(
        'td',
        null,
        e(
          'table',
          {
            cellPadding: 0,
            cellSpacing: 0,
            classList: 'itemlist',
          },
          e(
            'tbody',
            null,
            stories.map((story, i) =>
              e(Story, {story, rank: ++i, key: story.id})
            )
          )
        )
      )
    );
  }

  function App({stories}) {
    return e(
      'center',
      null,
      e(
        'table',
        {
          id: 'hnmain',
          border: 0,
          cellPadding: 0,
          cellSpacing: 0,
          width: '85%',
          style: {
            'background-color': '#f6f6ef',
          },
        },
        e(
          'tbody',
          null,
          e(HeaderBar, null),
          e('tr', {height: 10}),
          e(StoryList, {
            stories,
          })
        )
      )
    );
  }

  const app = document.getElementById('app');

  window.render = function render() {
    ReactDOM.render(
      React.createElement(App, {
        stories: window.stories,
      }),
      app
    );
  };
})();