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

/**
 * UiSwitch is a toggle control that flips a single setting between on and off.
 * Use it for instantly-applied preferences (notifications, dark mode, feature flags); for batched form values, prefer `UiCheckbox`.
 */
const meta: Meta<typeof UiSwitch> = {
  title: 'Components/UiSwitch',
  component: UiSwitch,
  tags: ['autodocs'],
  argTypes: {
    disabled: {
      control: 'boolean',
      description: 'Set component as disabled',
    },
    modelValue: {
      control: 'boolean',
      description: 'Toggle the switch state',
    },
  },
  args: {
    name: 'switch',
    disabled: false,
    modelValue: false,
  },
};

export default meta;

type Story = StoryObj<typeof UiSwitch>;

const defaultTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import { UiSwitch } from '@aleph-alpha/ui-library'

const enabled = ref(false)
</script>

<template>
  <div class="flex items-center gap-x-2">
    <UiSwitch id="airplane-mode" v-model="enabled" name="airplane-mode" />
    <label for="airplane-mode" class="text-sm font-medium">Airplane Mode</label>
  </div>
</template>`;

/**
 * Default switch with a label.
 */
export const Default: Story = {
  render: (args) => ({
    components: { UiSwitch },
    setup() {
      const enabled = ref(args.modelValue);
      watch(
        () => args.modelValue,
        (val) => {
          enabled.value = val;
        },
      );
      return { args, enabled };
    },
    template: `
      <div class="flex items-center gap-x-2">
        <UiSwitch id="airplane-mode" v-model="enabled" name="airplane-mode" :disabled="args.disabled" />
        <label for="airplane-mode" class="text-sm font-medium">Airplane Mode</label>
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

const disabledTemplateSource = `<script setup lang="ts">
import { UiSwitch } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="flex items-center gap-x-2">
    <UiSwitch id="airplane-mode" name="airplane-mode" disabled />
    <label for="airplane-mode" class="text-sm font-medium text-muted-foreground">Airplane Mode</label>
  </div>
</template>`;

/**
 * Switch in disabled state.
 */
export const Disabled: Story = {
  args: {
    disabled: true,
  },
  render: (args) => ({
    components: { UiSwitch },
    setup() {
      const enabled = ref(args.modelValue);
      watch(
        () => args.modelValue,
        (val) => {
          enabled.value = val;
        },
      );
      return { args, enabled };
    },
    template: `
      <div class="flex items-center gap-x-2">
        <UiSwitch id="airplane-mode" v-model="enabled" name="airplane-mode" :disabled="args.disabled" />
        <label for="airplane-mode" class="text-sm font-medium text-muted-foreground">Airplane Mode</label>
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: disabledTemplateSource,
      },
    },
  },
};
