/* eslint-disable react/display-name */

import React from 'react';
import { Row, CellProps } from 'react-table';
import { Flex } from '../Flex';
import { Box } from '../Box';
import { TableCheckbox } from './TableCheckbox';
import { Icon } from '../Icon';
import { SvgChevronDown, SvgChevronLeft } from '../../assets/images/icons';
import { TableRowActionType, TableRowActionsProps } from './TableTypes';

interface ExtendedRow extends Row<object> {
  getToggleRowSelectedProps: () => any;
}

export const TableRowActions = ({
  hooks,
  selectable,
  setShowBatchActions,
  rowActions,
  subRow,
  setSkipTableReset,
}: TableRowActionsProps) => {
  hooks.visibleColumns.push((cols: any) => [
    ...(selectable
      ? [
          {
            id: 'selection',
            width: 30,
            Header: ({ getToggleAllRowsSelectedProps }: any) => (
              <TableCheckbox
                {...getToggleAllRowsSelectedProps()}
                setShowBatchActions={setShowBatchActions}
              />
            ),
            Cell: ({ row }: CellProps<any>) => (
              <TableCheckbox
                {...(row as ExtendedRow).getToggleRowSelectedProps()}
              />
            ),
          },
        ]
      : []),
    ...cols,
    ...(rowActions
      ? [
          {
            id: 'action',
            width: 30,
            Cell: ({ row }: CellProps<object>) => (
              <Flex justifyContent="flex-end">
                {rowActions.map((rowAction: TableRowActionType) => (
                  <Box key={rowAction.id} ml="s">
                    <rowAction.Content
                      {...rowAction.ContentProps}
                      className={
                        rowAction.onlyShowOnHover ? 'showOnHover' : null
                      }
                      onClick={() => {
                        if (
                          !rowAction.disabled ||
                          (rowAction.disabled &&
                            !rowAction.disabled(row.original, row.index))
                        ) {
                          setSkipTableReset(true);
                          rowAction.action(row.original, row.index);
                          setTimeout(() => {
                            setSkipTableReset(false);
                          }, 300);
                        }
                      }}
                      disabled={
                        rowAction.disabled
                          ? rowAction.disabled(row.original, row.index)
                          : false
                      }
                    >
                      {rowAction.ContentChildren}
                    </rowAction.Content>
                  </Box>
                ))}
              </Flex>
            ),
          },
        ]
      : []),
    ...(subRow
      ? [
          {
            id: 'expansion',
            width: 30,
            Cell: ({ row }: any) => (
              <span {...row.getToggleRowExpandedProps()}>
                <Icon
                  Asset={row.isExpanded ? SvgChevronDown : SvgChevronLeft}
                  width={24}
                  height={24}
                  color="gray.3"
                />
              </span>
            ),
          },
        ]
      : []),
  ]);
};
