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

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 = {
  children?: React.ReactNode;
  className?: string;
  emphasis?: "high" | "low";
} & Omit<React.ComponentPropsWithoutRef<"button">, "">;

export function ArticleInteractionButtons({
  children,
  className,
  emphasis, //to change displaying of component
  ...props
}: ArticleButtonProps) {
  const abstractButton = (
    <Button emphasis="medium" className="text-sm leading-4 items-center px-3">
      <Typography fontWeightVariant="bold" className="pr-2">
        Abstract
      </Typography>
      <Button.Icon>
        <SVGArrowDown className="w-4 fill-blue-700 stroke-blue-700" />
      </Button.Icon>
    </Button>
  );

  const fileInteractionButtons = interactionButtonsStore.map((button) => {
    return (
      <Button
        emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
        className="h-max px-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";