import { BASE_URL } from "core/httpClient";
import { useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "../../../Button/Button";
import { SVGCopy, SVGShare, SVGXmark } from "../../../icons";
import Typography from "../../../typography/Typography";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { Popover } from "@headlessui/react";

type Props = {
  emphasis?: "high" | "low";
  linktoCopy?: string;
};

export function ShareButton({ emphasis, linktoCopy }: Props) {
  const [t, i18next] = useTranslation("translation", {
    keyPrefix: "articlePage.interactionButtons",
  });
  const [copied, setCopied] = useState(false);

  const copyValue =
    BASE_URL != undefined && linktoCopy != undefined
      ? BASE_URL + linktoCopy
      : t("searchResults.nothingFound");

  function onCopy() {
    setCopied(true);
    setTimeout(() => {
      setCopied(false);
    }, 1500);
  };

  const handleFocus = (event: any) => event.target.select();

  return (
    <Popover className="relative">
      <Popover.Button>
        <Button emphasis="low" className="px-2">
          <Button.Icon>
            <SVGShare className="w-6 fill-gray-900 stroke-gray-900" />
          </Button.Icon>
          {emphasis === "high" && <Typography>{t("share")}</Typography>}
        </Button>
      </Popover.Button>

      <Popover.Panel className="absolute z-10 -right-3/4  mt-3 pl-2 bg-white border-2 border-gray-300 shadow-lg rounded">
        <div className="flex flex-row">
          <input
            className="focus:outline-none active:outline-none p-1 mr-1"
            type="text"
            readOnly
            value={copyValue}
            onFocus={handleFocus}
          />
          <div className="relative">
            <CopyToClipboard text={copyValue} onCopy={onCopy}>
              <Button
                emphasis="low"
                className="items-center border-l-2  rounded-none  "
              >
                <Button.Icon>
                  <SVGCopy className="w-5 fill-gray-900 stroke-gray-900" />
                </Button.Icon>
              </Button>
            </CopyToClipboard>

            {copied && (
              <div className="absolute z-11 -bottom-full bg-gray-900 text-white px-2 py-1 rounded before:content[''] before:absolute before:bg-gray-900 before:rotate-45 before:w-3 before:h-3 before:-top-1 before:left-4 before:block">
                {t("copied")}
              </div>
            )}
          </div>
          <Popover.Button>
            <Button
              emphasis="low"
              className="items-center border-l-2  rounded-none  "
            >
              <Button.Icon>
                <SVGXmark className="w-5 fill-gray-900 stroke-gray-900" />
              </Button.Icon>
            </Button>
          </Popover.Button>
        </div>
      </Popover.Panel>
    </Popover>
  );
}