import { Text } from "../../../components/text";
import { useInputDevice, InputDeviceProvider } from ".";

import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta = {
  title: "Hooks/useInputDevice",
  decorators: [
    (Story) => {
      return (
        <InputDeviceProvider>
          <Story />
        </InputDeviceProvider>
      );
    },
  ],
  parameters: {
    previewTabs: {
      canvas: { hidden: true },
    },
  },
  argTypes: {
    overrideDefault: {
      table: {
        category: "Input Parameters",
        defaultValue: { summary: "mouse" },
        type: {
          summary: "string",
        },
      },

      type: "string",
      description: "default value to return, before any interaction happens.",
      control: false,
    },
    "mouse | touch": {
      table: {
        category: "Return Value",
        type: {
          summary: "PossibleValues",
          detail: "`touch | mouse`",
        },
      },
      description:
        "`mouse` or `touch` will be return depending on what input device interaction was detected from",
      control: false,
      type: "string",
    },
  },
};

export default meta;
type Story = StoryObj;

export const Default: Story = {
  render: () => {
    const device = useInputDevice();

    return <Text css={{ color: "$light-off-white" }}>User is using: {device}</Text>;
  },
};