import type { Meta, StoryObj } from '@storybook/vue3'
import { ref } from 'vue'
import FdsButtonPrimary from '../Buttons/FdsButtonPrimary/FdsButtonPrimary.vue'
import FdsButtonSecondary from '../Buttons/FdsButtonSecondary/FdsButtonSecondary.vue'
import FdsDrawer from './FdsDrawer.vue'

const meta: Meta<typeof FdsDrawer> = {
  title: 'FDS/FdsDrawer',
  component: FdsDrawer,
  tags: ['autodocs'],
  argTypes: {
    heading: { control: { type: 'text' } },
    size: { control: { type: 'select' }, options: ['sm', 'md', 'lg', 'xl'] },
    strict: { control: { type: 'boolean' } },
    lockScroll: { control: { type: 'boolean' } },
    info: { control: { type: 'select' }, options: ['valid', 'invalid', 'warning'] },
    open: { control: { type: 'boolean' } },
  },
  args: {
    heading: 'Drawer heading',
    size: 'md',
    strict: false,
    lockScroll: false,
    info: undefined,
    open: false,
  },
}

export default meta
type Story = StoryObj<typeof meta>

const createDrawerStory = (args: any) => {
  const open = ref(args.open ?? false)
  const handleClose = () => {
    open.value = false
  }
  const handleOpen = () => {
    open.value = true
  }
  return { args, open, handleClose, handleOpen }
}

const drawerTransform = (storyContext: {
  args?: {
    heading?: string
    size?: string
    open?: boolean
    lockScroll?: boolean
    info?: string
    strict?: boolean
  }
}) => {
  const args = storyContext?.args || {}
  const attrs = []

  if (args.heading) attrs.push(`heading="${args.heading}"`)
  if (args.size && args.size !== 'md') attrs.push(`size="${args.size}"`)
  if (args.open) attrs.push(':open="true"')
  if (args.lockScroll) attrs.push('lockScroll')
  if (args.info) attrs.push(`info="${args.info}"`)
  if (args.strict) attrs.push('strict')
  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''

  return `<FdsDrawer${attrsStr} @close="handleClose">
  <p>This is the drawer content. You can add any content here.</p>
  <template #drawer-footer>
    <FdsButtonSecondary text="Cancel" @click="handleClose" />
    <FdsButtonPrimary text="Confirm" />
  </template>
</FdsDrawer>`
}

export const Default: Story = {
  render: (args: Story['args']) => ({
    components: { FdsDrawer, FdsButtonPrimary, FdsButtonSecondary },
    setup: () => createDrawerStory(args),
    template: `
      <div>
        <FdsButtonPrimary text="Open Drawer" @click="handleOpen" />
        <FdsDrawer v-bind="args" :open="open" @close="handleClose">
          <p>This is the drawer content. You can add any content here.</p>
          <template #drawer-footer>
            <FdsButtonSecondary text="Cancel" @click="handleClose" />
            <FdsButtonPrimary text="Confirm" />
          </template>
        </FdsDrawer>
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        transform: drawerTransform,
      },
    },
  },
}

export const Strict: Story = {
  render: (args: Story['args']) => ({
    components: { FdsDrawer, FdsButtonPrimary },
    setup: () => createDrawerStory(args),
    template: `
      <div>
        <FdsButtonPrimary text="Open Drawer" @click="handleOpen" />
        <FdsDrawer v-bind="args" :open="open" @close="handleClose">
          <p>This is a strict drawer. You cannot close it by clicking the backdrop or pressing Escape.</p>
          <p>Use lockScroll and programmatic close from your own actions when needed.</p>
        </FdsDrawer>
      </div>
    `,
  }),
  args: {
    strict: true,
  },
}

export const LargeSize: Story = {
  render: (args: Story['args']) => ({
    components: { FdsDrawer, FdsButtonPrimary },
    setup: () => createDrawerStory(args),
    template: `
      <div>
        <FdsButtonPrimary text="Open Drawer" @click="handleOpen" />
        <FdsDrawer v-bind="args" :open="open" @close="handleClose">
          <p>This is a large drawer with more space for content.</p>
          <p>You can add multiple paragraphs and other content here.</p>
        </FdsDrawer>
      </div>
    `,
  }),
  args: {
    size: 'xl',
  },
}

export const LongContent: Story = {
  render: (args: Story['args']) => ({
    components: { FdsDrawer, FdsButtonPrimary },
    setup: () => createDrawerStory(args),
    template: `
      <div>
        <FdsButtonPrimary text="Open Drawer" @click="handleOpen" />
        <FdsDrawer v-bind="args" :open="open" @close="handleClose">
          <p>This is the first paragraph of content.</p>
          <p>This is the second paragraph with more information about the topic at hand.</p>
          <p>Here is a third paragraph that provides additional context and details.</p>
          <p>And yet another paragraph to demonstrate the scrolling behavior.</p>
          <p>This paragraph continues to show how the content flows in the drawer.</p>
          <p>More content is added here to make the drawer longer and more scrollable.</p>
          <p>Another paragraph to show the sticky close button in action.</p>
          <p>This content should be long enough to require scrolling.</p>
          <p>The header with the close button should remain sticky at the top as you scroll.</p>
          <p>This is the final paragraph to complete the long content example.</p>
        </FdsDrawer>
      </div>
    `,
  }),
  args: {
    heading: 'Long Content Drawer',
    size: 'md',
    lockScroll: true,
  },
}

export const LongContentWithStickyFooter: Story = {
  render: (args: Story['args']) => ({
    components: { FdsDrawer, FdsButtonPrimary, FdsButtonSecondary },
    setup: () => createDrawerStory(args),
    template: `
      <div>
        <FdsButtonPrimary text="Open Drawer" @click="handleOpen" />
        <FdsDrawer v-bind="args" :open="open" @close="handleClose">
          <p v-for="n in 20" :key="n">
            Paragraph {{ n }}. The footer stays at the bottom while this content scrolls.
          </p>
          <template #drawer-footer>
            <FdsButtonSecondary text="Cancel" @click="handleClose" />
            <FdsButtonPrimary text="Save Changes" />
          </template>
        </FdsDrawer>
      </div>
    `,
  }),
  args: {
    heading: 'Long Content Drawer',
    size: 'md',
    lockScroll: true,
  },
}