import React from 'react';
import styled from 'styled-components';
import {useDrop} from 'react-dnd';
import {MAX_PLAYERS} from '../constants';
import DraggableCard from './DraggableCard';
import {Confetti} from '../icons';

const PlayerName = styled.p`
  margin: 0px;
  position: absolute;
  top: 0;
  text-align: left;
  transform: translateY(-100%);
  color: black;
  font-weight: bold;
  width: 100%;
  padding: 0 0.5em 0.1em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  z-index: 1;
  @media screen and (min-width: 1100px) {
    font-size: 16px;
  }
`;

const CardElement = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  border: 2px dashed #000;
  transition: background 0.25s, transform 0.25s;
`;

const Wrap = styled.div`
  position: relative;
  padding-bottom: 140%;
`;

const PlayerDropWrap = styled.div`
  position: relative;
  width: calc(25% - 1em);
  margin: 0.5em;

  @media (max-width: 500px) and (orientation: portrait) {
    max-width: calc(25vh - 50px - 1em);
  }

  @media (orientation: landscape) {
    max-width: calc(50vh - 50px - 4em);
  }

  &:nth-child(1n + ${MAX_PLAYERS / 2 + 1}) ${PlayerName} {
    transform: translateY(100%);
    bottom: 0;
    top: auto;
    padding-top: 0.1em;
  }
`;

const getPlayerName = ({index, myName, players, socket}) => {
  if (players[index].id === socket.id) {
    return myName;
  }
  if (players[index].name) {
    return players[index].name;
  }

  return `NEW USER`;
};

const getBlackCardLength = ({players, index}) => {
  if (players[index].blackCards && players[index].blackCards.length) {
    return `(${players[index].blackCards.length})`;
  }

  return '';
};

const PlayerDrop = ({
  index,
  winningPlayerIndex,
  myName,
  players,
  socket,
  addCardToPlayer,
  userIsDragging,
  setUserIsDragging,
  className,
  isMyCardsOpen,
  isSubmittedTableOpen,
}) => {
  const [{isOver}, drop] = useDrop({
    accept: ['blackCard', 'blackCardFromPlayer'],
    drop: (item) => {
      addCardToPlayer(item, players[index]);
    },
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
    }),
  });

  return (
    <PlayerDropWrap className={className}>
      <Wrap ref={drop}>
        <CardElement
          style={{
            background:
              userIsDragging === 'blackCard' ||
              userIsDragging === 'blackCardFromPlayer'
                ? '#2cce9f'
                : null,
            transform: isOver ? 'scale(1.05)' : null,
          }}
        >
          <PlayerName style={{margin: 0}}>{`${getBlackCardLength({
            players,
            index,
          })} ${getPlayerName({myName, players, index, socket})}`}</PlayerName>
        </CardElement>
        {index === winningPlayerIndex && <Confetti />}
      </Wrap>
      {players &&
        players[index] &&
        players[index].blackCards &&
        players[index].blackCards.map((blackCard) => (
          <div
            key={blackCard.text}
            style={{
              pointerEvents:
                userIsDragging === 'blackCard' ||
                userIsDragging === 'blackCardFromPlayer'
                  ? 'none'
                  : null,
            }}
          >
            <DraggableCard
              screen="main"
              flippedByDefault
              isFlippable={false}
              socket={socket}
              setUserIsDragging={setUserIsDragging}
              type="blackCardFromPlayer"
              isMyCardsOpen={isMyCardsOpen}
              isSubmittedTableOpen={isSubmittedTableOpen}
              {...blackCard}
            />
          </div>
        ))}
    </PlayerDropWrap>
  );
};

export default PlayerDrop;