import React, { useState } from "react";
import "../../../css/ContactTile.css";
import { useTheme } from "../../../Context/ThemeContext";
import { useLang } from "../../../Context/LangContext";

const ContactTileTiltFlip = ({
  initialAnimation,
  onMouseEnter,
  onAnimationEnd,
}) => {
  const [animation, setAnimation] = useState(initialAnimation);
  const { colormode } = useTheme();
  const { language } = useLang();
  const [isFlipped, setIsFlipped] = useState(false);
  const [tiltStyle, setTiltStyle] = useState({});

  const handleMouseMove = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    const tiltX = (y / rect.height) * 40; // Harter Tilt
    const tiltY = -(x / rect.width) * 40;

    setTiltStyle({
      transform: `rotateX(${tiltX}deg) rotateY(${tiltY}deg)`,
    });
  };

  const handleMouseLeave = () => {
    setTiltStyle({ transform: "rotateX(0deg) rotateY(0deg)" });
  };

  const handleClick = () => {
    setIsFlipped(!isFlipped);
  };

  return (
    <div
      className={`container contactTile ${colormode} animate__animated ${animation}`}
      /*       onMouseEnter={() => onMouseEnter(setAnimation)}
       */ onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <div
        className={`card ${isFlipped ? "flipped" : ""}`}
        onClick={handleClick}
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
        style={{
          transform: `${tiltStyle.transform || "rotateX(0deg) rotateY(0deg)"} ${
            isFlipped ? "rotateY(180deg)" : ""
          }`,
        }}
      >
        <div className="card-inner">
          <div className={`card-front ${colormode}`}>
            <h2>Yousif Paulus</h2>
            <p>React | Node.js | TypeScript</p>
            <p>
              {language === "en-GB"
                ? "Full-Stack Developer"
                : "Full-Stack Entwickler"}
            </p>
          </div>
          <div className={`card-back ${colormode}`}>
            <p>
              📧 {/* Email: */}{" "}
              <a href="mailto:yousif.paulus@hotmail.de">
                yousif.paulus@hotmail.de
              </a>
            </p>
            <p>
              📞{" "}
             {/*  {language === "en-GB" ? "Phone:" : "Tel:"} */}
              <a href="tel:+4915150717623">
                {language === "en-GB"
                  ? "+49 151 50717623"
                  : "0151 50717623"}
              </a>
            </p>

            <p>
              🌐 {/* Portfolio: */}{" "}
              <a href="http://www.yousifpaulus.dev">www.yousifpaulus.dev</a>
            </p>
            {/*   <p>
              💬{" "}
              {language === "en-GB"
                ? "Let’s Build Something Great."
                : "Tel: +49 151 50717623"}
            </p> */}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContactTileTiltFlip;
