import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Table } from './Table';
import { Fragment } from 'react';
import TableRow from '@mui/material/TableRow';
import { TableCell } from '@mui/material';
import css from './Table.module.scss';
import { HeaderProps } from './HeaderCell/HeaderCell';

export default {
  title: 'Components/Table',
  component: Table,
  parameters: { docs: { iframeHeight: '400px' } }
} as ComponentMeta<typeof Table>;

// Set up dummy data and columns
const dummyData = [
  { name: 'first row', description: 'this is the first row' },
  { name: 'second row', description: 'this is the second row' },
  { name: 'third row', description: 'this is the third row' }
];

const columns = [
  {
    title: 'Name',
    key: 'name'
  },
  {
    title: 'Description',
    key: 'description'
  }
];

const headerMapping: Map<'name' | 'description', string> = new Map();
headerMapping.set('name', 'name');
headerMapping.set('description', 'description');

const tableHeaders: HeaderProps[] = [];
for (let i = 0; i < columns.length; i++) {
  tableHeaders.push({ label: Array.from(headerMapping.keys())[i] });
}

const Template: ComponentStory<typeof Table> = (args) => <Table {...args} />;

export const DefaultTable = Template.bind({});
DefaultTable.args = {
  headers: tableHeaders,
  headermapping: headerMapping,
  rowcount: dummyData.length,
  labels: {
    labelPaginationOf: 'of',
    labelRowsPerPage: 'Rows per page',
    searchplaceholderlabel: 'Search',
    tooltiplabel: 'Sort'
  },
  tableqas: {
    header: 'table-header',
    headerRow: 'table-header-row',
    pagination: 'table-pagination',
    table: 'table',
    toolbar: 'table-toolbar',
    headerCell: 'table-header-cell',
    tableBody: 'table-body'
  },
  tablecss: {
    tableToolbar: [css.projectTableToolbar],
    tablePagination: [css.projectTablePagination],
    table: [css.projectTable]
  },
  tablebodycontent: (
    <Fragment>
      {dummyData.map((row: any, rIndex: number) => {
        return (
          <TableRow hover tabIndex={-1} key={rIndex} className={css.projectTableRow} data-qa='table-body-row'>
            <TableCell>{row.name}</TableCell>
            <TableCell>{row.description}</TableCell>
          </TableRow>
        );
      })}
    </Fragment>
  )
};