import { InputAdornment, TextField, Typography } from "@mui/material"
import type { Meta, StoryObj } from "@storybook/react"
import { useArgs } from "storybook/internal/preview-api"
import { PrintField } from "@/print/components/PrintComponents"

const meta: Meta = {
  title: "Form/NumberInput",
  args: {
    label: "Scale",
    value: 25000,
    min: 100,
    max: 10000000000,
    step: 5000
  },
  argTypes: {
    label: { control: "text" },
    value: { control: "number" },
    min: { control: "number" },
    max: { control: "number" },
    step: { control: "number" }
  }
}

export default meta
type Story = StoryObj

export const Scale: Story = {
  render: () => {
    const [{ label, value, min, max, step }, updateArgs] = useArgs<{ label: string; value: number; min: number; max: number; step: number }>()
    return (
      <PrintField label={label}>
        <TextField
          variant="filled"
          type="number"
          value={value}
          onChange={e => updateArgs({ value: Number(e.target.value) })}
          sx={{ "& input": { paddingLeft: 0 } }}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <Typography sx={theme => ({ paddingLeft: ".9375rem", color: theme.palette.primary.main, fontSize: ".875rem" })}>
                  1 :{" "}
                </Typography>
              </InputAdornment>
            ),
            inputProps: { min, max, step }
          }}
        />
      </PrintField>
    )
  }
}

export const Plain: Story = {
  args: {
    label: "Count",
    value: 10,
    min: 0,
    max: 100,
    step: 1
  },
  render: () => {
    const [{ label, value, min, max, step }, updateArgs] = useArgs<{ label: string; value: number; min: number; max: number; step: number }>()
    return (
      <PrintField label={label}>
        <TextField
          variant="filled"
          type="number"
          value={value}
          onChange={e => updateArgs({ value: Number(e.target.value) })}
          InputProps={{ inputProps: { min, max, step } }}
        />
      </PrintField>
    )
  }
}