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

/**
 * UiPopover is a floating container anchored to a trigger element, used to surface secondary content without leaving the current context.
 * Use it for forms, pickers, and details that should dismiss on outside click; for blocking confirmations, use `UiDialog` or `UiAlertDialog`.
 */
const meta: Meta<typeof UiPopover> = {
  title: 'Components/UiPopover',
  component: UiPopover,
  tags: ['autodocs'],
  argTypes: {
    open: {
      control: 'boolean',
      description: 'Controls whether the popover is open',
    },
    modal: {
      control: 'boolean',
      description: 'Whether the popover should be modal',
    },
  },
  args: {
    open: false,
    modal: false,
  },
};

export default meta;
type Story = StoryObj<typeof UiPopover>;

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

<template>
  <UiPopover>
    <UiPopoverTrigger as-child>
      <UiButton variant="outline">Open Popover</UiButton>
    </UiPopoverTrigger>
    <UiPopoverContent>
      <div class="gap-y-2">
        <h4 class="font-medium leading-none">Dimensions</h4>
        <p class="text-sm text-muted-foreground">
          Set the dimensions for the layer.
        </p>
      </div>
    </UiPopoverContent>
  </UiPopover>
</template>`;

/**
 * Default popover with customizable content.
 * Click the trigger button to open the popover.
 */
export const Default: Story = {
  render: (args) => ({
    components: { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton },
    setup() {
      const open = ref(args.open);
      const modal = ref(args.modal);
      watch(
        () => args.open,
        (val) => {
          open.value = val;
        },
      );
      watch(
        () => args.modal,
        (val) => {
          modal.value = val;
        },
      );
      return { open, modal };
    },
    template: `
      <UiPopover v-model:open="open" :modal="modal">
        <UiPopoverTrigger as-child>
          <UiButton variant="outline">Open Popover</UiButton>
        </UiPopoverTrigger>
        <UiPopoverContent>
          <div class="gap-y-2">
            <h4 class="font-medium leading-none">Dimensions</h4>
            <p class="text-sm text-muted-foreground">
              Set the dimensions for the layer.
            </p>
          </div>
        </UiPopoverContent>
      </UiPopover>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

const controlledTemplateSource = `<script setup lang="ts">
import { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton } from '@aleph-alpha/ui-library'
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <UiPopover v-model:open="open">
    <UiPopoverTrigger as-child>
      <UiButton variant="outline">
        {{ open ? 'Close' : 'Open' }} Popover
      </UiButton>
    </UiPopoverTrigger>
    <UiPopoverContent>
      <div class="gap-y-2">
        <h4 class="font-medium leading-none">Controlled Popover</h4>
        <p class="text-sm text-muted-foreground">
          This popover is controlled via v-model:open.
        </p>
        <UiButton size="sm" @click="open = false">Close</UiButton>
      </div>
    </UiPopoverContent>
  </UiPopover>
</template>`;

/**
 * Controlled popover with programmatic state management.
 * Use `v-model:open` to control the open state from parent.
 */
export const Controlled: Story = {
  render: () => ({
    components: { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton },
    setup() {
      const open = ref(false);
      return { open };
    },
    template: `
      <UiPopover v-model:open="open">
        <UiPopoverTrigger as-child>
          <UiButton variant="outline">
            {{ open ? 'Close' : 'Open' }} Popover
          </UiButton>
        </UiPopoverTrigger>
        <UiPopoverContent>
          <div class="gap-y-2">
            <h4 class="font-medium leading-none">Controlled Popover</h4>
            <p class="text-sm text-muted-foreground">
              This popover is controlled via v-model:open.
            </p>
            <UiButton size="sm" @click="open = false">Close</UiButton>
          </div>
        </UiPopoverContent>
      </UiPopover>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: {
      source: {
        code: controlledTemplateSource,
      },
    },
  },
};

const positionsTemplateSource = `<script setup lang="ts">
import { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="flex gap-4 flex-wrap">
    <UiPopover>
      <UiPopoverTrigger as-child>
        <UiButton variant="outline">Top</UiButton>
      </UiPopoverTrigger>
      <UiPopoverContent side="top">
        <p class="text-sm">Popover on top</p>
      </UiPopoverContent>
    </UiPopover>

    <UiPopover>
      <UiPopoverTrigger as-child>
        <UiButton variant="outline">Right</UiButton>
      </UiPopoverTrigger>
      <UiPopoverContent side="right">
        <p class="text-sm">Popover on right</p>
      </UiPopoverContent>
    </UiPopover>

    <UiPopover>
      <UiPopoverTrigger as-child>
        <UiButton variant="outline">Bottom</UiButton>
      </UiPopoverTrigger>
      <UiPopoverContent side="bottom">
        <p class="text-sm">Popover on bottom</p>
      </UiPopoverContent>
    </UiPopover>

    <UiPopover>
      <UiPopoverTrigger as-child>
        <UiButton variant="outline">Left</UiButton>
      </UiPopoverTrigger>
      <UiPopoverContent side="left">
        <p class="text-sm">Popover on left</p>
      </UiPopoverContent>
    </UiPopover>
  </div>
</template>`;

/**
 * Demonstrates different position options for the popover.
 * Use the `side` prop on `UiPopoverContent` to change position.
 */
export const Positions: Story = {
  render: () => ({
    components: { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton },
    template: `
      <div class="flex gap-4 flex-wrap">
        <UiPopover>
          <UiPopoverTrigger as-child>
            <UiButton variant="outline">Top</UiButton>
          </UiPopoverTrigger>
          <UiPopoverContent side="top">
            <p class="text-sm">Popover on top</p>
          </UiPopoverContent>
        </UiPopover>

        <UiPopover>
          <UiPopoverTrigger as-child>
            <UiButton variant="outline">Right</UiButton>
          </UiPopoverTrigger>
          <UiPopoverContent side="right">
            <p class="text-sm">Popover on right</p>
          </UiPopoverContent>
        </UiPopover>

        <UiPopover>
          <UiPopoverTrigger as-child>
            <UiButton variant="outline">Bottom</UiButton>
          </UiPopoverTrigger>
          <UiPopoverContent side="bottom">
            <p class="text-sm">Popover on bottom</p>
          </UiPopoverContent>
        </UiPopover>

        <UiPopover>
          <UiPopoverTrigger as-child>
            <UiButton variant="outline">Left</UiButton>
          </UiPopoverTrigger>
          <UiPopoverContent side="left">
            <p class="text-sm">Popover on left</p>
          </UiPopoverContent>
        </UiPopover>
      </div>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: {
      source: {
        code: positionsTemplateSource,
      },
    },
  },
};

const alignmentsTemplateSource = `<script setup lang="ts">
import { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="flex gap-4 flex-wrap">
    <UiPopover>
      <UiPopoverTrigger as-child>
        <UiButton variant="outline">Align Start</UiButton>
      </UiPopoverTrigger>
      <UiPopoverContent align="start">
        <p class="text-sm">Aligned to start</p>
      </UiPopoverContent>
    </UiPopover>

    <UiPopover>
      <UiPopoverTrigger as-child>
        <UiButton variant="outline">Align Center</UiButton>
      </UiPopoverTrigger>
      <UiPopoverContent align="center">
        <p class="text-sm">Aligned to center</p>
      </UiPopoverContent>
    </UiPopover>

    <UiPopover>
      <UiPopoverTrigger as-child>
        <UiButton variant="outline">Align End</UiButton>
      </UiPopoverTrigger>
      <UiPopoverContent align="end">
        <p class="text-sm">Aligned to end</p>
      </UiPopoverContent>
    </UiPopover>
  </div>
</template>`;

/**
 * Demonstrates different alignment options for the popover.
 * Use the `align` prop on `UiPopoverContent` to change alignment.
 */
export const Alignments: Story = {
  render: () => ({
    components: { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton },
    template: `
      <div class="flex gap-4 flex-wrap">
        <UiPopover>
          <UiPopoverTrigger as-child>
            <UiButton variant="outline">Align Start</UiButton>
          </UiPopoverTrigger>
          <UiPopoverContent align="start">
            <p class="text-sm">Aligned to start</p>
          </UiPopoverContent>
        </UiPopover>

        <UiPopover>
          <UiPopoverTrigger as-child>
            <UiButton variant="outline">Align Center</UiButton>
          </UiPopoverTrigger>
          <UiPopoverContent align="center">
            <p class="text-sm">Aligned to center</p>
          </UiPopoverContent>
        </UiPopover>

        <UiPopover>
          <UiPopoverTrigger as-child>
            <UiButton variant="outline">Align End</UiButton>
          </UiPopoverTrigger>
          <UiPopoverContent align="end">
            <p class="text-sm">Aligned to end</p>
          </UiPopoverContent>
        </UiPopover>
      </div>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: {
      source: {
        code: alignmentsTemplateSource,
      },
    },
  },
};

const openByDefaultTemplateSource = `<script setup lang="ts">
import { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton } from '@aleph-alpha/ui-library'
import { ref } from 'vue'

const open = ref(true)
</script>

<template>
  <div class="pt-4">
    <UiPopover v-model:open="open">
      <UiPopoverTrigger as-child>
        <UiButton variant="outline">Toggle Popover</UiButton>
      </UiPopoverTrigger>
      <UiPopoverContent>
        <div class="gap-y-2">
          <h4 class="font-medium leading-none">Popover Content</h4>
          <p class="text-sm text-muted-foreground">
            This popover is open by default for visual testing.
          </p>
        </div>
      </UiPopoverContent>
    </UiPopover>
  </div>
</template>`;

/**
 * Popover that starts open. Useful for visual regression testing
 * to capture the popover content without user interaction.
 */
export const OpenByDefault: Story = {
  render: () => ({
    components: { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton },
    setup() {
      const open = ref(true);
      return { open };
    },
    template: `
      <div class="pt-4">
        <UiPopover v-model:open="open">
          <UiPopoverTrigger as-child>
            <UiButton variant="outline">Toggle Popover</UiButton>
          </UiPopoverTrigger>
          <UiPopoverContent>
            <div class="gap-y-2">
              <h4 class="font-medium leading-none">Popover Content</h4>
              <p class="text-sm text-muted-foreground">
                This popover is open by default for visual testing.
              </p>
            </div>
          </UiPopoverContent>
        </UiPopover>
      </div>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: {
      source: {
        code: openByDefaultTemplateSource,
      },
    },
  },
};
