import React, { useState } from "react";
/* -------------------------------------------------------------------------- */
/*                            imports Article parts                           */
/* -------------------------------------------------------------------------- */
import { ArticleTitle } from "./ArticleParts/ArticleTitle";
import { ArticleBreadcumbs } from "./ArticleParts/ArticleBreadcumbs";
import { ArticleAuthors } from "./ArticleParts/ArticleAuthors";
import { ArticleKeywords } from "./ArticleParts/ArticleKeywords";
import { ArticleInteractionButtons } from "./ArticleParts/ArticleInteractionButtons";
import { ArticleDescription } from "./ArticleParts/ArticleDescription";
import { ArticleSubscriptionsButtons } from "./ArticleParts/ArticleSubscriptionsButton";

/**
 * Reduces a sequence of names to initials.
 * @param  {String} name  Space Delimited sequence of names.
 * @param  {String} sep   A period separating the initials.
 * @param  {String} trail A period ending the initials.
 * @param  {String} hyph  A hypen separating double names.
 * @return {String}       Properly formatted initials.
 */
type ArticleTileExtentions = {
  Title?: {
    children?: string;
    className?: string;
  };
  Breadcumbs?: {
    children?: string[];
    highlightLAstChild?: boolean;
  };
  Authors?: {
    children: React.ReactNode;
    className?: string;
    emphasis?: "low" | "high";
  };
  Keywords?: {
    children?: React.ReactNode;
    className?: string;
    emphasis?: "low" | "high";
  };
  Description?: {
    children?: React.ReactNode;
    emphasis?: "low" | "high";
    isShowing?: boolean;
  };
  InteractionButtons?: {
    children?: React.ReactNode;
    className?: string;
    emphasis?: "high" | "low";
  };
  SubscriptionButtons?: {
    className?: string;
  };
};

type ArticleTileProps = {
  /** Description of prop "foo". */
  children?: React.ReactNode;
};

export function Article({
  /** Description of prop "foo". */
  children,
}: ArticleTileProps & ArticleTileExtentions) {
  const [isShowing, setIsShowing] = useState(false);

  return <div className="flex flex-col w-full">{children}</div>;
}

Article.Title = ArticleTitle;
Article.Breadcumbs = ArticleBreadcumbs;
Article.Authors = ArticleAuthors;
Article.Keywords = ArticleKeywords;
Article.InteractionButtons = ArticleInteractionButtons;
Article.Description = ArticleDescription;
Article.SubscriptionsButtons = ArticleSubscriptionsButtons;