import { Link } from 'react-router-dom'

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

import { isIOS, isMobileDevice } from 'config'

import { customScrollbar } from 'features/Common'
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>`
  --bgColor: #333;
  
  ${({ isExpanded }) => (isExpanded
    ? css`
        --bgColor: rgba(51, 51, 51, 0.7);
    `
    : css`
        position: relative;
    `)}
`

type TableWrapperProps = {
  isExpanded?: boolean,
}

export const TableWrapper = styled.div<TableWrapperProps>`
  max-width: 100%;
  clip-path: inset(0 0 0 0 round 5px);
  overflow-x: auto;
  scroll-behavior: smooth;
  background: 
    linear-gradient(180deg, #292929 44px, var(--bgColor) 44px),
    linear-gradient(-90deg, #333 8px, var(--bgColor) 8px);
  z-index: 50;
  
  ${customScrollbar}
  
  ::-webkit-scrollbar-thumb:vertical {
    background: linear-gradient(180deg, transparent 44px, #3F3F3F 44px);
  }

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

  ${isMobileDevice
    ? ''
    : css`
        max-height: calc(100vh - 203px);
    `};
    
  ${isIOS
    ? css`
        overscroll-behavior: none;
    `
    : ''};
`

export const Table = styled.table`
  border-radius: 5px;
  border-spacing: 0;
  border-collapse: collapse; 
  letter-spacing: -0.078px;
  table-layout: fixed;
`

type ParamShortTitleProps = {
  showLeftArrow?: boolean,
  sortDirection: 'asc' | 'desc',
  sorted?: boolean,
}

export const ParamShortTitle = styled(T9n)<ParamShortTitleProps>`
  position: relative;
  text-transform: uppercase;

  ::before {
    position: absolute;
    content: '';
    top: 50%;
    left: -9px;
    translate: 0 -50%;
    rotate: ${({ sortDirection }) => (sortDirection === 'asc' ? 0 : 180)}deg;
    width: 7px;
    height: 7px;
    background-image: url(/images/sortUp.svg);
    background-size: cover;

    ${({ sorted }) => (sorted
    ? ''
    : css`
        display: none;
    `)}

    ${({ showLeftArrow }) => (showLeftArrow
    ? ''
    : css`
        z-index: 1;
    `)}
  }
`

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

export const PlayerName = styled(Link)`
  display: inline-block;
  vertical-align: middle;
  text-overflow: ellipsis;
  color: ${({ theme }) => theme.colors.white};
  overflow: hidden;
`

type CellContainerProps = {
  as?: 'td' | 'th',
  clickable?: boolean,
  columnWidth?: number,
  sorted?: boolean,
}

export const CellContainer = styled.td.attrs(({ clickable }: CellContainerProps) => ({
  ...clickable && { tabIndex: 0 },
}))<CellContainerProps>`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: ${({ columnWidth }) => (columnWidth ? `${columnWidth}px` : 'auto')};
  min-width: 30px;
  font-size: 11px;
  font-weight: ${({ clickable }) => (clickable ? 600 : 400)};
  color: ${({ clickable, theme }) => (clickable ? '#5EB2FF' : theme.colors.white)};
  white-space: nowrap;
  background-color: var(--bgColor);

  :first-child {
    position: sticky;
    left: 0;
    justify-content: unset;
    padding-left: 10px;
    text-align: left;
    cursor: unset;
    z-index: 1;
  }

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

  ${({ as, sorted }) => (as === 'th'
    ? css`
        font-weight: ${sorted ? '700' : '600'};
        font-size: ${sorted ? 13 : 11}px;
      `
    : '')}
`

export const Row = styled.tr`
  position: relative;
  display: flex;
  width: 100%;
  height: 45px;
  border-bottom: 0.5px solid #5C5C5C;
  z-index: 1;

  :last-child:not(:first-child) {
    border: none;
  }

  :hover {
    ${CellContainer}:not(th) {
      background-color: #484848;
    }

    ${PlayerName} {
      text-decoration: underline;
      font-weight: 600;
    }
  }
`

export const Header = styled.thead`
  position: sticky;
  left: 0;
  top: 0;
  z-index: 2;

  ${Row} {
    border-bottom-color: ${({ theme }) => theme.colors.secondary};
  }

  ${CellContainer} {
    background-color: #292929;
    color: ${({ theme }) => theme.colors.white};
    cursor: pointer;
  }

   ${CellContainer}:first-child {
    cursor: unset;
   }
`

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

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

const ArrowButton = styled(ArrowButtonBase)`
  position: absolute;
  width: 20px;
  height: 44px;
  margin-top: 0;
  z-index: 3;
  background-color: #292929;

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

export const ArrowButtonRight = styled(ArrowButton)`
  right: 0;
  border-top-right-radius: 5px;

  ${Arrow} {
    left: auto;
    right: 7px;
  }
`

export const ArrowButtonLeft = styled(ArrowButton)`
  right: -5px;
`

type ExpandButtonProps = {
  isExpanded?: boolean,
}

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

  ${Arrow} {
    left: ${({ isExpanded }) => (isExpanded ? -6 : -2)}px;
    
    :last-child {
      margin-left: 7px;
    }
  }
`
