import type { Meta, StoryObj } from '@storybook/vue3'
import { ref } from 'vue'
import FdsPagination from './FdsPagination.vue'

const meta: Meta<typeof FdsPagination> = {
  title: 'FDS/FdsPagination',
  component: FdsPagination,
  tags: ['autodocs'],
  argTypes: {
    current: { control: { type: 'number' } },
    max: { control: { type: 'number' } },
    loading: { control: { type: 'boolean' } },
  },
  args: {
    current: 1,
    max: 10,
    loading: false,
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args: NonNullable<Story['args']>) => ({
    components: { FdsPagination },
    setup: () => {
      const current = ref((args.current ?? 1) as number)
      const handlePaginate = (page: number) => {
        current.value = page
      }
      return { args, current, handlePaginate }
    },
    template: `<FdsPagination :current="current" :max="args.max" :loading="args.loading" @paginate="handlePaginate" />`,
  }),
}

export const MiddlePage: Story = {
  render: (args: NonNullable<Story['args']>) => ({
    components: { FdsPagination },
    setup: () => {
      const current = ref((args.current ?? 1) as number)
      const handlePaginate = (page: number) => {
        current.value = page
      }
      return { args, current, handlePaginate }
    },
    template: `<FdsPagination :current="current" :max="args.max" :loading="args.loading" @paginate="handlePaginate" />`,
  }),
  args: {
    current: 5,
    max: 10,
  },
}

export const LastPage: Story = {
  render: (args: NonNullable<Story['args']>) => ({
    components: { FdsPagination },
    setup: () => {
      const current = ref((args.current ?? 1) as number)
      const handlePaginate = (page: number) => {
        current.value = page
      }
      return { args, current, handlePaginate }
    },
    template: `<FdsPagination :current="current" :max="args.max" :loading="args.loading" @paginate="handlePaginate" />`,
  }),
  args: {
    current: 10,
    max: 10,
  },
}

export const LargeMax: Story = {
  render: (args: NonNullable<Story['args']>) => ({
    components: { FdsPagination },
    setup: () => {
      const current = ref((args.current ?? 1) as number)
      const handlePaginate = (page: number) => {
        current.value = page
      }
      return { args, current, handlePaginate }
    },
    template: `<FdsPagination :current="current" :max="args.max" :loading="args.loading" @paginate="handlePaginate" />`,
  }),
  args: {
    current: 1,
    max: 100,
  },
}

export const WithLoading: Story = {
  render: (args: NonNullable<Story['args']>) => ({
    components: { FdsPagination },
    setup: () => {
      const current = ref((args.current ?? 1) as number)
      const handlePaginate = (page: number) => {
        current.value = page
      }
      return { args, current, handlePaginate }
    },
    template: `<FdsPagination :current="current" :max="args.max" :loading="args.loading" @paginate="handlePaginate" />`,
  }),
  args: {
    current: 1,
    max: 10,
    loading: true,
  },
}