import { useCallback, useState } from 'react';

type CopiedValue = string | null;
type CopyFn = (text: string) => Promise<void>; // Return success

/**
 * 使用 clipboard API writeText 写入字符到剪贴板
 *
 * copy 方法为 memoized
 * @returns
 */
function useCopyToClipboard() {
  const [copiedText, setCopiedText] = useState<CopiedValue>(null);

  const copy: CopyFn = useCallback(async (text) => {
    const copyWithOldWay = () => {
      const el = document.createElement('textarea');
      el.value = text;
      el.setAttribute('readonly', '');
      el.style.position = 'absolute';
      el.style.left = '-9999px';
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
    };

    const copyWithClipboardAPI = async () => {
      await navigator.clipboard.writeText(text);
      setCopiedText(text);
    };

    if (!navigator?.clipboard) {
      console.warn('Clipboard not supported');
      return copyWithOldWay();
    } else {
      return await copyWithClipboardAPI();
    }
  }, []);

  return { copiedText, copy };
}

export default useCopyToClipboard;