import { Fragment } from 'react'

import map from 'lodash/map'
import includes from 'lodash/includes'

import { PlayerParam } from 'requests'

import { T9n } from 'features/T9n'

import type { PlayersTableProps } from './types'
import { usePlayersTable } from './hooks'
import {
  Container,
  TableWrapper,
  Table,
  FirstColumn,
  Cell,
  Row,
  PlayerNum,
  PlayerNameWrapper,
  PlayerName,
  ParamShortTitle,
  ArrowButtonRight,
  ArrowButtonLeft,
  Arrow,
  ExpandButton,
  Tooltip,
} from './styled'

export const PlayersTable = (props: PlayersTableProps) => {
  const {
    containerRef,
    firstColumnWidth,
    getDisplayedValue,
    getFullName,
    getPlayerParams,
    handleScroll,
    handleSortClick,
    isExpanded,
    paramColumnWidth,
    params,
    players,
    showExpandButton,
    showLeftArrow,
    showRightArrow,
    slideLeft,
    slideRight,
    sortCondition,
    tableWrapperRef,
    toggleIsExpanded,
  } = usePlayersTable(props)

  return (
    <Container
      ref={containerRef}
      isExpanded={isExpanded}
    >
      <TableWrapper
        ref={tableWrapperRef}
        isExpanded={isExpanded}
        onScroll={handleScroll}
      >
        {!isExpanded && (
          <Fragment>
            {showLeftArrow && (
              <ArrowButtonLeft
                aria-label='Scroll to left'
                onClick={slideLeft}
              >
                <Arrow direction='left' />
              </ArrowButtonLeft>
            )}
            {showRightArrow && (
              <ArrowButtonRight
                aria-label='Scroll to right'
                onClick={slideRight}
              >
                <Arrow direction='right' />
              </ArrowButtonRight>
            )}
          </Fragment>
        )}
        <FirstColumn columnWidth={firstColumnWidth}>
          <Row>
            <Cell>
              {showExpandButton && (
                <ExpandButton
                  aria-label={isExpanded ? 'Reduce' : 'Expand'}
                  onClick={toggleIsExpanded}
                >
                  <Arrow direction={isExpanded ? 'right' : 'left'} />
                  <Arrow direction={isExpanded ? 'right' : 'left'} />
                </ExpandButton>
              )}
            </Cell>
          </Row>
          {map(players, (player) => {
            const fullName = getFullName(player)

            return (
              <Row key={player.id}>
                <Cell>
                  <PlayerNum>
                    {player.club_shirt_num}
                  </PlayerNum>{' '}
                  <PlayerNameWrapper>
                    <PlayerName columnWidth={firstColumnWidth}>
                      {fullName}
                    </PlayerName>
                    <Tooltip>
                      <PlayerName>{fullName}</PlayerName>
                    </Tooltip>
                  </PlayerNameWrapper>
                </Cell>
              </Row>
            )
          })}
        </FirstColumn>
        <Table>
          <Row>
            {map(params, ({
              id,
              lexic,
              lexica_short,
            }) => (
              <Cell
                key={id}
                columnWidth={paramColumnWidth}
                onClick={handleSortClick(id)}
                sorted={sortCondition.paramId === id}
                headerCell
              >
                <ParamShortTitle t={lexica_short || ''} />
                <Tooltip>
                  <T9n t={lexic} />
                </Tooltip>
              </Cell>
            ))}
          </Row>

          {map(players, (player) => (
            <Row key={player.id}>
              {map(params, ({ id }) => {
                const playerParam = getPlayerParams(player.id)[id] as PlayerParam | undefined
                const value = playerParam ? getDisplayedValue(playerParam) : '-'
                const clickable = Boolean(playerParam?.clickable) && !includes([0, '-'], value)
                const sorted = sortCondition.paramId === id

                return (
                  <Cell
                    columnWidth={paramColumnWidth}
                    key={id}
                    clickable={clickable}
                    sorted={sorted}
                  >
                    {value}
                  </Cell>
                )
              })}
            </Row>
          ))}
        </Table>
      </TableWrapper>
    </Container>
  )
}
