import type { Meta, StoryObj } from '@storybook/vue3'
import { UPagination } from '../components'
import { UPaginationProps } from '../components/UPagination/UPagination'
import { ExtractPropTypes, ref } from 'vue'

const meta: Meta<typeof UPagination> = {
  title: 'Example/Pagination',
  component: UPagination,
  tags: ['autodocs'],
  argTypes: {
    type: {
      control: 'select',
      options: ['default', 'minimal'],
    },
    shape: {
      control: 'select',
      options: ['square', 'circle'],
    },
    align: {
      control: 'select',
      options: ['left', 'center', 'right'],
    },
    pagesCount: { control: 'text' },
  },
}

export default meta

type Story = StoryObj<typeof UPagination>

export const Default: Story = {
  render: (args: ExtractPropTypes<UPaginationProps>) => ({
    components: { UPagination },
    setup() {
      return { args }
    },
    template:
      '<UPagination v-bind="args" v-model="args.modelValue" class="mt-10 mb-12"></UPagination>',
  }),
  args: {
    modelValue: '2',
    type: 'default',
    pagesCount: '10',
  } as UPaginationProps,
}

export const PaginationWithContainer: Story = {
  render: (args: ExtractPropTypes<UPaginationProps>) => ({
    components: { UPagination },
    setup() {
      return { args }
    },
    template:
      '<div class="max-w-sm" ><UPagination v-bind="args" v-model="args.modelValue" class="mt-10 mb-12"></UPagination></div>',
  }),
  args: {
    modelValue: '2',
    type: 'default',
    pagesCount: '10',
  } as UPaginationProps,
}