import { composeStories } from "@storybook/react"
import { screen } from "@testing-library/react"
import { userEvent } from "@testing-library/user-event"
import React from "react"
import { describe, expect, test } from "vitest"
import { render } from "../../../tests/render"
import * as stories from "./QuantityInput.stories"

const { Default, WithMinMax, Disabled } = composeStories(stories)

describe("<QuantityInput />", () => {
  test("keyboard input", async () => {
    render(<Default />)
    const input = screen.getByPlaceholderText("0")
    await userEvent.type(input, "123")
    expect(input).toHaveValue(123)
  })

  test("min and max", async () => {
    render(<WithMinMax />)
    const input = screen.getByPlaceholderText("0")
    expect(screen.getByRole("button", { name: "Remove" })).toBeDisabled()
    expect(screen.getByRole("button", { name: "Add" })).toBeEnabled()
    await userEvent.click(screen.getByRole("button", { name: "Add" }))
    expect(input).toHaveValue(1)
    expect(screen.getByRole("button", { name: "Remove" })).toBeEnabled()
    await userEvent.type(input, "{backspace}")
    expect(input).toHaveValue(null)
    await userEvent.type(input, "10")
    expect(screen.getByRole("button", { name: "Add" })).toBeDisabled()
  })

  test("disabled", async () => {
    render(<Disabled />)
    const input = screen.getByPlaceholderText("0")
    expect(input).toBeDisabled()
    expect(screen.getByRole("button", { name: "Remove" })).toBeDisabled()
    expect(screen.getByRole("button", { name: "Add" })).toBeDisabled()
  })
})