import * as React from 'react';
import styled from '@emotion/styled';
import { themeGet } from '@styled-system/theme-get';

import { IconChevronDown } from '@lightspeed/flame/Icon/ChevronDown';
import { IconChevronUp } from '@lightspeed/flame/Icon/ChevronUp';
import { IconChevronUpDown } from '@lightspeed/flame/Icon/ChevronUpDown';

import { SortingDirection } from '../types';
import { Th } from '../../../components/Table';

export const IconButton = styled('button')`
  border-width: 0;
  padding: 0;
  display: flex;
  cursor: pointer;
  outline: none;
  align-items: center;
  font-size: ${themeGet('fontSizes.text-s')};
  font-weight: ${themeGet('fontWeights.bold')};
  font-family: ${themeGet('fontFamily.sans-serif')};
  padding: ${themeGet('space.1')};
  height: auto;
  box-sizing: border-box;
  border-radius: ${themeGet('radii.radius-1')};
  background-color: ${themeGet('colors.white')};
  transition: background 200ms ease;
  color: ${themeGet('colors.textHeading')};

  &:hover {
    background-color: ${themeGet('tableStyles.sortable.button.background', 'blue')};
  }
`;

const IconContainer = styled('span')`
  margin-left: ${themeGet('space.1')};
  display: inline-flex;
`;

interface SortIconProps {
  direction: SortingDirection;
  size: string;
}
const SortIcon: React.FC<SortIconProps> = ({ direction, ...restProps }) => {
  switch (direction) {
    case 'asc':
      return <IconChevronUp {...restProps} color="secondary" />;
    case 'desc':
      return <IconChevronDown {...restProps} color="secondary" />;
    case 'unsorted':
    default:
      return <IconChevronUpDown {...restProps} color="textDimmed" />;
  }
};

interface SortButton extends React.HTMLProps<HTMLButtonElement> {
  direction: SortingDirection;
  css?: any;
}
export const SortButton: React.FC<SortButton> = ({ children, direction, ...restProps }) => (
  <IconButton {...restProps} type="button" className="cr-table-icon-button">
    {children}
    <IconContainer>
      <SortIcon direction={direction} size="small" />
    </IconContainer>
  </IconButton>
);

interface SortableThProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  width?: string;
  direction?: SortingDirection;
  onClick?: () => void;
  css?: any;
}
export const SortableTh: React.FC<SortableThProps> = ({
  width,
  direction,
  onClick,
  children,
  ...restProps
}) => (
  <Th px={2} py={1} width={width}>
    <SortButton direction={direction} onClick={onClick} {...restProps}>
      {children}
    </SortButton>
  </Th>
);