// const bindAll = require('lodash.bindall');
const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
const FormattedMessage = require('react-intl').FormattedMessage;
// const injectIntl = require('react-intl').injectIntl;
// const intlShape = require('react-intl').intlShape;
const React = require('react');

const Button = require('../../components/forms/button.jsx');
const FlexRow = require('../../components/flex-row/flex-row.jsx');
// const MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx');
const TitleBanner = require('../../components/title-banner/title-banner.jsx');
// const NavigationBox = require('../../components/navigation/base/navigation.jsx');
const Comment = require('../../components/comment/comment.jsx');

const Page = require('../../components/page/www/page.jsx');
const render = require('../../lib/render.jsx');

require('./annual-report.scss');

const AnnualReport = () => (
    <div>
        <div className="subnavigation">
            <FlexRow className="inner">
                <a
                    className="link"
                    href="/annual-report#message"
                >
                    <FormattedMessage id="annualReport.subnavMessage" />
                </a>
                <a
                    className="link"
                    href="/annual-report#mission"
                >
                    <FormattedMessage id="annualReport.subnavMission" />
                </a>
                <a
                    className="link"
                    href="/annual-report#reach"
                >
                    <FormattedMessage id="annualReport.subnavReach" />
                </a>
                <a
                    className="link"
                    href="/annual-report#milestones"
                >
                    <FormattedMessage id="annualReport.subnavMilestones" />
                </a>
                <a
                    className="link"
                    href="/annual-report#work"
                >
                    <FormattedMessage id="annualReport.subnavWork" />
                </a>
                <a
                    className="link"
                    href="/annual-report#financials"
                >
                    <FormattedMessage id="annualReport.subnavFinancials" />
                </a>
                <a
                    className="link"
                    href="/annual-report#supporters"
                >
                    <FormattedMessage id="annualReport.subnavSupporters" />
                </a>
                <a
                    className="link"
                    href="/annual-report#leadership"
                >
                    <FormattedMessage id="annualReport.subnavLeadership" />
                </a>
                <a
                    className="link"
                    href="/annual-report#donate"
                >
                    <FormattedMessage id="annualReport.subnavDonate" />
                </a>
            </FlexRow>
        </div>
        <div className="banner-wrapper">
            <TitleBanner className="masthead masthead">
                <div className="title-banner-p">
                    <img src="/images/ideas/masthead-illustration.svg" />
                    <h1 className="title-banner-h1">
                        <FormattedMessage id="ideas.headerMessage" />
                    </h1>
                    <a href="/projects/editor/?tutorial=all">
                        <Button className="ideas-button">
                            <img src="/images/ideas/bulb-icon.svg" />
                            <FormattedMessage id="ideas.headerButtonMessage" />
                        </Button>
                    </a>
                </div>
            </TitleBanner>
        </div>
        <div
            className="mission"
            id="mission"
        >
            <div className="inner">
            </div>
        </div>
        <div
            className="milestones-section"
            id="milestones"
        >
            <div className="inner">
                <div className="milestones-intro">
                    <h2>
                        <FormattedMessage id="annualReport.milestonesTitle" />
                    </h2>
                    <p>
                        <FormattedMessage id="annualReport.milestonesDescription" />
                    </p>
                </div>
                <div className="milestones-boxes">
                    <div className="milestone-box first">
                        <h4>
                            2003
                            {/* TODO should this be localized? */}
                        </h4>
                        <p>
                            <FormattedMessage id="annualReport.milestones2003Message" />
                        </p>
                    </div>
                    <div className="milestone-box">
                        <h4>
                            2004
                            {/* TODO should this be localized? */}
                        </h4>
                        <p>
                            <FormattedMessage id="annualReport.milestones2004Message" />
                        </p>
                        <img src="/images/annual-report/milestones/2004_Clubhouse.jpg" />
                    </div>
                    <div className="milestone-box last">
                        <h4>
                            2007
                            {/* TODO should this be localized? */}
                        </h4>
                        <p>
                            <FormattedMessage id="annualReport.milestones2007Message" />
                        </p>
                        <img src="/images/annual-report/milestones/2007_EarlyScratch.png" />
                    </div>
                </div>
            </div>
        </div>
        <div
            className="our-reach"
            id="reach"
        >
            <div className="inner">
                <section className="ttt-section">
                    <div className="ttt-head">
                        <h2>
                            <FormattedMessage id="ideas.activityGuidesTitle" />
                        </h2>
                        <p>
                            <FormattedHTMLMessage id="ideas.activityGuidesText" />
                        </p>
                    </div>
                    <a
                        className="wide-button"
                        href="/projects/editor/?tutorial=all"
                    >
                        <Button className="ideas-button wide-button">
                            <FormattedMessage id="ideas.seeAllTutorials" />
                        </Button>
                    </a>
                </section>
            </div>
        </div>
        <div
            className="our-work"
            id="work"
        >
            <div className="inner">
                <section className="ttt-section">
                    <div className="ttt-head">
                        <h2>
                            <FormattedMessage id="ideas.activityGuidesTitle" />
                        </h2>
                        <p>
                            <FormattedHTMLMessage id="ideas.activityGuidesText" />
                        </p>
                    </div>
                    <a
                        className="wide-button"
                        href="/projects/editor/?tutorial=all"
                    >
                        <Button className="ideas-button wide-button">
                            <FormattedMessage id="ideas.seeAllTutorials" />
                        </Button>
                    </a>
                </section>
            </div>
        </div>
        <div
            className="financials-section"
            id="financials"
        >
            <div className="inner">
                <h2 className="financials-h2">
                    <FormattedMessage id="annualReport.financialsTitle" />
                </h2>
                <h3>
                    <FormattedMessage id="annualReport.financialsRevenue" />
                </h3>
                <hr />
                <div className="financials-content">
                    <div className="financials-table">
                        <div className="circle-and-words">
                            <img src="/images/annual-report/blue-circle.svg" />
                            <div className="key-and-money">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsGrants" />
                                </p>
                                <p>
                                    $3,898,078
                                    <span className="percentage"> (82.7%)</span>
                                </p>
                            </div>
                        </div>
                        <div className="circle-and-words">
                            <img src="/images/annual-report/yellow-circle.svg" />
                            <div className="key-and-money">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsEvents" />
                                </p>
                                <p>
                                    $700,000
                                    <span className="percentage"> (14.8%)</span>
                                </p>
                            </div>
                        </div>
                        <div className="circle-and-words">
                            <img src="/images/annual-report/green-circle.svg" />
                            <div className="key-and-money">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsOther" />
                                </p>
                                <p>
                                    $114,982
                                    <span className="percentage"> (2.4%)</span>
                                </p>
                            </div>
                        </div>
                        <div className="circle-and-words">
                            <div className="key-and-money total">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsTotal" />
                                </p>
                                <p>
                                    $4,713,060
                                </p>
                            </div>
                        </div>
                    </div>
                    <img
                        className="graph"
                        src="/images/annual-report/revenue-graph.svg"
                    />
                </div>
                <h3>
                    <FormattedMessage id="annualReport.financialsExpenses" />
                </h3>
                <hr />
                <div className="financials-content">
                    <div className="financials-table">
                        <div className="circle-and-words">
                            <img src="/images/annual-report/blue-circle.svg" />
                            <div className="key-and-money">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsProgram" />
                                </p>
                                <p>
                                    $1,135,767
                                    <span className="percentage"> (48.8%)</span>
                                </p>
                            </div>
                        </div>
                        <div className="circle-and-words">
                            <img src="/images/annual-report/yellow-circle.svg" />
                            <div className="key-and-money">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsGeneral" />
                                </p>
                                <p>
                                    $224,104
                                    <span className="percentage"> (9.6%)</span>
                                </p>
                            </div>
                        </div>
                        <div className="circle-and-words">
                            <img src="/images/annual-report/green-circle.svg" />
                            <div className="key-and-money">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsFundraising" />
                                </p>
                                <p>
                                    $962,958
                                    <span className="percentage"> (41.4%)</span>
                                </p>
                            </div>
                        </div>
                        <div className="circle-and-words">
                            <div className="key-and-money total">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsTotal" />
                                </p>
                                <p>
                                    $2,322,829
                                </p>
                            </div>
                        </div>
                    </div>
                    <img
                        className="graph"
                        src="/images/annual-report/expenses-graph.svg"
                    />
                </div>
                <div className="financials-button-wrapper">
                    <a href="https://secure.donationpay.org/scratchfoundation/">
                        <Button className="financials-button">
                            <FormattedMessage id="annualReport.financialsButton" />
                            <img
                                className="download-icon"
                                src="/images/annual-report/download-icon.svg"
                            />
                        </Button>
                    </a>
                </div>
            </div>
        </div>
        <div
            className="supporters-section"
            id="supporters"
        >
            <div className="inner">
                <div className="supporters-heading">
                    <h2>
                        <FormattedMessage id="annualReport.supportersTitle" />
                    </h2>
                    <p>
                        <FormattedHTMLMessage id="annualReport.supportersIntro" />
                    </p>
                </div>
                <div className="donor-spotlight">
                    <div className="subsection-tag">
                        <FormattedHTMLMessage id="annualReport.supportersSpotlightTitle" />
                    </div>
                    <div className="sfe-info">
                        <h3>
                            <FormattedMessage id="annualReport.supportersSFETitle" />
                        </h3>
                        <p>
                            <FormattedMessage id="annualReport.supportersSFEDescription" />
                        </p>
                    </div>
                    <div className="david-siegel">
                        <div className="ds-info">
                            <img src="/images/annual-report/david-siegel-photo.svg" />
                            <h3>David Siegel</h3>
                            <div>Co-Founder and<br /> Co-Chairman<br /> Two Sigma</div>
                        </div>
                        <div className="ds-quote">
                            {/* eslint-disable-next-line */}
                            <Comment comment="Making sure that Scratch remains free and accessible for kids everywhere is one of the most impactful ways we can help young learners engage and thrive in an increasingly digital world. Supporting Scratch is more important today than ever before." />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div
            className="donate-section"
            id="donate"
        >
            <FlexRow className="donate-info">
                <img src="/images/annual-report/donate-illustration.svg" />
                <div className="donate-content">
                    <h2 className="donate-h2">
                        <FormattedMessage id="annualReport.donateTitle" />
                    </h2>
                    <p className="donate-p">
                        <FormattedMessage id="annualReport.donateMessage" />
                    </p>
                    <a href="https://secure.donationpay.org/scratchfoundation/">
                        <Button className="donate-button">
                            <FormattedMessage id="annualReport.donateButton" />
                        </Button>
                    </a>
                </div>
            </FlexRow>
        </div>
    </div>
);

render(
    <Page><AnnualReport /></Page>, document.getElementById('app'));