import styled from 'styled-components';
import { Box } from 'grommet/es6/components/Box';
import { Button } from 'grommet/es6/components/Button';

import ReactTable from './react-table/ReactTable';

export var StyledTableComponent = styled(Box).withConfig({
  displayName: 'StyledPagingTable__StyledTableComponent',
  componentId: 'sc-1wbkk7c-0'
})(['align-items:stretch;width:100%;border-collapse:collapse;overflow:auto']);

export var StyledTableBodyComponent = styled(Box).withConfig({
  displayName: 'StyledPagingTable__StyledTableBodyComponent',
  componentId: 'sc-1wbkk7c-1'
})(['']);

export var StyledTHeadComponent = styled(Box).withConfig({
  displayName: 'StyledPagingTable__StyledTHeadComponent',
  componentId: 'sc-1wbkk7c-2'
})(['-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;']);

export var StyledResizerComponent = styled(Box).withConfig({
  displayName: 'StyledPagingTable__StyledResizerComponent',
  componentId: 'sc-1wbkk7c-3'
})(['display:inline-block;position:absolute;width:36px;top:0;bottom:0;right:-18px;cursor:col-resize;z-index:10;']);

export var StyledThComponent = styled(Box).withConfig({
  displayName: 'StyledPagingTable__StyledThComponent',
  componentId: 'sc-1wbkk7c-4'
})(['position:relative;', '     ', ' ', '   ', '  '], function (props) {
  return props.sortable && '\n    cursor: pointer;\n  ';
}, function (props) {
  return props.hidden && '\n    width: 0 !important;\n    min-width: 0 !important;\n    padding: 0 !important;\n    border: 0 !important;\n    opacity: 0 !important;\n  ';
}, function (props) {
  return props.pivot && '\n    &:after,:before {\n      left: 100%;\n      top: 50%;\n      border: solid transparent;\n      content: " ";\n      height: 0;\n      width: 0;\n      position: absolute;\n      pointer-events: none\n    }\n  \n    &:after {\n      border-color: rgba(255, 255, 255, 0);\n      border-left-color: #fff;\n      border-width: 8px;\n      margin-top: -8px\n    }\n  \n    &:before {\n      border-color: rgba(102, 102, 102, 0);\n      border-left-color: #f7f7f7;\n      border-width: 10px;\n      margin-top: -10px\n    }\n\n  ';
}, function (props) {
  return props.resizable && '\n    overflow: visible;\n\n    &:last-child {\n      overflow: hidden\n    }\n  ';
});

export var StyledTrGroupComponent = styled(Box).withConfig({
  displayName: 'StyledPagingTable__StyledTrGroupComponent',
  componentId: 'sc-1wbkk7c-5'
})(['align-items:stretch;']);

export var StyledTrComponent = styled(Box).withConfig({
  displayName: 'StyledPagingTable__StyledTrComponent',
  componentId: 'sc-1wbkk7c-6'
})(['']);

export var StyledTdComponent = styled(Box).withConfig({
  displayName: 'StyledPagingTable__StyledTdComponent',
  componentId: 'sc-1wbkk7c-7'
})(['text-overflow:ellipsis;overflow:hidden;display:block;white-space:nowrap;', ''], function (props) {
  return props.hidden && '\n    width: 0 !important;\n    min-width: 0 !important;\n    padding: 0 !important;\n    border: 0 !important;\n    opacity: 0 !important\n  ';
});

export var StyledExpander = styled(Button).withConfig({
  displayName: 'StyledPagingTable__StyledExpander',
  componentId: 'sc-1wbkk7c-8'
})(['position:relative;margin:0;padding:0;left:-5px;color:transparent;cursor:pointer;']);

export var StyledTfootComponent = styled(Box).withConfig({
  displayName: 'StyledPagingTable__StyledTfootComponent',
  componentId: 'sc-1wbkk7c-9'
})(['']);

export var StyledPagingTable = styled(ReactTable).withConfig({
  displayName: 'StyledPagingTable',
  componentId: 'sc-1wbkk7c-10'
})(['max-width:100%;width:100%;overflow:hidden;&.-striped .rt-tr.-odd{background:rgba(0,0,0,0.03)}&.-highlight .rt-tbody .rt-tr:not(.-padRow):hover{background:rgba(0,0,0,0.05)}']);