import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config'

import { customScrollbar } from 'features/Common'
import { TooltipWrapper } from 'features/Tooltip'
import {
  ArrowButton as ArrowButtonBase,
  Arrow as ArrowBase,
} from 'features/HeaderFilters/components/DateFilter/styled'
import { T9n } from 'features/T9n'

type ContainerProps = {
  isExpanded?: boolean,
}

export const Container = styled.div<ContainerProps>`
  ${({ isExpanded }) => (isExpanded
    ? ''
    : css`
        position: relative;
    `)}
`

type TableWrapperProps = {
  isExpanded?: boolean,
}

export const TableWrapper = styled.div<TableWrapperProps>`
  display: flex;
  max-width: 100%;
  max-height: calc(100vh - 235px);
  border-radius: 5px;
  overflow-x: auto;
  scroll-behavior: smooth;
  background-color: #333333;
  z-index: 50;
  ${customScrollbar}

  ${({ isExpanded }) => (isExpanded
    ? css`
        position: absolute;
        right: 14px;
      `
    : '')}
`

export const Table = styled.div`
  flex-grow: 1;
  border-radius: 5px;
  border-collapse: collapse; 
  letter-spacing: -0.078px;
`

export const Tooltip = styled(TooltipWrapper)`
  left: auto;
  padding: 2px 10px;
  border-radius: 6px;
  transform: none;
  font-size: 11px;
  line-height: 1;
  color: ${({ theme }) => theme.colors.black};

  ::before {
    display: none;
  }
`

export const ParamShortTitle = styled(T9n)`
  text-transform: uppercase;
`

export const Row = styled.div`
  display: flex;
  width: 100%;
  height: 45px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);

  :first-child {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 1;
  }
`

type TdProps = {
  clickable?: boolean,
  columnWidth?: number,
  headerCell?: boolean,
  sorted?: boolean,
}

export const Cell = styled.div.attrs(({ clickable }: TdProps) => ({
  ...clickable && { tabIndex: 0 },
}))<TdProps>`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: ${({ columnWidth }) => (columnWidth ? `${columnWidth}px` : 'auto')};
  font-size: 11px;
  color: ${({
    clickable,
    headerCell,
    theme,
  }) => (clickable && !headerCell ? '#5EB2FF' : theme.colors.white)};
  white-space: nowrap;
  background-color: #333333;

  ${Tooltip} {
    top: 35px;
  }

  :hover {
    ${Tooltip} {
      display: block;
    }
  }

  ${({ headerCell }) => (headerCell
    ? ''
    : css`
      :first-child {
        justify-content: unset;
        padding-left: 13px;
        color: ${({ theme }) => theme.colors.white};
      }
    `)}

  ${({ sorted }) => (sorted
    ? css`
         font-weight: bold;
      `
    : '')}

  ${({ clickable, headerCell }) => (clickable || headerCell
    ? css`
         cursor: pointer;
      `
    : '')}
`

type FirstColumnProps = {
  columnWidth?: number,
}

export const FirstColumn = styled.div<FirstColumnProps>`
  position: sticky;
  left: 0;
  width: ${({ columnWidth }) => (columnWidth ? `${columnWidth}px` : 'auto')};
`

export const PlayerNum = styled.span`
  display: inline-block;
  width: 20px;
  flex-shrink: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
`

type PlayerNameProps = {
  columnWidth?: number,
}

export const PlayerName = styled.span<PlayerNameProps>`
  display: inline-block;
  margin-top: 2px;
  text-overflow: ellipsis;
  overflow: hidden;

  ${({ columnWidth }) => (columnWidth
    ? css`
         max-width: calc(${columnWidth}px - 31px);
      `
    : css`
         max-width: 110px;
      `)}
`

export const PlayerNameWrapper = styled.span`
  position: relative;

  ${Tooltip} {
    top: 15px;
  }

  :hover {
    ${Tooltip} {
      display: block;
    }
  }
`

const ArrowButton = styled(ArrowButtonBase)`
  position: absolute;
  width: 17px;
  margin-top: 2px;
  background-color: #333333;
  z-index: 3;

  ${isMobileDevice
    ? css`
      height: 45px;
      margin-top: 0;
    `
    : ''};
`

export const ArrowButtonRight = styled(ArrowButton)`
  right: 0;
`

export const ArrowButtonLeft = styled(ArrowButton)`
  left: 75px;
`

export const Arrow = styled(ArrowBase)`
  width: 10px;
  height: 10px;

  ${isMobileDevice
    ? css`
      border-color: ${({ theme }) => theme.colors.white};
    `
    : ''};  
`

export const ExpandButton = styled(ArrowButton)`
  left: 20px;
  top: 0;

  ${Arrow} {
    left: 0;
    
    :last-child {
      margin-left: 7px;
    }
  }
`
