import { Checkbox, FormControlLabel, FormGroup, FormLabel } from "@mui/material"
import type { Meta, StoryObj } from "@storybook/react"
import { useArgs } from "storybook/internal/preview-api"
import { RadioGroup } from "@/print/components/PrintComponents"

const meta: Meta<typeof RadioGroup> = {
  title: "Form/RadioGroup",
  component: RadioGroup
}

export default meta
type Story = StoryObj<typeof RadioGroup>

export const MultipleCheckboxes: Story = {
  render: () => {
    const [args, updateArgs] = useArgs<{ date: boolean; north: boolean; scale: boolean; legend: boolean }>()
    return (
      <RadioGroup>
        <FormLabel component="legend">Display</FormLabel>
        <FormGroup>
          <FormControlLabel
            control={<Checkbox size="small" color="primary" checked={args.date ?? true} onChange={() => updateArgs({ date: !args.date })} />}
            label="Date"
          />
          <FormControlLabel
            control={<Checkbox size="small" color="primary" checked={args.north ?? true} onChange={() => updateArgs({ north: !args.north })} />}
            label="North Arrow"
          />
          <FormControlLabel
            control={<Checkbox size="small" color="primary" checked={args.scale ?? true} onChange={() => updateArgs({ scale: !args.scale })} />}
            label="Scale"
          />
          <FormControlLabel
            control={<Checkbox size="small" color="primary" checked={args.legend ?? false} onChange={() => updateArgs({ legend: !args.legend })} />}
            label="Legend"
          />
        </FormGroup>
      </RadioGroup>
    )
  },
  args: { date: true, north: true, scale: true, legend: false } as any
}

export const SingleCheckbox: Story = {
  render: () => {
    const [{ checked }, updateArgs] = useArgs<{ checked: boolean }>()
    return (
      <RadioGroup>
        <FormLabel component="legend">Resolution</FormLabel>
        <FormControlLabel
          control={<Checkbox size="small" color="primary" checked={checked ?? false} onChange={() => updateArgs({ checked: !checked })} />}
          label="High resolution"
        />
      </RadioGroup>
    )
  },
  args: { checked: false } as any
}