import React from 'react'
import Table from '../components/Table'
import { Button } from '../components/Button'
import { format } from 'date-fns'

export default {
  title: 'Layout/Table',
  component: Table,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
    backgrounds: {
      default: 'gray',
      values: [
        {
          name: 'gray',
          value: '#f8f8f8',
        },
      ],
    },
  },
  argTypes: {},
}

const data = [
  {
    date: format(new Date('8-14-2023 21:29'), 'dd/MM/yyyy'),
    duration: 60,
    campaign: 'Campaign 1',
    agent: 'Maggie Leach',
    dnis: 'dnis',
    disposition: 'Disposition 1',
    origin: 'origin',
    id: '1',
    action: (
      <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
        Editar
      </Button>
    ),
  },
  {
    date: format(new Date('8-13-2023 21:29'), 'dd/MM/yyyy'),
    duration: 60,
    campaign: 'Campaign 2',
    agent: 'Christina Harris',
    ani: 'ani',
    dnis: 'dnis',
    disposition: 'Disposition 2',
    origin: 'origin',
    id: '2',
    action: (
      <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
        Editar
      </Button>
    ),
  },
  {
    date: format(new Date('8-12-2023 21:29'), 'dd/MM/yyyy'),
    duration: 60,
    campaign: 'Campaign 3',
    agent: 'Alexia Crawford',
    ani: 'ani',
    dnis: 'dnis',
    disposition: 'Disposition 3',
    origin: 'origin',
    id: '3',
    action: (
      <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
        Editar
      </Button>
    ),
  },
  {
    date: format(new Date('8-11-2023 21:29'), 'dd/MM/yyyy'),
    duration: 60,
    campaign: 'Campaign 4',
    agent: 'Robyn Phillips',
    ani: 'ani',
    dnis: 'dnis',
    disposition: 'Disposition 4',
    origin: 'origin',
    id: '4',
    action: (
      <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
        Editar
      </Button>
    ),
  },
  {
    date: format(new Date('8-10-2023 21:29'), 'dd/MM/yyyy'),
    duration: 60,
    campaign: 'Campaign 5',
    agent: 'Bruce Robinson',
    ani: 'ani',
    dnis: 'dnis',
    disposition: 'Disposition 5',
    origin: 'origin',
    id: '5',
    action: (
      <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
        Editar
      </Button>
    ),
  },
  {
    date: format(new Date('8-9-2023 21:29'), 'dd/MM/yyyy'),
    duration: 60,
    campaign: 'Campaign 6',
    agent: 'Sophia Fletcher',
    ani: 'ani',
    dnis: 'dnis',
    disposition: 'Disposition 6',
    origin: 'origin',
    id: '6',
    action: (
      <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
        Editar
      </Button>
    ),
  },
  {
    date: format(new Date('8-8-2023 21:29'), 'dd/MM/yyyy'),
    duration: 60,
    campaign: 'Campaign 7',
    agent: 'Blanca Roberts',
    ani: 'ani',
    dnis: 'dnis',
    disposition: 'Disposition 7',
    origin: 'origin',
    id: '7',
    action: (
      <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
        Editar
      </Button>
    ),
  },
  {
    date: format(new Date('8-7-2023 21:29'), 'dd/MM/yyyy'),
    duration: 60,
    campaign: 'Campaign 8',
    agent: 'Peter Warburton',
    ani: 'ani',
    dnis: 'dnis',
    disposition: 'Disposition 8',
    origin: 'origin',
    id: '8',
    action: (
      <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
        Editar
      </Button>
    ),
  },
  {
    date: format(new Date('8-7-2023 21:29'), 'dd/MM/yyyy'),
    duration: 60,
    campaign: 'Campaign 8',
    agent: 'Peter Warburton',
    ani: 'ani',
    dnis: 'dnis',
    disposition: 'Disposition 8',
    origin: 'origin',
    id: '8',
    action: (
      <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
        Editar
      </Button>
    ),
  },
  {
    date: format(new Date('8-7-2023 21:29'), 'dd/MM/yyyy'),
    duration: 60,
    campaign: 'Campaign 8',
    agent: 'Peter Warburton',
    ani: 'ani',
    dnis: 'dnis',
    disposition: 'Disposition 8',
    origin: 'origin',
    id: '8',
    action: (
      <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
        Editar
      </Button>
    ),
  },
  {
    date: format(new Date('8-7-2023 21:29'), 'dd/MM/yyyy'),
    duration: 60,
    campaign: 'Campaign 8',
    agent: 'Peter Warburton',
    ani: 'ani',
    dnis: 'dnis',
    disposition: 'Disposition 8',
    origin: 'origin',
    id: '8',
    action: (
      <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
        Editar
      </Button>
    ),
  },
  {
    date: format(new Date('8-7-2023 21:29'), 'dd/MM/yyyy'),
    duration: 60,
    campaign: 'Campaign 8',
    agent: 'Peter Warburton',
    ani: 'ani',
    dnis: 'dnis',
    disposition: 'Disposition 8',
    origin: 'origin',
    id: '8',
    action: (
      <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
        Editar
      </Button>
    ),
  },
  {
    date: format(new Date('8-7-2023 21:29'), 'dd/MM/yyyy'),
    duration: 60,
    campaign: 'Campaign 8',
    agent: 'Peter Warburton',
    ani: 'ani',
    dnis: 'dnis',
    disposition: 'Disposition 8',
    origin: 'origin',
    id: '8',
    action: (
      <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
        Editar
      </Button>
    ),
  },
]

const columns = [
  {
    header: 'data',
    accessorKey: 'date',
    type: 'date',
    enableColumnFilter: true,
    filterFn: 'customFilterText',
  },
  {
    header: 'duration',
    accessorKey: 'duration',
    type: 'number',
    enableColumnFilter: true,
    filterFn: 'customFilterText',
  },
  {
    header: 'campaign',
    accessorKey: 'campaign',
    type: 'string',
    enableColumnFilter: true,
    filterFn: 'customFilterText',
  },
  {
    header: 'agent',
    accessorKey: 'agent',
    type: 'string',
    enableColumnFilter: true,
    filterFn: 'customFilterText',
  },
  {
    header: 'disposition',
    accessorKey: 'disposition',
    type: 'string',
    enableColumnFilter: true,
    filterFn: 'customFilterText',
  },
  {
    header: 'origin',
    accessorKey: 'origin',
    type: 'string',
    enableColumnFilter: true,
    filterFn: 'customFilterText',
  },
  {
    header: 'ID',
    accessorKey: 'id',
    type: 'string',
    enableColumnFilter: true,
    filterFn: 'customFilterText',
  },
  {
    header: 'action',
    accessorKey: 'action',
    type: 'action',
    enableColumnFilter: false,
    filterFn: 'customFilterText',
  },
]

export const Default = (args) => (
  <Table
    data={data}
    columns={columns}
    showTotalResults
    showSettings
    onClick={(value) => console.log('onClick line:', value)}
    onMouseOver={(value) => console.log('onMouseOver line:', value)}
    onMouseOut={(value) => console.log('onMouseOut line:', value)}
    pagination={{ pageIndex: 0, pageSize: 10, totalPages: 2 }}
    {...args}
  />
)

Default.args = {}