import styled from 'styled-components'
import {scale, shadeColor, theme, declareFont} from 'tocco-ui'
import _get from 'lodash/get'
import {lighten} from 'polished'

const borderColor = ({theme}) => shadeColor(_get(theme, 'colors.paper'), 2)
const baseSpace = scale.space(-1)

export const StyledTable = styled.table`
  background-color: ${theme.color('paper')};
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-top: ${baseSpace};
  margin-bottom: ${baseSpace};
  table-layout: fixed;
  min-width: 900px;
`

export const StyledTableWrapper = styled.div`
  width: 100%;
  height: 100%;
  overflow: auto;
`

export const StyledCell = styled.div`
  display: flex;
  align-items: center;
  width: 100%;

  && {
    input,
    textarea,
    &.single-select > span > div {
      border: 1px solid transparent;
      padding-left: ${baseSpace};

      &:not([disabled]):hover {
        cursor: pointer;
        border-color: ${borderColor};
      }

      &:not([disabled]):focus {
        border-color: ${borderColor};
      }
    }

    &.single-select > span {
      display: inline-block;
      width: 100%;
      margin-left: 5px;
      margin-bottom: 5px;
      background-color: ${theme.color('paper')};
    }

    &.single-select button {
      margin-bottom: 2px;
      margin-right: 2px;
    }
  }
`

export const StyledTableRow = styled.tr`
  &:hover {
    ${StyledCell} {
      background-color: ${({theme}) => lighten(0.25, theme.colors.secondaryLight)};
    }
  }
`

export const StyledHeader = styled.th`
  padding: ${baseSpace};
  background-color: ${theme.color('paper')};
  text-align: left;
  border-bottom: 2px solid ${borderColor};
  ${declareFont({fontWeight: theme.fontWeight('bold')})};
  user-select: none;
  text-overflow: ellipsis;

  &:hover {
    background-color: ${({theme}) => lighten(0.25, theme.colors.secondaryLight)};
  }
`

@@ -157,16 +157,69 @@
 olished'
+%0Aimport %7BdeclareFocus%7D from 'tocco-ui/src/utilStyles'
 %0A%0Aconst 
@@ -285,17 +285,17 @@
 aper'), 
-2
+3
 )%0Aconst 
@@ -866,19 +866,22 @@
 lid 
-transparent
+$%7BborderColor%7D
 ;%0A  
@@ -980,125 +980,30 @@
     
-  border-color: $%7BborderColor%7D;%0A      %7D%0A%0A      &:not(%5Bdisabled%5D):focus %7B%0A        border-color: $%7BborderColor%7D;%0A      
+%7D%0A      $%7BdeclareFocus
 %7D%0A  

improve input ux