import type { Meta, StoryObj } from '@storybook/vue3-vite';
import UiToggle from './UiToggle.vue';
import { UiIcon } from '../UiIcon';

/**
 * UiToggle is a button that maintains a pressed/unpressed state.
 * Use it for binary controls in toolbars (bold, italic, mute) or filter chips that should look like buttons; for grouped toggles, use `UiToggleGroup`.
 */
const meta: Meta<typeof UiToggle> = {
  title: 'Components/UiToggle',
  component: UiToggle,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['default', 'outline', 'soft'],
      description: 'The visual style variant',
    },
    size: {
      control: 'select',
      options: ['default', 'sm', 'lg'],
      description: 'The size of the toggle',
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the toggle is disabled',
    },
  },
  args: {
    variant: 'default',
    size: 'default',
    disabled: false,
  },
};

export default meta;

type Story = StoryObj<typeof UiToggle>;

const defaultTemplateSource = `<script setup lang="ts">
import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiToggle aria-label="Toggle bold">
    <UiIcon name="bold" />
  </UiToggle>
</template>`;

/**
 * Default toggle button with icon.
 */
export const Default: Story = {
  render: (args) => ({
    components: { UiToggle, UiIcon },
    setup() {
      return { args };
    },
    template: `<UiToggle :variant="args.variant" :size="args.size" :disabled="args.disabled" aria-label="Toggle bold">
      <UiIcon name="bold" />
    </UiToggle>`,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

const outlineTemplateSource = `<script setup lang="ts">
import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiToggle variant="outline" aria-label="Toggle bold">
    <UiIcon name="bold" />
  </UiToggle>
</template>`;

/**
 * Outline variant toggle.
 */
export const Outline: Story = {
  render: () => ({
    components: { UiToggle, UiIcon },
    template: `<UiToggle variant="outline" aria-label="Toggle bold">
      <UiIcon name="bold" />
    </UiToggle>`,
  }),
  parameters: {
    docs: {
      source: {
        code: outlineTemplateSource,
      },
    },
  },
};

const softTemplateSource = `<script setup lang="ts">
import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiToggle variant="soft" aria-label="Toggle bold">
    <UiIcon name="bold" />
  </UiToggle>
</template>`;

/**
 * Soft variant toggle with a subtle accent background when pressed.
 */
export const Soft: Story = {
  render: () => ({
    components: { UiToggle, UiIcon },
    template: `<UiToggle variant="soft" aria-label="Toggle bold">
      <UiIcon name="bold" />
    </UiToggle>`,
  }),
  parameters: {
    docs: {
      source: {
        code: softTemplateSource,
      },
    },
  },
};

const withTextTemplateSource = `<script setup lang="ts">
import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiToggle aria-label="Toggle italic">
    <UiIcon name="italic" />
    Italic
  </UiToggle>
</template>`;

/**
 * Toggle with text label.
 */
export const WithText: Story = {
  render: () => ({
    components: { UiToggle, UiIcon },
    template: `<UiToggle aria-label="Toggle italic">
      <UiIcon name="italic" />
      Italic
    </UiToggle>`,
  }),
  parameters: {
    docs: {
      source: {
        code: withTextTemplateSource,
      },
    },
  },
};

const smallTemplateSource = `<script setup lang="ts">
import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiToggle size="sm" aria-label="Toggle italic">
    <UiIcon name="italic" />
  </UiToggle>
</template>`;

/**
 * Small size toggle.
 */
export const Small: Story = {
  render: () => ({
    components: { UiToggle, UiIcon },
    template: `<UiToggle size="sm" aria-label="Toggle italic">
      <UiIcon name="italic" />
    </UiToggle>`,
  }),
  parameters: {
    docs: {
      source: {
        code: smallTemplateSource,
      },
    },
  },
};

const largeTemplateSource = `<script setup lang="ts">
import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiToggle size="lg" aria-label="Toggle italic">
    <UiIcon name="italic" />
  </UiToggle>
</template>`;

/**
 * Large size toggle.
 */
export const Large: Story = {
  render: () => ({
    components: { UiToggle, UiIcon },
    template: `<UiToggle size="lg" aria-label="Toggle italic">
      <UiIcon name="italic" />
    </UiToggle>`,
  }),
  parameters: {
    docs: {
      source: {
        code: largeTemplateSource,
      },
    },
  },
};

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

<template>
  <UiToggle disabled aria-label="Toggle underline">
    <UiIcon name="underline" />
  </UiToggle>
</template>`;

/**
 * Disabled toggle.
 */
export const Disabled: Story = {
  render: () => ({
    components: { UiToggle, UiIcon },
    template: `<UiToggle disabled aria-label="Toggle underline">
      <UiIcon name="underline" />
    </UiToggle>`,
  }),
  parameters: {
    docs: {
      source: {
        code: disabledTemplateSource,
      },
    },
  },
};

const allStatesTemplateSource = `<script setup lang="ts">
import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="flex flex-col gap-6">
    <!-- Variants -->
    <div>
      <p class="body-14-medium mb-2">Variants</p>
      <div class="flex items-center gap-2">
        <UiToggle aria-label="Toggle bold">
          <UiIcon name="bold" />
        </UiToggle>
        <UiToggle default-value aria-label="Toggle bold (pressed)">
          <UiIcon name="bold" />
        </UiToggle>
        <UiToggle variant="outline" aria-label="Toggle italic">
          <UiIcon name="italic" />
        </UiToggle>
        <UiToggle variant="outline" default-value aria-label="Toggle italic (pressed)">
          <UiIcon name="italic" />
        </UiToggle>
        <UiToggle variant="soft" aria-label="Toggle underline">
          <UiIcon name="underline" />
        </UiToggle>
        <UiToggle variant="soft" default-value aria-label="Toggle underline (pressed)">
          <UiIcon name="underline" />
        </UiToggle>
      </div>
    </div>

    <!-- Sizes -->
    <div>
      <p class="body-14-medium mb-2">Sizes</p>
      <div class="flex items-end gap-2">
        <UiToggle size="sm" aria-label="Toggle bold">
          <UiIcon name="bold" />
        </UiToggle>
        <UiToggle aria-label="Toggle bold">
          <UiIcon name="bold" />
        </UiToggle>
        <UiToggle size="lg" aria-label="Toggle bold">
          <UiIcon name="bold" />
        </UiToggle>
      </div>
    </div>

    <!-- With Text -->
    <div>
      <p class="body-14-medium mb-2">With Text</p>
      <div class="flex items-center gap-2">
        <UiToggle aria-label="Toggle italic">
          <UiIcon name="italic" />
          Italic
        </UiToggle>
      </div>
    </div>

    <!-- Disabled -->
    <div>
      <p class="body-14-medium mb-2">Disabled</p>
      <div class="flex items-center gap-2">
        <UiToggle disabled aria-label="Toggle underline">
          <UiIcon name="underline" />
        </UiToggle>
        <UiToggle disabled default-value aria-label="Toggle underline (pressed)">
          <UiIcon name="underline" />
        </UiToggle>
        <UiToggle disabled variant="outline" aria-label="Toggle underline">
          <UiIcon name="underline" />
        </UiToggle>
        <UiToggle disabled variant="outline" default-value aria-label="Toggle underline (pressed)">
          <UiIcon name="underline" />
        </UiToggle>
        <UiToggle disabled variant="soft" aria-label="Toggle underline">
          <UiIcon name="underline" />
        </UiToggle>
        <UiToggle disabled variant="soft" default-value aria-label="Toggle underline (pressed)">
          <UiIcon name="underline" />
        </UiToggle>
      </div>
    </div>
  </div>
</template>`;

/**
 * All toggle states displayed together: variants, sizes, with text, and disabled states.
 */
export const AllStates: Story = {
  render: () => ({
    components: { UiToggle, UiIcon },
    template: `
      <div class="flex flex-col gap-6">
        <!-- Variants -->
        <div>
          <p class="body-14-medium mb-2">Variants</p>
          <div class="flex items-center gap-2">
            <UiToggle aria-label="Toggle bold">
              <UiIcon name="bold" />
            </UiToggle>
            <UiToggle default-value aria-label="Toggle bold (pressed)">
              <UiIcon name="bold" />
            </UiToggle>
            <UiToggle variant="outline" aria-label="Toggle italic">
              <UiIcon name="italic" />
            </UiToggle>
            <UiToggle variant="outline" default-value aria-label="Toggle italic (pressed)">
              <UiIcon name="italic" />
            </UiToggle>
            <UiToggle variant="soft" aria-label="Toggle underline">
              <UiIcon name="underline" />
            </UiToggle>
            <UiToggle variant="soft" default-value aria-label="Toggle underline (pressed)">
              <UiIcon name="underline" />
            </UiToggle>
          </div>
        </div>

        <!-- Sizes -->
        <div>
          <p class="body-14-medium mb-2">Sizes</p>
          <div class="flex items-end gap-2">
            <UiToggle size="sm" aria-label="Toggle bold">
              <UiIcon name="bold" />
            </UiToggle>
            <UiToggle aria-label="Toggle bold">
              <UiIcon name="bold" />
            </UiToggle>
            <UiToggle size="lg" aria-label="Toggle bold">
              <UiIcon name="bold" />
            </UiToggle>
          </div>
        </div>

        <!-- With Text -->
        <div>
          <p class="body-14-medium mb-2">With Text</p>
          <div class="flex items-center gap-2">
            <UiToggle aria-label="Toggle italic">
              <UiIcon name="italic" />
              Italic
            </UiToggle>
          </div>
        </div>

        <!-- Disabled -->
        <div>
          <p class="body-14-medium mb-2">Disabled</p>
          <div class="flex items-center gap-2">
            <UiToggle disabled aria-label="Toggle underline">
              <UiIcon name="underline" />
            </UiToggle>
            <UiToggle disabled default-value aria-label="Toggle underline (pressed)">
              <UiIcon name="underline" />
            </UiToggle>
            <UiToggle disabled variant="outline" aria-label="Toggle underline">
              <UiIcon name="underline" />
            </UiToggle>
            <UiToggle disabled variant="outline" default-value aria-label="Toggle underline (pressed)">
              <UiIcon name="underline" />
            </UiToggle>
            <UiToggle disabled variant="soft" aria-label="Toggle underline">
              <UiIcon name="underline" />
            </UiToggle>
            <UiToggle disabled variant="soft" default-value aria-label="Toggle underline (pressed)">
              <UiIcon name="underline" />
            </UiToggle>
          </div>
        </div>
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: allStatesTemplateSource,
      },
    },
  },
};
