import React, { Component } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { BrowserWindow } from '@electron/remote';
import InfoBar from '../../ui/InfoBar';

const messages = defineMessages({
  headline: {
    id: 'settings.supportFerdi.headline',
    defaultMessage: 'About Ferdi',
  },
  title: {
    id: 'settings.supportFerdi.title',
    defaultMessage: 'Do you like Ferdi?',
  },
  aboutIntro: {
    id: 'settings.supportFerdi.aboutIntro',
    defaultMessage:
      '<p>Ferdi is an open-source and a community-lead application.</p><p>Thanks to the people who make this possbile:</p>',
  },
  textListContributors: {
    id: 'settings.supportFerdi.textListContributors',
    defaultMessage: 'Full list of contributors',
  },
  textListContributorsHere: {
    id: 'settings.supportFerdi.textListContributorsHere',
    defaultMessage: 'here',
  },
  textVolunteers: {
    id: 'settings.supportFerdi.textVolunteers',
    defaultMessage:
      'The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.',
  },
  textSupportWelcome: {
    id: 'settings.supportFerdi.textSupportWelcome',
    defaultMessage:
      'Support is always welcome. You can find a list of the help we need',
  },
  textSupportWelcomeHere: {
    id: 'settings.supportFerdi.textSupportWelcomeHere',
    defaultMessage: 'here',
  },
  textExpenses: {
    id: 'settings.supportFerdi.textExpenses',
    defaultMessage:
      'While volunteers do most of the work, we still need to pay for servers and certificates. As a community, we are fully transparent on funds we collect and spend - see our',
  },
  textOpenCollective: {
    id: 'settings.supportFerdi.textOpenCollective',
    defaultMessage: 'Open Collective',
  },
  textDonation: {
    id: 'settings.supportFerdi.textDonation',
    defaultMessage:
      'If you feel like supporting Ferdi development with a donation, you can do so on both,',
  },
  textDonationAnd: {
    id: 'settings.supportFerdi.textDonationAnd',
    defaultMessage: 'and',
  },
  textGitHubSponsors: {
    id: 'settings.supportFerdi.textGitHubSponsors',
    defaultMessage: 'GitHub Sponsors',
  },
  openSurvey: {
    id: 'settings.supportFerdi.openSurvey',
    defaultMessage: 'Open survey',
  },
  bannerText: {
    id: 'settings.supportFerdi.bannerText',
    defaultMessage: 'Do you want to help us improve Ferdi?',
  },
});

class SupportFerdiDashboard extends Component {
  openSurveyWindow() {
    let win = new BrowserWindow({ width: 670, height: 400 });
    win.on('closed', () => {
      win = null;
    });

    win.loadURL('https://rp28.typeform.com/to/E3phJT');
  }

  render() {
    const { intl } = this.props;

    const aboutIntro = intl.formatMessage(messages.aboutIntro);

    return (
      <div className="settings__main">
        <div className="settings__header">
          <span className="settings__header-item">
            {intl.formatMessage(messages.headline)}
          </span>
        </div>
        <div className="settings__body">
          <h1>{intl.formatMessage(messages.title)}</h1>
          <div>
            <p className="settings__support-badges">
              <a
                href="https://github.com/getferdi/ferdi"
                target="_blank"
                rel="noreferrer"
              >
                <img
                  alt="GitHub Stars"
                  src="https://img.shields.io/github/stars/getferdi/ferdi?style=social"
                />
              </a>
              <a
                href="https://twitter.com/getferdi/"
                target="_blank"
                rel="noreferrer"
              >
                <img
                  alt="Twitter Follow"
                  src="https://img.shields.io/twitter/follow/getferdi?label=Follow&style=social"
                />
              </a>
              <a
                href="https://opencollective.com/getferdi#section-contributors"
                target="_blank"
                rel="noreferrer"
              >
                <img
                  alt="Open Collective backers"
                  src="https://img.shields.io/opencollective/backers/getferdi?logo=open-collective"
                />
              </a>
              <a
                href="https://opencollective.com/getferdi#section-contributors"
                target="_blank"
                rel="noreferrer"
              >
                <img
                  alt="Open Collective sponsors"
                  src="https://img.shields.io/opencollective/sponsors/getferdi?logo=open-collective"
                />
              </a>
            </p>
            <span dangerouslySetInnerHTML={{ __html: aboutIntro }} />
            <br />
            <br />
            <p>
              <a href="#contributors-via-opencollective">
                <img
                  alt="GitHub contributors (non-exhaustive)"
                  width="100%"
                  src="https://opencollective.com/getferdi/contributors.svg?width=642&button=false"
                />
              </a>
            </p>
            <p>
              {intl.formatMessage(messages.textListContributors)}
              <a
                href="https://github.com/getferdi/ferdi#contributors-"
                target="_blank"
                className="link"
                rel="noreferrer"
              >
                {' '}
                {intl.formatMessage(messages.textListContributorsHere)}
                <i className="mdi mdi-open-in-new" />
              </a>
              <br />
              <br />
            </p>
            <p>{intl.formatMessage(messages.textVolunteers)}</p>
            <p>
              {intl.formatMessage(messages.textSupportWelcome)}
              <a
                href="https://help.getferdi.com/general/support"
                target="_blank"
                className="link"
                rel="noreferrer"
              >
                {' '}
                {intl.formatMessage(messages.textSupportWelcomeHere)}
                <i className="mdi mdi-open-in-new" />
              </a>
            </p>
            <p>
              {intl.formatMessage(messages.textExpenses)}
              <a
                href="https://opencollective.com/getferdi#section-budget"
                target="_blank"
                className="link"
                rel="noreferrer"
              >
                {' '}
                {intl.formatMessage(messages.textOpenCollective)}
                <i className="mdi mdi-open-in-new" />
              </a>
            </p>
            <p>
              {intl.formatMessage(messages.textDonation)}
              <a
                href="https://opencollective.com/getferdi#section-contribute"
                target="_blank"
                className="link"
                rel="noreferrer"
              >
                {' '}
                {intl.formatMessage(messages.textOpenCollective)}
                <i className="mdi mdi-open-in-new" />
              </a>{' '}
              {intl.formatMessage(messages.textDonationAnd)}
              <a
                href="https://github.com/sponsors/getferdi"
                target="_blank"
                className="link"
                rel="noreferrer"
              >
                {' '}
                {intl.formatMessage(messages.textGitHubSponsors)}
                <i className="mdi mdi-open-in-new" />
              </a>
            </p>
          </div>
        </div>
        <InfoBar
          sticky
          type="primary"
          ctaLabel={intl.formatMessage(messages.openSurvey)}
          onClick={this.openSurveyWindow}
        >
          {intl.formatMessage(messages.bannerText)}
        </InfoBar>
      </div>
    );
  }
}

export default injectIntl(SupportFerdiDashboard);