import React from "react";
import { Button } from "components/Button/Button";
import Typography from "components/typography/Typography";
import {
  SVGArrowDown,
  SVGArrowUp,
  SVGCite,
  SVGFiletext,
  SVGDownload,
  SVGShare,
  SVGFolder,
} from "components/icons";
import classNames from "classnames";
import { Transition } from "@headlessui/react";
import Link from "components/typography/Link";
import { useTranslation } from "react-i18next";
import { ShareButton } from "./ArticleShareButton";

const interactionButtonsStore = [
  {
    icon: <SVGDownload />,
    title: "Download",
    buttonEmphasis: "low",
    iconClassName: "w-6 fill-gray-900 stroke-gray-900",
  },
  {
    icon: <SVGCite />,
    title: "Cite",
    buttonEmphasis: "low",
    iconClassName: "w-6 fill-gray-900 stroke-gray-900",
  },
  {
    icon: <SVGShare />,
    title: "Share",
    buttonEmphasis: "low",
    iconClassName: "w-6 fill-gray-900 stroke-gray-900",
  },
];

type ArticleButtonProps = {
  isAbstractOpen?: boolean;
  openAbstract?: () => void;
  children?: React.ReactNode;
  className?: string;
  emphasis?: "high" | "low";
  articleID?: string;
} & Omit<React.ComponentPropsWithoutRef<"button">, "">;

export function ArticleInteractionButtons({
  isAbstractOpen = false,
  children,
  openAbstract = () => {},
  className,
  articleID,
  emphasis = "high", //to change displaying of component
  ...props
}: ArticleButtonProps) {
  const [t, i18next] = useTranslation("translation", {
    keyPrefix: "articlePage.interactionButtons",
  });
  /* ----------------------------- Abstract Button ---------------------------- */
  const abstractButton = (
    <Button
      emphasis="medium"
      className="text-sm leading-4 items-center px-3 mr-2 focus:outline-none active:outline-none"
      onClick={openAbstract}
    >
      <Typography fontWeightVariant="bold" className="pr-2">
        {t("abstract")}
      </Typography>
      <Button.Icon>
        {!isAbstractOpen ? (
          <SVGArrowDown className="w-4 fill-blue-700 stroke-blue-700" />
        ) : (
          <SVGArrowUp className="w-4 fill-blue-700 stroke-blue-700" />
        )}
      </Button.Icon>
    </Button>
  );

  /* ---------------------------- Read file button ---------------------------- */
  const readFileButton = (
    <Link
      to={`/article/content/${articleID}`}
      className="rounded active:outline focus:outline focus:outline-blue-400/10 outline-8 active:outline-blue-400/10"
    >
      <div
        className="bg-blue-600
                  hover:bg-blue-500
                  active:bg-blue-700    
                  focus:shadow-lg shadow-blue-500
                  p-2 rounded
                  flex flex-row space-x-2
                  "
      >
        <SVGFiletext className="w-6 fill-white stroke-white" />
        {emphasis === "high" && <Typography fontWeightVariant="semibold" className="text-white">{t("readFile")}</Typography>}
      </div>
    </Link>
  );
  /* ----------------------------- Download button ---------------------------- */
  const downLoadButton = (
    <Button emphasis="low" className="px-2 space-x-2">
      <Button.Icon>
        <SVGDownload className="w-6 fill-gray-900 stroke-gray-900" />
      </Button.Icon>
      {emphasis === "high" && <Typography fontWeightVariant="semibold" className="text-gray-900">{t("download")}</Typography>}
    </Button>
  );

  /* ------------------------------- Cite button ------------------------------ */

  const citeButton = (
    <Button emphasis="low" className="px-2 space-x-2">
      <Button.Icon>
        <SVGCite className="w-6 fill-gray-900 stroke-gray-900" />
      </Button.Icon>
      {emphasis === "high" && <Typography fontWeightVariant="semibold" className="text-gray-900">{t("cite")}</Typography>}
    </Button>
  );

  return (
    <div className="flex flex-row space-x-2">
      {emphasis != "high" && abstractButton}
      {readFileButton}
      {downLoadButton}
      {citeButton}
      <ShareButton emphasis={emphasis} linktoCopy={`/article/content/${articleID}`} />
    </div>
  );
}

ArticleInteractionButtons.displayName = "ArticleInteractionButtons";
