import { TextField } 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/TextField",
  args: {
    label: "Title",
    value: "My Map Title",
    placeholder: ""
  },
  argTypes: {
    label: { control: "text" },
    value: { control: "text" },
    placeholder: { control: "text" }
  }
}

export default meta
type Story = StoryObj

export const Default: Story = {
  render: () => {
    const [{ label, value, placeholder }, updateArgs] = useArgs<{ label: string; value: string; placeholder: string }>()
    return (
      <PrintField label={label}>
        <TextField
          variant="filled"
          value={value}
          placeholder={placeholder}
          onChange={e => updateArgs({ value: e.target.value })}
        />
      </PrintField>
    )
  }
}

export const Empty: Story = {
  args: {
    label: "Subtitle",
    value: "",
    placeholder: "Enter subtitle..."
  },
  render: () => {
    const [{ label, value, placeholder }, updateArgs] = useArgs<{ label: string; value: string; placeholder: string }>()
    return (
      <PrintField label={label}>
        <TextField
          variant="filled"
          value={value}
          placeholder={placeholder}
          onChange={e => updateArgs({ value: e.target.value })}
        />
      </PrintField>
    )
  }
}