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

const meta: Meta<typeof FdsTableHead> = {
  title: 'FDS/Table/FdsTableHead',
  component: FdsTableHead,
  tags: ['autodocs'],
  argTypes: {
    heading: { control: { type: 'text' } },
    align: { control: { type: 'radio' }, options: ['left', 'center', 'right'] },
    icon: { control: { type: 'select' }, options: ['sort', 'ascending', 'descending'] },
  },
  args: {
    heading: 'Namn',
    align: 'left',
    icon: 'sort',
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args: Story['args']) => ({
    components: { FdsTableHead },
    setup: () => ({ args }),
    template: `
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <FdsTableHead v-bind="args">Namn</FdsTableHead>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr>
            <td class="px-4 py-3 text-sm text-gray-700">Exempel data</td>
          </tr>
        </tbody>
      </table>
    `,
  }),
}

export const Sortable: Story = {
  render: (args: Story['args']) => ({
    components: { FdsTableHead },
    setup: () => ({ args }),
    template: `
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <FdsTableHead v-bind="args">Namn</FdsTableHead>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr>
            <td class="px-4 py-3 text-sm text-gray-700">Exempel data</td>
          </tr>
        </tbody>
      </table>
    `,
  }),
}

export const SortedAsc: Story = {
  args: { icon: 'ascending' },
  render: (args: Story['args']) => ({
    components: { FdsTableHead },
    setup: () => ({ args }),
    template: `
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <FdsTableHead v-bind="args">Namn</FdsTableHead>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr>
            <td class="px-4 py-3 text-sm text-gray-700">Exempel data</td>
          </tr>
        </tbody>
      </table>
    `,
  }),
}

export const SortedDesc: Story = {
  args: { icon: 'descending' },
  render: (args: Story['args']) => ({
    components: { FdsTableHead },
    setup: () => ({ args }),
    template: `
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <FdsTableHead v-bind="args">Namn</FdsTableHead>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr>
            <td class="px-4 py-3 text-sm text-gray-700">Exempel data</td>
          </tr>
        </tbody>
      </table>
    `,
  }),
}

export const CenterAligned: Story = {
  args: { align: 'center' },
  render: (args: Story['args']) => ({
    components: { FdsTableHead },
    setup: () => ({ args }),
    template: `
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <FdsTableHead v-bind="args">Centrerad</FdsTableHead>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr>
            <td class="px-4 py-3 text-sm text-gray-700 text-center">Exempel data</td>
          </tr>
        </tbody>
      </table>
    `,
  }),
}

export const RightAligned: Story = {
  args: { align: 'right' },
  render: (args: Story['args']) => ({
    components: { FdsTableHead },
    setup: () => ({ args }),
    template: `
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <FdsTableHead v-bind="args">Högerjusterad</FdsTableHead>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr>
            <td class="px-4 py-3 text-sm text-gray-700 text-right">Exempel data</td>
          </tr>
        </tbody>
      </table>
    `,
  }),
}