import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { ref } from 'vue'

import { Switch as NychSwitch } from '@nychthemeron/library'

const meta = {
  title: 'Components/Switch',
  component: NychSwitch,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    disabled: {
      control: { type: 'boolean' },
      description: 'Disable the switch',
    },
  },
} satisfies Meta<typeof NychSwitch>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => ({
    components: { NychSwitch },
    setup() {
      const on = ref(false)
      return { on }
    },
    template: `<NychSwitch v-model="on" />`,
  }),
}

export const On: Story = {
  render: () => ({
    components: { NychSwitch },
    setup() {
      const on = ref(true)
      return { on }
    },
    template: `<NychSwitch v-model="on" />`,
  }),
}

export const Disabled: Story = {
  render: () => ({
    components: { NychSwitch },
    template: `
      <div style="display: flex; gap: 1rem;">
        <NychSwitch :model-value="false" disabled />
        <NychSwitch :model-value="true" disabled />
      </div>
    `,
  }),
}

export const WithLabel: Story = {
  render: () => ({
    components: { NychSwitch },
    setup() {
      const nocturnal = ref(true)
      return { nocturnal }
    },
    template: `
      <label style="display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-sans); color: var(--text-body); cursor: pointer;">
        <NychSwitch v-model="nocturnal" />
        {{ nocturnal ? 'Hades (night)' : 'Apollo (day)' }}
      </label>
    `,
  }),
}