import { defineMessages, useIntl } 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?',
  },
});

const openSurveyWindow = () => {
  let win = new BrowserWindow({ width: 670, height: 400 });
  win.on('closed', () => {
    // @ts-expect-error Type 'null' is not assignable to type 'BrowserWindow'.
    win = null;
  });

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

const SupportFerdiDashboard = () => {
  const intl = useIntl();

  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={openSurveyWindow}
      >
        {intl.formatMessage(messages.bannerText)}
      </InfoBar>
    </div>
  );
};

export default SupportFerdiDashboard;
