import React, { useState } from 'react';
import styled from 'styled-components';
import { UI_BREAKPOINT_MOBILE } from '../../constants/uiBreakpoints';
import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';

interface IInformationCenterCellProps {
  name: string;
  spriteKey: string;
  atlasJSON: any;
  atlasIMG: string;
  onClick?: () => void;
  onMouseEnter?: (e: React.MouseEvent) => void;
  onMouseLeave?: () => void;
  onMouseMove?: (e: React.MouseEvent) => void;
  onTouchStart?: (e: React.TouchEvent) => void;
}

export const InformationCenterCell: React.FC<IInformationCenterCellProps> = ({
  name,
  spriteKey,
  atlasJSON,
  atlasIMG,
  onClick,
  onMouseEnter,
  onMouseLeave,
  onMouseMove,
  onTouchStart,
}) => {
  const [touchStartY, setTouchStartY] = useState<number | null>(null);
  const [touchStartX, setTouchStartX] = useState<number | null>(null);
  const [isTouchScrolling, setIsTouchScrolling] = useState(false);

  const handleTouchStart = (e: React.TouchEvent) => {
    setTouchStartY(e.touches[0].clientY);
    setTouchStartX(e.touches[0].clientX);
    setIsTouchScrolling(false);
  };

  const handleTouchMove = (e: React.TouchEvent) => {
    if (touchStartY !== null && touchStartX !== null) {
      const touchDiffY = Math.abs(e.touches[0].clientY - touchStartY);
      const touchDiffX = Math.abs(e.touches[0].clientX - touchStartX);

      // If user moved finger more than 15px in any direction, consider it scrolling
      if (touchDiffY > 15 || touchDiffX > 15) {
        setIsTouchScrolling(true);
        e.stopPropagation(); // Prevent parent elements from handling this touch
      }
    }
  };

  const handleTouchEnd = (e: React.TouchEvent) => {
    if (!isTouchScrolling && onTouchStart) {
      onTouchStart(e);
    }
    setTouchStartY(null);
    setTouchStartX(null);
  };

  return (
    <CellContainer
      onClick={onClick}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      onMouseMove={onMouseMove}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      <SpriteContainer>
        <SpriteFromAtlas
          atlasJSON={atlasJSON}
          atlasIMG={atlasIMG}
          spriteKey={spriteKey}
          width={32}
          height={32}
          imgScale={1}
        />
      </SpriteContainer>
      <CellNameContainer>
        <CellName>{name}</CellName>
      </CellNameContainer>
    </CellContainer>
  );
};

const CellContainer = styled.div`
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.2rem;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  width: 100%;
  height: 100%;
  min-height: 90px;
  box-sizing: border-box;
  gap: 0.2rem;
  margin: 0;

  @media (min-width: 360px) {
    padding: 0.3rem;
    gap: 0.3rem;
    margin: 1px;
    width: calc(100% - 2px);
    min-height: 100px;
  }

  @media (min-width: ${UI_BREAKPOINT_MOBILE}) {
    min-height: 110px;
  }

  &:hover {
    background: rgba(0, 0, 0, 0.3);
  }
`;

const SpriteContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  flex-shrink: 0;
  overflow: hidden;

  padding: 1rem;
  margin-top: 1rem;

  @media (min-width: 360px) {
    width: 36px;
    height: 36px;
  }

  @media (min-width: 480px) {
    width: 42px;
    height: 42px;
  }

  @media (min-width: ${UI_BREAKPOINT_MOBILE}) {
    width: 48px;
    height: 48px;
  }

  .sprite-from-atlas-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2);
    image-rendering: pixelated;
  }
`;

const CellNameContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  padding-top: 0.1rem;
`;

const CellName = styled.h3`
  font-size: 0.5rem;
  color: #fef08a;
  margin: 0;
  text-align: center;
  font-family: 'Press Start 2P', cursive;
  line-height: 1.1;
  word-break: break-word;
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
  width: 100%;
  padding: 0 0.125rem;
  box-sizing: border-box;

  @media (min-width: 320px) {
    padding: 0 0.25rem;
  }

  @media (min-width: 360px) {
    font-size: 0.55rem;
  }

  @media (min-width: 480px) {
    font-size: 0.6rem;
  }

  @media (min-width: ${UI_BREAKPOINT_MOBILE}) {
    font-size: 0.65rem;
  }
`;
