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

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

const meta = {
  title: 'Organisms/CpDialog',
  component: CpDialog,
  argTypes: {
    maxWidth: {
      control: 'number',
      description: 'The maximum width of the dialog',
    },
    onClose: { action: 'closed' },
  },
} satisfies Meta<typeof CpDialog>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default dialog featuring every common part: title and subtitle slots,
 * body content and a footer slot. Use the controls to experiment with each
 * prop in isolation.
 */
export const Default: Story = {
  args: {
    maxWidth: 600,
    title: 'Dialog title',
    subtitle: 'Dialog subtitle',
  },
  render: (args) => ({
    setup() {
      const isOpen = ref(false)
      return { args, isOpen }
    },
    template: `
      <CpButton @click="isOpen = true">Open Dialog</CpButton>
      <CpTransitionDialog>
        <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
          <template #title>Header slot</template>
          <template #subtitle>Subtitle</template>
          <p>This is the default slot content. You can put any content here.</p>
          <template #footer>
            <CpButton @click="isOpen = false">Cancel</CpButton>
            This is the footer slot
          </template>
        </CpDialog>
      </CpTransitionDialog>
    `,
  }),
}

/**
 * Pass the title and subtitle as plain strings through props instead of
 * slots — the simplest way to compose a dialog.
 */
export const TitleSubtitleWithProps: Story = {
  args: {
    maxWidth: 600,
    title: 'Dialog title',
    subtitle: 'Dialog subtitle',
  },
  render: (args) => ({
    setup() {
      const isOpen = ref(false)
      return { args, isOpen }
    },
    template: `
      <CpButton @click="isOpen = true">Open Dialog with string title/subtitle</CpButton>
      <CpTransitionDialog>
        <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
          <p>This is the default slot content. You can put any content here.</p>
          <template #footer>
            <CpButton @click="isOpen = false">Cancel</CpButton>
            This is the footer slot
          </template>
        </CpDialog>
      </CpTransitionDialog>
    `,
  }),
}

/**
 * Dialog with only body content — no title, subtitle or header.
 */
export const ContentOnly: Story = {
  args: {
    maxWidth: 600,
  },
  render: (args) => ({
    setup() {
      const isOpen = ref(false)
      return { args, isOpen }
    },
    template: `
      <CpButton @click="isOpen = true">Open Dialog (content only)</CpButton>
      <CpTransitionDialog>
        <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
          <p>This is the default slot content with no title or subtitle.</p>
          <template #footer>
            <CpButton @click="isOpen = false">Close</CpButton>
          </template>
        </CpDialog>
      </CpTransitionDialog>
    `,
  }),
}

/**
 * Provide rich title and subtitle through slots. Use `titleTag`/
 * `subtitleTag` to change the underlying element (e.g. `div` to allow
 * flex content).
 */
export const TitleSubtitleWithSlots: Story = {
  args: {
    maxWidth: 560,
  },
  render: (args) => ({
    setup() {
      const isOpen = ref(false)
      return { args, isOpen }
    },
    template: `
      <CpButton @click="isOpen = true">Open Dialog (flex title/subtitle)</CpButton>
      <CpTransitionDialog>
        <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false" title-tag="div" subtitle-tag="div">
          <template #title>
            <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
              <cp-icon type="info" style="flex-shrink: 0;" />
              <span>Dialog with flex layout</span>
            </div>
          </template>
          <template #subtitle>
            <div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
              <span>Optional info</span>
              <span style="color: var(--cp-text-tertiary);">•</span>
              <span>Last updated today</span>
            </div>
          </template>
          <p>Body content. Title and subtitle above are divs with flex layout.</p>
          <template #footer>
            <CpButton @click="isOpen = false">Close</CpButton>
          </template>
        </CpDialog>
      </CpTransitionDialog>
    `,
  }),
}

/**
 * Enable `isClosableOnClickOutside` so the dialog dismisses when the user
 * clicks the backdrop.
 */
export const ClosableOnClickOutside: Story = {
  args: {
    maxWidth: 600,
    isClosableOnClickOutside: true,
  },
  render: (args) => ({
    setup() {
      const isOpen = ref(false)
      return { args, isOpen }
    },
    template: `
      <CpButton @click="isOpen = true">Open Dialog</CpButton>
      <CpTransitionDialog>
        <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
          <template #title>Header slot</template>
          <template #subtitle>Subtitle</template>
          <p>This is the default slot content. You can put any content here.</p>
          <template #footer>
            <CpButton @click="isOpen = false">Cancel</CpButton>
            This is the footer slot
          </template>
        </CpDialog>
      </CpTransitionDialog>
    `,
  }),
}

/**
 * Prevent the dialog from being closed by the user.
 */
export const PreventClose: Story = {
  args: {
    maxWidth: 600,
    preventClose: true,
  },
  render: (args) => ({
    setup() {
      const isOpen = ref(false)
      return { args, isOpen }
    },
    template: `
      <CpButton @click="isOpen = true">Open Dialog</CpButton>
      <CpTransitionDialog>
        <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
          <template #title>Header slot</template>
          <template #subtitle>Subtitle</template>
          <p>This is the default slot content. You can put any content here.</p>
          <template #footer>
            <CpButton @click="isOpen = false">Cancel</CpButton>
            This is the footer slot
          </template>
        </CpDialog>
      </CpTransitionDialog>
    `,
  }),
}