import { Select } 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/Select",
  args: {
    label: "File Type",
    value: "png"
  },
  argTypes: {
    label: { control: "text" },
    value: { control: "select", options: ["png", "jpeg", "pdf"] }
  }
}

export default meta
type Story = StoryObj

export const FileType: Story = {
  render: () => {
    const [{ label, value }, updateArgs] = useArgs<{ label: string; value: string }>()
    return (
      <PrintField label={label}>
        <Select native variant="filled" value={value} onChange={e => updateArgs({ value: e.target.value })}>
          <option value="png">png</option>
          <option value="jpeg">jpeg</option>
          <option value="pdf">pdf</option>
        </Select>
      </PrintField>
    )
  }
}

export const PaperFormat: Story = {
  args: {
    label: "Paper Format",
    value: "letter"
  },
  argTypes: {
    value: { control: "select", options: ["letter", "a4", "a3", "a2", "a1", "a0"] }
  },
  render: () => {
    const [{ label, value }, updateArgs] = useArgs<{ label: string; value: string }>()
    return (
      <PrintField label={label}>
        <Select native variant="filled" value={value} onChange={e => updateArgs({ value: e.target.value })}>
          <option value="letter">Letter</option>
          <option value="a4">A4</option>
          <option value="a3">A3</option>
          <option value="a2">A2</option>
          <option value="a1">A1</option>
          <option value="a0">A0</option>
        </Select>
      </PrintField>
    )
  }
}

export const Orientation: Story = {
  args: {
    label: "Orientation",
    value: "true"
  },
  argTypes: {
    value: { control: "select", options: ["true", "false"] }
  },
  render: () => {
    const [{ label, value }, updateArgs] = useArgs<{ label: string; value: string }>()
    return (
      <PrintField label={label}>
        <Select native variant="filled" value={value} onChange={e => updateArgs({ value: e.target.value })}>
          <option value="true">Portrait</option>
          <option value="false">Landscape</option>
        </Select>
      </PrintField>
    )
  }
}