import {
  border,
  borderTop,
  borderRight,
  borderBottom,
  borderLeft,
  borderWidth,
  borderColor,
  borderRadius,
  borderStyle,
} from 'styled-system';
import { styled } from '~/styles';
import { theme } from '~/styles/theme';
import {
  TableColumnHeaderProps,
  TableColumnProps,
  TableRowProps,
} from './TableTypes';

export const TableWrapper = styled.div`
  margin: 0;
  padding: 0;
`;

export const TableInnerWrapper = styled.div`
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: auto;
`;

export const Table = styled.table`
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  min-width: 100%;
`;

export const TableBody = styled.tbody`
  margin: 0;
  padding: 0;
`;

export const TableHeader = styled.thead`
  margin: 0;
  padding: 0;
`;

export const TableRow = styled.tr`
  margin: 0;
  padding: 0;
  color: ${theme.colors.gray[1]};
  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
  ${({ borderBottom: borderBottomProp }: TableRowProps) =>
    borderBottomProp
      ? `border-bottom: ${borderBottomProp};`
      : `border-bottom: 2px solid ${theme.colors.gray[4]};`}

  ${({ paginate }: TableRowProps) =>
    paginate || borderBottom
      ? ''
      : `&:last-child {
          border-bottom: 0;
        }`}

  &.selected,
  &:hover {
    td {
      background-color: ${theme.colors.gray[4]};
    }
  }

  &.hide {
    display: none;
  }

  &:hover {
    .showOnHover {
      opacity: 1;
      pointer-events: all;
    }
  }
`;

export const TableColumnHeader = styled.th(
  border,
  borderTop,
  borderRight,
  borderBottom,
  borderLeft,
  borderWidth,
  borderColor,
  borderRadius,
  borderStyle,
  (props: TableColumnHeaderProps) => `
  margin: 0;
  padding: ${props.padding || '10px 15px'};
  text-align: ${props.textAlign || 'left'};
  color: ${theme.colors.gray[2]};
  line-height: ${theme.lineHeights.lessTight};
`
);

export const TableColumn = styled.td(
  border,
  borderTop,
  borderRight,
  borderBottom,
  borderLeft,
  borderWidth,
  borderColor,
  borderRadius,
  borderStyle,
  (props: TableColumnProps) => `
  margin: 0;
  padding: ${props.padding || '3px 15px'};
  white-space: nowrap;
  line-height: ${props.lineHeight || 'initial'};
  text-align: ${props.textAlign || 'left'};

  .canEdit {
    cursor: pointer;
  }

  .editIcon {
    opacity: 0;
    transition: opacity 0.3s;
  }

  &:hover {
    .editIcon {
      opacity: 1;
    }
  }

  .showOnHover {
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
  }
`
);
