import { useState } from "react";
import { useEyeDropper } from "@reactuses/core";

const Demo = () => {
  const [color, setColor] = useState("");
  const [supported, open] = useEyeDropper();

  if (supported) {
    return (
      <div style={{ padding: 40 }}>
        Supported: {supported.toString()}
        <br />
        Color: {color}
        <button
          type="button"
          onClick={async () => setColor((await open()).sRGBHex)}
        >
          Pick color
        </button>
      </div>
    );
  }

  return <span>Not Supported by Your Browser</span>;
};

interface EyeDropperOpenOptions {
  signal?: AbortSignal
}
export interface EyeDropperOpenReturnType {
  sRGBHex: string
}
export default function useEyeDropper(): readonly [
  boolean,
  (options?: EyeDropperOpenOptions) => Promise<EyeDropperOpenReturnType>
]
export type UseEyeDropperReturn = ReturnType<typeof useEyeDropper>