import * as React from 'react';
import {
  SortableContainer,
  SortableElement,
  SortableHandle,
  SortStartHandler,
  SortEndHandler,
} from 'react-sortable-hoc';
import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { Box, Flex } from '@lightspeed/flame/Core';
import { IconRowHandle } from '@lightspeed/flame/Icon/RowHandle';
import { themeGet } from '@styled-system/theme-get';
import { Table as BaseTable, Tr as BaseTr, TrProps } from '../../components/Table';

const MemoizedIcon = React.memo(IconRowHandle);

const SortableTr = styled(BaseTr)`
  &.SortableHelper {
    pointer-events: none;
    border: 1px solid ${themeGet('tableStyles.tr.borderColor')};
    background-color: ${themeGet('colors.white')};
    box-shadow: ${themeGet('shadows.1')};
  }
`;

interface TableProps {
  isSorting?: boolean;
}
const Table = styled(BaseTable)<TableProps>`
  ${props =>
    props.isSorting &&
    css`
      background: ${themeGet('colors.dimmed')(props)};
      cursor: grabbing;
      user-select: none;
      overflow: hidden;

      & thead,
      & tfoot {
        background: ${themeGet('colors.white')(props)};
      }
      tbody tr {
        background: ${themeGet('colors.white')(props)};
      }
      tbody tr:hover {
        background-color: ${themeGet('colors.white')(props)} !important;
      }
    `}
`;

interface SortableTableProps {
  children: React.ReactNode;
  isSorting?: boolean;
  onSortStart?: SortStartHandler;
  onSortEnd?: SortEndHandler;
}
const SortableTable = SortableContainer(
  ({ children, onSortStart, onSortEnd, ...restProps }: SortableTableProps) => (
    <Table {...restProps}>{children}</Table>
  ),
);

const setColumnWidth = ({ node }: { node: Element }) => {
  const tds = document.getElementsByClassName('SortableHelper')[0].childNodes as NodeListOf<
    HTMLElement
  >;
  node.childNodes.forEach((n: any, index) => {
    // eslint-disable-next-line, no-return-assign
    tds[index].style.width = `${n.offsetWidth}px`;
    // eslint-disable-next-line, no-return-assign
    tds[index].style.verticalAlign = window.getComputedStyle(n).verticalAlign;
  });
};

const DraggableTableContainer = ({
  children,
  onSortStart,
  onSortEnd,
  ...restProps
}: SortableTableProps) => {
  const [isSorting, setIsSorting] = React.useState(false);

  return (
    <SortableTable
      helperClass="SortableHelper"
      useDragHandle
      lockAxis="y"
      isSorting={isSorting}
      onSortStart={(options, event) => {
        setColumnWidth(options);
        if (onSortStart) {
          onSortStart(options, event);
        }
        setIsSorting(true);
      }}
      onSortEnd={(options, event) => {
        setIsSorting(false);
        if (onSortEnd) {
          onSortEnd(options, event);
        }
      }}
      {...restProps}
    >
      {children}
    </SortableTable>
  );
};

const HandBoxStyled = styled(Box)`
  cursor: grab;
  display: inline-block;
  &:active {
    cursor: grabbing;
  }
`;

const Tr = SortableElement(
  ({ children, ...restProps }: TrProps & { children: React.ReactNode }) => (
    <SortableTr {...restProps}>{children}</SortableTr>
  ),
);

const HandleIcon = SortableHandle(({ ...restProps }: React.FC) => (
  <HandBoxStyled pr="2" {...restProps}>
    <MemoizedIcon color="gray-200" />
  </HandBoxStyled>
));

interface DragHandleProps {
  handleProps?: any;
}
const DragHandle: React.FC<DragHandleProps> = ({ handleProps, children, ...restProps }) => (
  <Flex alignItems="center" {...restProps}>
    <HandleIcon {...handleProps} />
    {children}
  </Flex>
);

export {
  Tr,
  HandleIcon,
  DragHandle,
  setColumnWidth,
  DraggableTableContainer as Table,
  SortableContainer,
  SortableElement,
  SortableHandle,
};