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

const designStoryLink = '/?path=/docs/components-uicheckbox--design-notes';
const accessibilityStoryLink =
  '/?path=/docs/components-uicheckbox--accessibility';

/**
 * A control that allows the user to toggle between checked and not checked.
 */
const meta: Meta<typeof UiCheckbox> = {
  title: 'Components/UiCheckbox',
  component: UiCheckbox,
  tags: ['autodocs'],
  argTypes: {
    disabled: {
      control: 'boolean',
      description: 'Set component as disabled',
    },
    required: {
      control: 'boolean',
      description: 'Set component as required',
    },
  },
  args: {
    name: 'checkbox',
    disabled: false,
    required: false,
  },
  parameters: {
    docs: {
      links: [
        {
          label: 'Designer docs',
          href: designStoryLink,
          icon: 'palette',
        },
        {
          label: 'Accessibility',
          href: accessibilityStoryLink,
          icon: 'accessibility',
        },
      ],
    },
  },
};

export default meta;

type Story = StoryObj<typeof UiCheckbox>;

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

const checked = ref(false)
</script>

<template>
  <div class="flex items-center gap-3">
    <UiCheckbox id="terms" name="terms" v-model="checked" />
    <label for="terms" class="body-14-medium">
      Accept terms and conditions
    </label>
  </div>
</template>`;

/**
 * Simple checkbox with label.
 */
export const Default: Story = {
  render: (args) => ({
    components: { UiCheckbox },
    setup() {
      const checked = ref(false);
      return { args, checked };
    },
    template: `<div class="flex items-center gap-3">
      <UiCheckbox id="terms" name="terms" v-model="checked" :disabled="args.disabled" :required="args.required" />
      <label for="terms" class="body-14-medium">
        Accept terms and conditions
      </label>
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

/**
 * Design guidance for choosing checkbox patterns and writing clear option labels.
 */
export const DesignNotes: Story = {
  render: () => ({
    template: `
      <section class="flex flex-col gap-8 p-4 bg-surface-secondary">
        <div>
          <h2 class="heading-m font-bold text-content-on-surface-primary">Do's and Don'ts</h2>
        </div>

        <div class="grid gap-8 md:grid-cols-2">
          <div class="flex flex-col gap-3">
            <h3 class="body-16-medium text-content-on-surface-primary">Do</h3>
            <ul class="body-16-regular list-disc space-y-2 pl-5 text-content-on-surface-primary">
              <li>Use checkboxes for independent choices</li>
              <li>Allow multiple selections when appropriate</li>
              <li>Write descriptive labels</li>
              <li>Group related options together</li>
              <li>Provide supporting descriptions when needed</li>
              <li>Use indeterminate states for partial selection patterns</li>
            </ul>
          </div>

          <div class="flex flex-col gap-3">
            <h3 class="body-16-medium text-content-on-surface-primary">Don't</h3>
            <ul class="body-16-regular list-disc space-y-2 pl-5 text-content-on-surface-primary">
              <li>Use checkboxes when only one choice is allowed (use radio instead)</li>
              <li>Present unrelated options in the same group</li>
              <li>Use vague labels like "Enable" or "Yes"</li>
              <li>Depend solely on color to communicate state</li>
            </ul>
          </div>
        </div>
      </section>
    `,
  }),
  parameters: {
    chromatic: {
      disableSnapshot: true,
    },
    docs: {
      canvas: {
        sourceState: 'none',
      },
    },
  },
};

/**
 * Accessibility guidance for checkbox labels, descriptions, keyboard focus, and contrast.
 */
export const Accessibility: Story = {
  render: () => ({
    components: { UiCheckbox },
    setup() {
      const defaultChecked = ref(true);
      const accessibleChecked = ref(true);
      return { defaultChecked, accessibleChecked };
    },
    template: `
      <section class="flex flex-col gap-6 p-4">
        <div>
          <h2 class="heading-m font-bold text-content-on-surface-primary">
            Accessibility
          </h2>
        </div>

        <div class="flex flex-col gap-6">
          <div class="flex flex-col gap-2">
            <h3 class="body-16-medium text-content-on-surface-primary">
              Requirements
            </h3>
            <ul class="body-16-regular list-disc pl-5 text-content-on-surface-primary">
              <li>Every checkbox has a visible label</li>
              <li>Descriptions remain readable and associated with the field</li>
              <li>Keyboard focus is correct in a checkbox group</li>
            </ul>
          </div>

          <div class="flex flex-col gap-2">
            <h3 class="body-16-medium text-content-on-surface-primary">
              Enable accessibility theme
            </h3>
            <p class="body-16-regular text-content-on-surface-primary">
              When accessibility is required, enable our accessibility theme. This
              increases contrast and ensures there are no color contrast issues.
            </p>
          </div>
        </div>

        <div class="grid gap-4 md:grid-cols-2">
          <div class="flex flex-col gap-3">
            <h3 class="label-16-medium text-center text-content-on-surface-primary">
              Default
            </h3>
            <div class="flex min-h-20 items-center justify-center border border-border-surface-default p-6">
              <div class="flex items-start gap-3">
                <UiCheckbox
                  id="checkbox-accessibility-default"
                  v-model="defaultChecked"
                  name="checkbox-accessibility-default"
                  aria-describedby="checkbox-accessibility-default-description"
                />
                <div class="grid gap-1">
                  <label for="checkbox-accessibility-default" class="body-14-medium text-content-on-surface-primary">
                    Checkbox Text
                  </label>
                  <p id="checkbox-accessibility-default-description" class="body-14-regular text-content-on-surface-secondary">
                    This is a checkbox description.
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div class="accessible-theme flex flex-col gap-3">
            <h3 class="label-16-medium text-center text-content-on-surface-primary">
              Accessible
            </h3>
            <div class="flex min-h-20 items-center justify-center border border-border-surface-default p-6">
              <div class="flex items-start gap-3">
                <UiCheckbox
                  id="checkbox-accessibility-accessible"
                  v-model="accessibleChecked"
                  name="checkbox-accessibility-accessible"
                  aria-describedby="checkbox-accessibility-accessible-description"
                />
                <div class="grid gap-1">
                  <label for="checkbox-accessibility-accessible" class="body-14-medium text-content-on-surface-primary">
                    Checkbox Text
                  </label>
                  <p id="checkbox-accessibility-accessible-description" class="body-14-regular text-content-on-surface-secondary">
                    This is a checkbox description.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    `,
  }),
  parameters: {
    chromatic: {
      disableSnapshot: true,
    },
    docs: {
      canvas: {
        sourceState: 'none',
      },
    },
  },
};

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

const checked = ref(true)
</script>

<template>
  <div class="flex items-start gap-3">
    <UiCheckbox id="terms-2" name="terms-2" v-model="checked" />
    <div class="grid gap-2">
      <label for="terms-2" class="body-14-medium">
        Accept terms and conditions
      </label>
      <p class="body-14-regular text-muted-foreground">
        By clicking this checkbox, you agree to the terms and conditions.
      </p>
    </div>
  </div>
</template>`;

/**
 * Checkbox with label and description text.
 */
export const WithDescription: Story = {
  render: (args) => ({
    components: { UiCheckbox },
    setup() {
      const checked = ref(true);
      return { args, checked };
    },
    template: `<div class="flex items-start gap-3">
      <UiCheckbox id="terms-2" name="terms-2" v-model="checked" :disabled="args.disabled" :required="args.required" />
      <div class="grid gap-2">
        <label for="terms-2" class="body-14-medium">
          Accept terms and conditions
        </label>
        <p class="body-14-regular text-muted-foreground">
          By clicking this checkbox, you agree to the terms and conditions.
        </p>
      </div>
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: withDescriptionTemplateSource,
      },
    },
  },
};

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

<template>
  <div class="flex items-start gap-3">
    <UiCheckbox id="toggle" name="toggle" disabled />
    <label for="toggle" class="body-14-medium">
      Enable notifications
    </label>
  </div>
</template>`;

/**
 * Disabled checkbox.
 */
export const Disabled: Story = {
  args: {
    disabled: true,
  },
  render: (args) => ({
    components: { UiCheckbox },
    setup() {
      return { args };
    },
    template: `<div class="flex items-start gap-3">
      <UiCheckbox id="toggle" name="toggle" :disabled="args.disabled" />
      <label for="toggle" class="body-14-medium">
        Enable notifications
      </label>
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: disabledTemplateSource,
      },
    },
  },
};

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

const enabled = ref(true)
</script>

<template>
  <label
    class="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950"
  >
    <UiCheckbox
      id="notifications"
      name="notifications"
      v-model="enabled"
      class="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
    />
    <div class="grid gap-1.5 font-normal">
      <p class="body-14-medium leading-none">
        Enable notifications
      </p>
      <p class="body-14-regular text-muted-foreground">
        You can enable or disable notifications at any time.
      </p>
    </div>
  </label>
</template>`;

/**
 * Styled card checkbox with custom colors.
 * The label wraps the checkbox for better click target.
 */
export const Card: Story = {
  render: (args) => ({
    components: { UiCheckbox },
    setup() {
      const enabled = ref(true);
      return { args, enabled };
    },
    template: `<label
      class="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950"
    >
      <UiCheckbox
        id="notifications"
        name="notifications"
        v-model="enabled"
        :disabled="args.disabled"
        class="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
      />
      <div class="grid gap-1.5 font-normal">
        <p class="body-14-medium leading-none">
          Enable notifications
        </p>
        <p class="body-14-regular text-muted-foreground">
          You can enable or disable notifications at any time.
        </p>
      </div>
    </label>`,
  }),
  parameters: {
    docs: {
      source: {
        code: cardTemplateSource,
      },
    },
  },
};
