import React, { Component } from 'react';
import marked from 'marked';
import PropTypes from 'prop-types';
import { inject, observer } from 'mobx-react';
import { defineMessages, intlShape } from 'react-intl';
import injectSheet from 'react-jss';
import { Button } from '@meetfranz/forms';

import { announcementsStore } from '../index';
import UIStore from '../../../stores/UIStore';

const renderer = new marked.Renderer();

renderer.link = (href, title, text) => `<a target="_blank" href="${href}" title="${title}">${text}</a>`;

const markedOptions = { sanitize: true, renderer };

const messages = defineMessages({
  headline: {
    id: 'feature.announcements.changelog.headline',
    defaultMessage: '!!!Changes in Ferdi {version}',
  },
});

const smallScreen = '1000px';

const styles = theme => ({
  container: {
    background: theme.colorBackground,
    position: 'relative',
    top: 0,
    zIndex: 140,
    width: '100%',
    height: '100%',
    overflowY: 'auto',
  },
  headline: {
    color: theme.colorHeadline,
    margin: [25, 0, 40],
    // 'max-width': 500,
    'text-align': 'center',
    'line-height': '1.3em',
  },
  announcement: {
    height: 'auto',

    [`@media(min-width: ${smallScreen})`]: {
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      height: '100vh',
    },
  },
  main: {
    display: 'flex',
    flexDirection: 'column',
    flexGrow: 1,
    justifyContent: 'center',

    '& h1': {
      margin: [40, 0, 15],
      fontSize: 70,
      color: theme.styleTypes.primary.accent,
      textAlign: 'center',

      [`@media(min-width: ${smallScreen})`]: {
        marginTop: 0,
      },
    },
    '& h2': {
      fontSize: 30,
      fontWeight: 300,
      color: theme.colorText,
      textAlign: 'center',
      marginBottom: 60,
    },
  },
  mainBody: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    width: 'calc(100% - 80px)',
    height: 'auto',
    margin: '0 auto',
    [`@media(min-width: ${smallScreen})`]: {
      flexDirection: 'row',
      justifyContent: 'center',
    },
  },
  mainImage: {
    minWidth: 250,
    maxWidth: 400,
    margin: '0 auto',
    marginBottom: 40,
    '& img': {
      width: '100%',
    },
    [`@media(min-width: ${smallScreen})`]: {
      margin: 0,
    },
  },
  mainText: {
    height: 'auto',
    maxWidth: 600,
    textAlign: 'center',
    '& p': {
      lineHeight: '1.5em',
    },
    [`@media(min-width: ${smallScreen})`]: {
      textAlign: 'left',
    },
  },
  mainCtaButton: {
    textAlign: 'center',
    marginTop: 40,
    [`@media(min-width: ${smallScreen})`]: {
      textAlign: 'left',
    },
  },
  spotlight: {
    height: 'auto',
    background: theme.announcements.spotlight.background,
    padding: [40, 0],
    marginTop: 80,
    [`@media(min-width: ${smallScreen})`]: {
      marginTop: 0,
      justifyContent: 'center',
      alignItems: 'flex-start',
      display: 'flex',
      flexDirection: 'row',
    },
  },
  spotlightTopicContainer: {
    textAlign: 'center',
    marginBottom: 20,

    [`@media(min-width: ${smallScreen})`]: {
      marginBottom: 0,
      minWidth: 250,
      maxWidth: 330,
      width: '100%',
      textAlign: 'right',
      marginRight: 60,
    },
  },
  spotlightContentContainer: {
    textAlign: 'center',
    [`@media(min-width: ${smallScreen})`]: {
      height: 'auto',
      maxWidth: 600,
      paddingRight: 40,
      textAlign: 'left',
    },
    '& p': {
      lineHeight: '1.5em',
    },
  },
  spotlightTopic: {
    fontSize: 20,
    marginBottom: 5,
    letterSpacing: 0,
    fontWeight: 100,
  },
  spotlightSubject: {
    fontSize: 20,
  },
  changelog: {
    padding: [0, 60],
    maxWidth: 700,
    margin: [100, 'auto'],
    height: 'auto',

    '& h3': {
      fontSize: '24px',
      margin: '1.5em 0 1em 0',
    },
    '& li': {
      marginBottom: '1em',
      lineHeight: '1.4em',
    },
    '& div': {
      height: 'auto',
    },
  },
});


@inject('stores', 'actions') @injectSheet(styles) @observer
class AnnouncementScreen extends Component {
  static propTypes = {
    classes: PropTypes.object.isRequired,
    stores: PropTypes.shape({
      ui: PropTypes.instanceOf(UIStore).isRequired,
    }).isRequired,
    actions: PropTypes.shape({
      app: PropTypes.shape({
        openExternalUrl: PropTypes.func.isRequired,
      }).isRequired,
    }).isRequired,
  };

  static contextTypes = {
    intl: intlShape,
  };

  render() {
    const { classes, stores, actions } = this.props;
    const { intl } = this.context;
    const { changelog, announcement } = announcementsStore;
    const themeImage = stores.ui.isDarkThemeActive ? 'dark' : 'light';
    return (
      <div className={classes.container}>
        {announcement && (
          <div className={classes.announcement}>
            <div className={classes.main}>
              <h1>{announcement.main.headline}</h1>
              <h2>{announcement.main.subHeadline}</h2>
              <div className={classes.mainBody}>
                <div className={classes.mainImage}>
                  <img
                    src={announcement.main.image[themeImage]}
                    alt=""
                  />
                </div>
                <div className={classes.mainText}>
                  <div
                    dangerouslySetInnerHTML={{
                      __html: marked(announcement.main.text, markedOptions),
                    }}
                  />
                  {(announcement.main.cta.label || announcement.main.cta.href) && (
                    <div className={classes.mainCtaButton}>
                      <Button
                        label={announcement.main.cta.label}
                        onClick={() => {
                          const {
                            href,
                          } = announcement.main.cta;
                          if (announcement.main.cta.href.startsWith('http')) {
                            actions.app.openExternalUrl({ url: href });
                          } else {
                            window.location.href = `#${href}`;
                          }
                        }}
                      />
                    </div>
                  )}
                </div>
              </div>
            </div>
            {announcement.spotlight && (
              <div className={classes.spotlight}>
                <div className={classes.spotlightTopicContainer}>
                  <h2 className={classes.spotlightTopic}>{announcement.spotlight.title}</h2>
                  <h3 className={classes.spotlightSubject}>{announcement.spotlight.subject}</h3>
                </div>
                <div className={classes.spotlightContentContainer}>
                  <div
                    dangerouslySetInnerHTML={{
                      __html: marked(announcement.spotlight.text, markedOptions),
                    }}
                  />
                  <div className={classes.mainCtaButton}>
                    <Button
                      label={announcement.spotlight.cta.label}
                      onClick={() => {
                        const {
                          href,
                        } = announcement.spotlight.cta;
                        if (announcement.spotlight.cta.href.startsWith('http')) {
                          actions.app.openExternalUrl({ url: href });
                        } else {
                          window.location.href = `#${href}`;
                        }
                      }}
                    />
                  </div>
                </div>
              </div>
            )}
          </div>
        )}
        {changelog && (
          <div className={classes.changelog}>
            <h1 className={classes.headline}>
              {intl.formatMessage(messages.headline, {
                version: announcementsStore.targetVersion,
              })}
            </h1>
            <div
              dangerouslySetInnerHTML={{
                __html: marked(changelog, markedOptions),
              }}
            />
          </div>
        )}
      </div>
    );
  }
}

export default AnnouncementScreen;