import React, { useEffect, useState, useMemo } from 'react';
import { StoryObj, Meta } from '@storybook/react';
import TableWithAccordion from './TableWithAccordion';

const meta: Meta<typeof TableWithAccordion> = {
  title: 'Components/TableWithAccordion',
  component: TableWithAccordion,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
};

type Story = StoryObj<typeof TableWithAccordion>;
const defaultArgs = {
  tableMeta: [],
  tableData: [],
};
const sampleData = [
  {
    title: 'Pre conditions',
    data: [
      {
        desc: 'Open Browser',
        modifiedBy: 'Ram',
        suiteName: 'test',
      },
    ],
  },
  {
    title: 'Steps',
    data: [
      {
        desc: '1. SG1',
        modifiedBy: 'Ram',
        suiteName: 'suite1',
      },
      {
        desc: '2. SG2',
        modifiedBy: 'Laxman',
        suiteName: 'suite 2',
      },
    ],
  },
  {
    title: 'Post conditions',
    data: [
      {
        desc: 'close browser',
        modifiedBy: 'Krishna',
        suiteName: 'test 2',
      },
    ],
  },
];

const emptyData: never[] = [];
const columnsData = [
  {
    header: 'Description',
    accessor: 'desc',
    width: 100,
  },
  {
    header: 'SUITE NAME',
    accessor: 'suiteName',
    width: 100,
  },
  {
    header: 'SUITE TYPE',
    accessor: 'suiteName',
    width: 100,
  },
  {
    header: 'SUITE ACCESS',
    accessor: 'suiteName',
    width: 100,
  },
  {
    header: 'Modified By',
    accessor: 'modifiedBy',
    width: 100,
  },
];

export const TableWithRowAccordion: Story = {
  args: {
    ...defaultArgs,
    tableMeta: columnsData,
    tableData: sampleData,
    accordionType: 'row',
  },
};
export const TableWithColumnAccordion: Story = {
  args: {
    ...defaultArgs,
    tableMeta: columnsData,
    tableData: sampleData,
    accordionType: 'column',
  },
};

export const EmtptyTableWithColumnAccordion: Story = {
  args: {
    ...defaultArgs,
    tableMeta: columnsData,
    tableData: emptyData,
    accordionType: 'column',
  },
};

export const AccordionTableWithFixedHeader: Story = {
  args: {
    ...defaultArgs,
    tableMeta: columnsData,
    tableData: sampleData,
    accordionType: 'row',
    height: '200px',
    withFixedHeader: true,
  },
};

export default meta;