import React from "react";
import { Button, Divider, Popover, Tooltip } from "antd";
export default function Link({
  link,
  onDelete,
  onEdit
}: {
  link: { title: string; value: string };
  onEdit: () => void;
  onDelete: () => void;
}) {
  const [copyed, setCopyed] = React.useState(false);
  const handleOpenUrl = () => {
    window.open(link.value, "_blank");
  };

  const handleCopy = () => {
    navigator.clipboard.writeText(link.value);
    setCopyed(true);
    setTimeout(() => {
      setCopyed(false);
    }, 1000);
  };
  return (
    <Popover
      content={
        <div>
          {link.title || link.value} <Divider type="vertical" />
          <Button type="text" onClick={handleOpenUrl}>
            打开链接
          </Button>
          <Tooltip title={copyed ? "复制成功" : "复制"}>
            <Button
              type="text"
              icon={<i className="iconfont icon-fuzhi" />}
              onClick={handleCopy}
            />
          </Tooltip>
          <Tooltip title="编辑">
            <Button
              type="text"
              icon={<i className="iconfont icon-bianji-" />}
              onClick={onEdit}
            />
          </Tooltip>
          <Tooltip title="删除">
            <Button
              type="text"
              icon={<i className="iconfont icon-shanchu" />}
              onClick={onDelete}
            />
          </Tooltip>
        </div>
      }
    >
      <i className="iconfont icon-link" />
    </Popover>
  );
}