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

const meta: Meta<typeof FdsTable> = {
  title: 'FDS/Table/FdsTable',
  component: FdsTable,
  tags: ['autodocs'],
  argTypes: {
    bordered: { control: { type: 'boolean' } },
    compact: { control: { type: 'boolean' } },
  },
  args: {
    bordered: false,
    compact: false,
  },
}

export default meta
type Story = StoryObj<typeof meta>

const tableTransform = (storyContext: { args?: { bordered?: boolean; compact?: boolean } }) => {
  const args = storyContext?.args || {}
  const attrs = []
  if (args.bordered) attrs.push(':bordered="true"')
  if (args.compact) attrs.push(':compact="true"')

  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
  return `<FdsTable${attrsStr}>
  <table>
    <thead>
      <tr>
        <FdsTableHead>ID</FdsTableHead>
        <FdsTableHead>Namn</FdsTableHead>
        <FdsTableHead>E-post</FdsTableHead>
        <FdsTableHead>Roll</FdsTableHead>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in sampleData" :key="row.id">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.email }}</td>
        <td>{{ row.role }}</td>
      </tr>
    </tbody>
  </table>
</FdsTable>`
}

const sampleData = [
  { id: 1, name: 'Anna Andersson', email: 'anna@example.com', role: 'Admin' },
  { id: 2, name: 'Erik Eriksson', email: 'erik@example.com', role: 'User' },
  { id: 3, name: 'Maria Svensson', email: 'maria@example.com', role: 'User' },
  { id: 4, name: 'Lars Larsson', email: 'lars@example.com', role: 'Moderator' },
]

export const Default: Story = {
  render: (args: Story['args']) => ({
    components: { FdsTable, FdsTableHead },
    setup: () => ({ args, sampleData }),
    template: `
      <FdsTable v-bind="args">
        <table>
          <thead>
            <tr>
              <FdsTableHead>ID</FdsTableHead>
              <FdsTableHead>Namn</FdsTableHead>
              <FdsTableHead>E-post</FdsTableHead>
              <FdsTableHead>Roll</FdsTableHead>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in sampleData" :key="row.id">
              <td>{{ row.id }}</td>
              <td>{{ row.name }}</td>
              <td>{{ row.email }}</td>
              <td>{{ row.role }}</td>
            </tr>
          </tbody>
        </table>
      </FdsTable>
    `,
  }),
  parameters: {
    docs: {
      source: {
        transform: tableTransform,
      },
    },
  },
}

export const Bordered: Story = {
  args: { bordered: true },
  render: (args: Story['args']) => ({
    components: { FdsTable, FdsTableHead },
    setup: () => ({ args, sampleData }),
    template: `
      <FdsTable v-bind="args">
        <table>
          <thead>
            <tr>
              <FdsTableHead>ID</FdsTableHead>
              <FdsTableHead>Namn</FdsTableHead>
              <FdsTableHead>E-post</FdsTableHead>
              <FdsTableHead>Roll</FdsTableHead>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in sampleData" :key="row.id">
              <td>{{ row.id }}</td>
              <td>{{ row.name }}</td>
              <td>{{ row.email }}</td>
              <td>{{ row.role }}</td>
            </tr>
          </tbody>
        </table>
      </FdsTable>
    `,
  }),
  parameters: {
    docs: {
      source: {
        transform: tableTransform,
      },
    },
  },
}

export const Compact: Story = {
  args: { compact: true },
  render: (args: Story['args']) => ({
    components: { FdsTable, FdsTableHead },
    setup: () => ({ args, sampleData }),
    template: `
      <FdsTable v-bind="args">
        <table>
          <thead>
            <tr>
              <FdsTableHead>ID</FdsTableHead>
              <FdsTableHead>Namn</FdsTableHead>
              <FdsTableHead>E-post</FdsTableHead>
              <FdsTableHead>Roll</FdsTableHead>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in sampleData" :key="row.id">
              <td>{{ row.id }}</td>
              <td>{{ row.name }}</td>
              <td>{{ row.email }}</td>
              <td>{{ row.role }}</td>
            </tr>
          </tbody>
        </table>
      </FdsTable>
    `,
  }),
  parameters: {
    docs: {
      source: {
        transform: tableTransform,
      },
    },
  },
}

export const Sortable: Story = {
  render: () => ({
    components: { FdsTable, FdsTableHead },
    setup: () => ({ sampleData }),
    template: `
      <FdsTable>
        <table>
          <thead>
            <tr>
              <FdsTableHead icon="sort">ID</FdsTableHead>
              <FdsTableHead icon="ascending">Namn</FdsTableHead>
              <FdsTableHead icon="descending">E-post</FdsTableHead>
              <FdsTableHead>Roll</FdsTableHead>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in sampleData" :key="row.id">
              <td>{{ row.id }}</td>
              <td>{{ row.name }}</td>
              <td>{{ row.email }}</td>
              <td>{{ row.role }}</td>
            </tr>
          </tbody>
        </table>
      </FdsTable>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: `<FdsTable>
  <table>
    <thead>
      <tr>
        <FdsTableHead icon="sort">ID</FdsTableHead>
        <FdsTableHead icon="ascending">Namn</FdsTableHead>
        <FdsTableHead icon="descending">E-post</FdsTableHead>
        <FdsTableHead>Roll</FdsTableHead>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in sampleData" :key="row.id">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.email }}</td>
        <td>{{ row.role }}</td>
      </tr>
    </tbody>
  </table>
</FdsTable>`,
      },
    },
  },
}