// @flow

import { Localized } from "fluent-react/compat";
import React from "react";
import { Link } from "react-router-dom";

import { experimentL10nId } from "../../lib/utils";
import { getBreakpoint } from "../../containers/App";

import FeaturedStatus from "./FeaturedStatus";
import FeaturedButton from "./FeaturedButton";

import "./index.scss";

import type { InstalledExperiments } from "../../reducers/addon";

import ExperimentPlatforms from "../ExperimentPlatforms";

type FeaturedExperimentProps = {
  clientUUID?: string,
  enabled: boolean,
  eventCategory: string,
  experiment: Object,
  fetchCountryCode: Function,
  getWindowLocation: Function,
  hasAddon: any,
  isFirefox: boolean,
  isExperimentEnabled: Function,
  isMinFirefox: boolean,
  installed: InstalledExperiments,
  sendToGA: Function
}

export default class FeaturedExperiment extends React.Component {
  props: FeaturedExperimentProps

  constructor(props: FeaturedExperimentProps) {
    super(props);
  }

  l10nId(pieces: string) {
    return experimentL10nId(this.props.experiment, pieces);
  }

  render() {
    const { experiment, enabled, installed, hasAddon, sendToGA,
      eventCategory } = this.props;
    const { description, title, subtitle, slug, video_url, error, platforms } = experiment;
    const isMobileExperiment = platforms.includes("ios") || platforms.includes("android");

    return (
      <div>
        { error && <div className="status-bar error featured">
          <Localized id="installErrorMessage" $title={title}>
            <span>
              Uh oh. {title} could not be enabled. Try again later.
            </span>
          </Localized>
        </div>}
        <div className="featured-experiment">
          <FeaturedStatus {...this.props} />
          <header className="featured-experiment__header">
            <div className={`experiment-icon-wrapper-${slug} experiment-icon-wrapper`}>
              <div className={`experiment-icon-${slug} experiment-icon`}></div>
            </div>
            <div className="featured-experiment__title-wrapper">
              <h2 className="featured-experiment__title">{title}</h2>
              <div className="featured-experiment__info">
                <ExperimentPlatforms experiment={experiment} />
                {subtitle && <Localized id={this.l10nId("subtitle")}>
                  <h4 className="featured-experiment__subtitle">{subtitle}</h4>
                </Localized>}
              </div>
            </div>
          </header>

          <Localized id={this.l10nId("description")}>
            <p className="featured-experiment__description">{description}</p>
          </Localized>

          {(!enabled || isMobileExperiment) && <Localized id='moreDetail'>
            <Link className="featured-experiment__details" to={`/experiments/${slug}`}
              onClick={() => {
                sendToGA("event", {
                  eventCategory,
                  eventAction: "link click",
                  eventLabel: "View Featured details",
                  dimension1: hasAddon,
                  dimension2: Object.keys(installed).length > 0,
                  dimension3: Object.keys(installed).length,
                  dimension4: enabled,
                  dimension10: getBreakpoint(window.innerWidth),
                  dimension11: slug,
                  dimension13: "Featured Experiment"
                });
              }}>View Details</Link>
          </Localized>}

          <div className="featured-experiment__actions">
            <FeaturedButton {...this.props} />
          </div>

          <div className="featured-experiment__video">
            <iframe
              width="100%"
              height="360"
              src={video_url}
              frameBorder="0"
              allowFullScreen />
          </div>
        </div>
      </div>
    );
  }
}

@@ -1373,16 +1373,496 @@
 oid%22);%0A%0A
+    const handleDetailsLinkClick = () =%3E %7B%0A      sendToGA(%22event%22, %7B%0A        eventCategory,%0A        eventAction: %22link click%22,%0A        eventLabel: %22View Featured details%22,%0A        dimension1: hasAddon,%0A        dimension2: Object.keys(installed).length %3E 0,%0A        dimension3: Object.keys(installed).length,%0A        dimension4: enabled,%0A        dimension10: getBreakpoint(window.innerWidth),%0A        dimension11: slug,%0A        dimension13: %22Featured Experiment%22%0A      %7D);%0A    %7D;%0A%0A
     retu
@@ -2295,24 +2295,106 @@
 t__header%22%3E%0A
+            %3CLink to=%7B%60/experiments/$%7Bslug%7D%60%7D onClick=%7BhandleDetailsLinkClick%7D%3E%0A  
             
@@ -2475,32 +2475,34 @@
 %3E%0A              
+ 
+ 
 %3Cdiv className=%7B
@@ -2555,39 +2555,61 @@
 iv%3E%0A            
+  
 %3C/div%3E%0A
+            %3C/Link%3E%0A
             %3Cdiv
@@ -2653,24 +2653,108 @@
 e-wrapper%22%3E%0A
+              %3CLink to=%7B%60/experiments/$%7Bslug%7D%60%7D onClick=%7BhandleDetailsLinkClick%7D%3E%0A  
             
@@ -2811,16 +2811,38 @@
 e%7D%3C/h2%3E%0A
+              %3C/Link%3E%0A
         
@@ -3541,580 +3541,30 @@
 ck=%7B
-() =%3E %7B%0A                sendToGA(%22event%22, %7B%0A                  eventCategory,%0A                  eventAction: %22link click%22,%0A                  eventLabel: %22View Featured details%22,%0A                  dimension1: hasAddon,%0A                  dimension2: Object.keys(installed).length %3E 0,%0A                  dimension3: Object.keys(installed).length,%0A                  dimension4: enabled,%0A                  dimension10: getBreakpoint(window.innerWidth),%0A                  dimension11: slug,%0A                  dimension13: %22Featured Experiment%22%0A                %7D);%0A              %7D
+handleDetailsLinkClick
 %7D%3EVi

Make title and icon of featured experiment link to detail page (#3663)