import React, { useEffect, useState } from 'react'
import { Button } from '../components/Button'
import { format } from 'date-fns'
import CodeIcon from '@mui/icons-material/Code'
import CreateIcon from '@mui/icons-material/Create'
import UncontrolledTable from '../components/UncontrolledTable/UncontrolledTable'
import { TableButton } from '../components/UncontrolledTable/interface'

const Template = (args) => {
  return <UncontrolledTable {...args} />
}

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

const columns = [
  {
    header: 'Data',
    accessorKey: 'date',
    type: 'date',
    enableColumnFilter: true,
    filterFn: 'customFilterText',
  },
  {
    header: 'Confiança da transcrição da conversa',
    accessorKey: 'duration',
    type: 'number',
    enableColumnFilter: true,
    filterFn: 'customFilterText',
    width: '150px',
  },
  {
    header: 'Confiança da transcrição da conversa',
    accessorKey: 'campaign',
    type: 'string',
    enableColumnFilter: true,
    filterFn: 'customFilterText',
  },
  {
    header: 'Confiança da transcrição da conversa',
    accessorKey: 'campaign',
    type: 'string',
    enableColumnFilter: true,
    filterFn: 'customFilterText',
  },
  {
    header: 'Confiança da transcrição da conversa',
    accessorKey: 'campaign',
    type: 'string',
    enableColumnFilter: true,
    filterFn: 'customFilterText',
  },
  {
    header: 'Confiança da transcrição da conversa',
    accessorKey: 'campaign',
    type: 'string',
    enableColumnFilter: true,
    filterFn: 'customFilterText',
  },
  {
    header: 'Confiança da transcrição da conversa',
    accessorKey: 'campaign',
    type: 'string',
    enableColumnFilter: true,
    filterFn: 'customFilterText',
  },
  {
    header: 'Ação',
    accessorKey: 'action',
    type: 'action',
    enableColumnFilter: false,
    filterFn: 'customFilterText',
    disableMenu: true,
  },
]

const dnd_columns = [
  {
    header: 'Data',
    accessorKey: 'date',
    type: 'date',
    enableColumnFilter: false,
    filterFn: 'customFilterText',
  },
  {
    header: 'Duração',
    accessorKey: 'duration',
    type: 'number',
    enableColumnFilter: false,
    filterFn: 'customFilterText',
  },
  {
    header: 'Campanha',
    accessorKey: 'campaign',
    type: 'string',
    enableColumnFilter: false,
    filterFn: 'customFilterText',
  },
  {
    header: 'Ação',
    accessorKey: 'action',
    type: 'action',
    enableColumnFilter: false,
    filterFn: 'customFilterText',
  },
]

export const Default = (args) => {
  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 [hiddenColumns, setHiddenColumns] = useState<string[]>(() =>
    JSON.parse(localStorage.getItem('hiddenColumns') || '[]'),
  )

  const handleColumnVisibilityChange = (columnId: string, isVisible: boolean) => {
    setHiddenColumns((prevHiddenColumns) => {
      const updatedHiddenColumns = isVisible
        ? prevHiddenColumns.filter((col) => col !== columnId)
        : [...prevHiddenColumns, columnId]

      localStorage.setItem('hiddenColumns', JSON.stringify(updatedHiddenColumns))

      return updatedHiddenColumns
    })
  }

  useEffect(() => {
    console.info('Colunas escondidas ao carregar:::', hiddenColumns)
  }, [hiddenColumns])

  return (
    <>
      <UncontrolledTable
        data={data}
        columns={columns}
        onClick={(value) => console.log('onClick line:', value)}
        onMouseOver={(value) => console.log('onMouseOver line:', value)}
        onMouseOut={(value) => console.log('onMouseOut line:', value)}
        pagination={{
          pageIndex: 1,
          pageSize: 10,
        }}
        totalPages={10}
        labels={{
          orderAsc: 'orderAsc',
        }}
        tableClassName="table"
        sticky={{
          enabled: true,
          top: 0,
        }}
        hideColumns={hiddenColumns}
        onColumnVisibilityChange={handleColumnVisibilityChange}
        onChangePage={(pagination) => console.log('onChangePage', pagination)}
        onFilterClick={(column) => console.log('onFilterClick', column)}
        onSortClick={(column, direction) => console.log('onSortClick', column, direction)}
        {...args}
      />
    </>
  )
}

Default.args = {}

export const RowDnd = (args) => {
  const [data, setData] = useState([
    {
      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: '55',
      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: '9',
      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: '10',
      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: '11',
      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: '12',
      action: (
        <Button
          color="primary"
          disableElevation
          variant="text"
          onClick={() => console.log('click')}
        >
          Editar
        </Button>
      ),
    },
  ])

  return (
    <>
      <UncontrolledTable
        data={data}
        columns={dnd_columns}
        stickyHeader
        draggable
        onDragEnd={(data) => setData(data)}
        {...args}
      />
    </>
  )
}

RowDnd.args = {}

export const ExtraMenu = (args) => {
  const data = [
    {
      date: format(new Date('8-14-2023 21:29'), 'dd/MM/yyyy'),
      duration: 60,
      campaign: 'Campaign 10',
      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 menus: TableButton[] = [
    {
      render: () => <span>Menu</span>,
      onClick: () => console.log('Menu clicked'),
      disabled: true,
    },
    {
      render: () => <span>Agrupar</span>,
      list: {
        options: [
          {
            id: 'groupByCampaign',
            label: <div style={{display: 'flex', alignItems: 'center', gap: '5px'}}>
              <span style={{backgroundColor: "green"}}>OK</span>
              <span>Agrupar por campanha</span>
            </div>,
            onClick: (id) => console.log('Agrupar por campanha', id),
          },
          {
            id: 'groupByDate',
            label: 'Agrupar por data',
            onClick: (id) => console.log('Agrupar por data', id),
          },
        ],
        closeOnClick: true,
      },
    },
  ]

  return (
    <>
      <UncontrolledTable data={data} columns={columns} buttons={menus} configs={menus} />
    </>
  )
}

ExtraMenu.args = {}