import moment, { Moment } from 'moment';
import React from 'react';
import * as Text from 'app/shared/components/text/text';
import Parser from 'html-react-parser';
import { Resource } from 'app/shared/components/Resource/Resource';

const mapCollectionToList = (collection: string[]) => {
  return collection
    .map((item, index) => <li key={`${item}-${index}`}>{item}</li>);
};

const getDate = (date: Moment) => {
  const dayWithSuffix = date.format('Do');
  const suffix = dayWithSuffix.replace(/^\d+/, '');
  const day = dayWithSuffix.replace(/[a-z]+/, '');
  const month = date.format('MMMM');
  const year = date.format('YYYY');

  return <Text.Paragraph extraClass="u-margin-top--none o-gutter-top--tiny">
    <em>Update: {day} <sup>{suffix}</sup> of {month}, {year}</em>
  </Text.Paragraph>;
};

const getJustReleased = (changelog: string[]) => {
  if (changelog.length === 0) {
    return null;
  }
  return <>
    <Text.Menu extraClass="u-font-weight--bold">Just released</Text.Menu>
    <ul className= "ul ul--bullets ul--with-spacing u-margin-bottom--big" >
      {mapCollectionToList(changelog)}
    </ul>
  </>;
};

const getIncomingFeatures = (incomingFeatures: string[]) => {
  if (incomingFeatures.length === 0) {
    return null;
  }
  return <>
    <Text.Menu extraClass="u-font-weight--bold">Incoming features</Text.Menu>
    <ul className="ul ul--bullets ul--with-spacing u-margin-bottom--big">
      {mapCollectionToList(incomingFeatures)}
    </ul>
  </>;
};

export interface Props {
  releaseDate: string;
  title: string;
  description: string;
  changelog: string[];
  incomingFeatures: string[];
  footer: string;
  openVideo: () => void;
  videoLink?: string;
  imageUrl?: string;
}

export const WelcomePopupContent = ({
  releaseDate,
  title,
  description,
  changelog,
  incomingFeatures,
  footer,
  videoLink,
  imageUrl,
  openVideo,
} : Props) => {
  const getMedia = (imageUrl?: string, videoLink?: string) => {
    if (!imageUrl && !videoLink) {
      return null;
    }

    return <div className="o-layout__item-12 o-layout__item-xxl-7 o-gutter-xxl-left">
      {videoLink
        ? <Resource
          isVideo
          mediaType="video"
          backgroundImage={imageUrl}
          onClick={openVideo}
          hideFooter
          fullDimensions />
        : <img src={imageUrl} alt={imageUrl} />}
    </div>;
  };

  return <div className="o-gutter-left--enormous u-align--left">
    {getDate(moment(releaseDate))}
    <div className="o-layout o-layout--conditional-vertical-xxl">
      <div>
        <Text.Headline size="h2">
          {title}
        </Text.Headline>
        <Text.Paragraph size="small" extraClass="u-paragraph--light u-keep-white-spaces u-margin-bottom--big">
          {Parser(description)}
        </Text.Paragraph>
        {getJustReleased(changelog)}
        {getIncomingFeatures(incomingFeatures)}
      </div>
      {getMedia(imageUrl, videoLink)}
    </div>
    <Text.Paragraph size="small" extraClass="u-paragraph--light u-margin-bottom--big">
      {footer}
    </Text.Paragraph>
    <Text.Headline size="h2" extraClass="u-align--right u-margin-bottom--none">Get Started!</Text.Headline>
  </div>;
};