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";

const interactionButtonsStore = [
  {
    icon: <SVGFiletext />,
    title: "Read file",
    buttonEmphasis: "high",
    iconClassName: "h-6 fill-white stroke-white",
  },
  {
    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 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">
        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>
  );
  const fileInteractionButtons = interactionButtonsStore.map((button) => {
    return (
      button.title === 'Read file' ?
        <Link
          to={`/article/content/${articleID}`}>
          <Button
            emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
            className="h-max px-2 mr-2"
          >
            <Button.Icon>
              {React.cloneElement(button.icon, { className: button.iconClassName })}
            </Button.Icon>
            {emphasis === "high" ? <Typography>{button.title}</Typography> : null}
          </Button>
        </Link>
        :
        <Button
          emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
          className="h-max px-2 mr-2"
        >
          <Button.Icon>
            {React.cloneElement(button.icon, { className: button.iconClassName })}
          </Button.Icon>
          {emphasis === "high" ? <Typography>{button.title}</Typography> : null}
        </Button>
    );
  });

  return (
    <div className="flex flex-row">
      {emphasis === "low" && !children ? abstractButton : null}
      {children ? children : fileInteractionButtons}
    </div>
  );
}

ArticleInteractionButtons.displayName = "ArticleInteractionButtons";