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

import CpSwitch from '@/components/CpSwitch.vue'

import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'

const switchColors = ['blue', 'purple'] as const

const meta = {
  title: 'Atoms/CpSwitch',
  component: CpSwitch,
  argTypes: {
    autofocus: {
      control: 'boolean',
      description: 'Whether to autofocus the switch',
    },
    color: {
      control: 'select',
      options: switchColors,
      description: 'Color variant of the switch',
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the switch is disabled',
    },
    groupName: {
      control: 'text',
      description: 'Name attribute for the switch',
    },
    helper: {
      control: 'text',
      description: 'Helper text to display below the label',
    },
    isRequired: {
      control: 'boolean',
      description: 'Whether the switch is required',
    },
    label: {
      control: 'text',
      description: 'Label text for the switch',
    },
    modelValue: {
      control: 'boolean',
      description: 'The switch state',
    },
    reverseLabel: {
      control: 'boolean',
      description: 'Whether to show label before the switch',
    },
    tooltip: {
      control: 'text',
      description: 'Tooltip text to display',
    },
  },
} satisfies Meta<typeof CpSwitch>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default switch. Use the controls to experiment with each prop in isolation.
 */
export const Default: Story = {
  args: {
    label: 'Label',
    helper: '',
    disabled: false,
    color: 'purple',
    reverseLabel: false,
    autofocus: false,
    isRequired: true,
    tooltip: '',
  },
  render: (args) => ({
    components: { CpSwitch },
    setup() {
      const value = ref(false)
      return { args, value }
    },
    template: `
      <div style="padding: 20px;">
        <CpSwitch v-model="value" v-bind="args" />
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* States                                                                     */
/* -------------------------------------------------------------------------- */

/**
 * Off, on, disabled off and disabled on compared side by side.
 */
export const States: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpSwitch },
    setup() {
      return { docCellStyle, docLabelStyle, docRowWrapStyle }
    },
    template: `
      <div :style="docRowWrapStyle">
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Off</span>
          <CpSwitch :model-value="false" label="Label" />
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">On</span>
          <CpSwitch :model-value="true" label="Label" />
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Disabled off</span>
          <CpSwitch :model-value="false" :disabled="true" label="Label" />
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Disabled on</span>
          <CpSwitch :model-value="true" :disabled="true" label="Label" />
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Colors                                                                     */
/* -------------------------------------------------------------------------- */

/**
 * Color variants rendered side by side.
 */
export const Colors: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpSwitch },
    setup() {
      return { switchColors, docCellStyle, docLabelStyle, docRowWrapStyle }
    },
    template: `
      <div :style="docRowWrapStyle">
        <div v-for="color in switchColors" :key="color" :style="docCellStyle">
          <span :style="docLabelStyle">{{ color }}</span>
          <CpSwitch :model-value="true" :color="color" label="Label" />
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Sizes                                                                      */
/* -------------------------------------------------------------------------- */

/**
 * The switch inherits its size from the font-size of its container. Wrap it
 * inside a `transform: scale()` to obtain smaller or larger switches.
 */
export const Sizes: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpSwitch },
    setup() {
      const values = ref({
        sm: false,
        md: true,
        lg: false,
      })
      return { values }
    },
    template: `
      <div style="padding: 20px; display: flex; flex-direction: column; gap: 20px;">
        <div style="transform: scale(0.8); transform-origin: left center;">
          <CpSwitch v-model="values.sm" label="Height 16px" />
        </div>
        <div>
          <CpSwitch v-model="values.md" label="Height 20px" />
        </div>
        <div style="transform: scale(1.2); transform-origin: left center;">
          <CpSwitch v-model="values.lg" label="Height 24px" />
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Variants                                                                   */
/* -------------------------------------------------------------------------- */

/**
 * Display the label before the switch using `reverseLabel`.
 */
export const Reversed: Story = {
  args: {
    ...Default.args,
    reverseLabel: true,
  },
  render: (args) => ({
    components: { CpSwitch },
    setup() {
      const value = ref(false)
      return { args, value }
    },
    template: `
      <div style="padding: 20px;">
        <CpSwitch v-model="value" v-bind="args" />
      </div>
    `,
  }),
}

/**
 * Add a helper text, a tooltip next to the label, or both.
 */
export const HelpAndTooltip: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpSwitch },
    setup() {
      const values = ref({ helper: false, tooltip: false, both: false })
      return { values, docCellStyle, docLabelStyle, docRowWrapStyle }
    },
    template: `
      <div :style="docRowWrapStyle">
        <div :style="docCellStyle">
          <span :style="docLabelStyle">With helper</span>
          <CpSwitch v-model="values.helper" label="Label" helper="This is a helper text that provides additional information" />
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">With tooltip</span>
          <CpSwitch v-model="values.tooltip" label="Label" tooltip="This is a tooltip text" />
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">With both</span>
          <CpSwitch
            v-model="values.both"
            label="Label"
            helper="This is a helper text"
            tooltip="This is a tooltip text"
          />
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Group                                                                      */
/* -------------------------------------------------------------------------- */

/**
 * Multiple switches bound together, sharing the same `groupName`.
 */
export const SwitchGroup: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpSwitch },
    setup() {
      const switches = ref({
        switch1: false,
        switch2: true,
        switch3: false,
        switch4: false,
      })
      return { switches }
    },
    template: `
      <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
        <CpSwitch v-model="switches.switch1" label="First Switch" group-name="switch-group" />
        <CpSwitch v-model="switches.switch2" label="Second Switch" group-name="switch-group" />
        <CpSwitch v-model="switches.switch3" label="Third Switch" group-name="switch-group" disabled />
        <CpSwitch v-model="switches.switch4" label="Fourth Switch" group-name="switch-group" />
      </div>
    `,
  }),
}