import React from "react";
import "./HeaderBannerMobile.css";
import mixpanel from "../../utils/mixpanel-faker";
import { EventNames } from "../../utils/eventLogger";

interface HeaderBannerMobileProps {
  isCollapsed: boolean;
  onToggleCollapse: () => void;
  genre: string;
  genreColor: string;
}

const HeaderBannerMobile: React.FC<HeaderBannerMobileProps> = ({
  isCollapsed,
  onToggleCollapse,
  genre,
  genreColor,
}) => {
  const navigate = () => {
    window.location.href = "https://suno.com/create/"; // Could have endpoint that passes in prompt called here
  };
  return (
    <div className={`headerBannerMobile ${isCollapsed ? "collapsed" : ""}`}>
      <div
        className="sunoButtonMobile"
        aria-label={"Suno Button"}
        style={{
          display: isCollapsed ? "none" : "block",
        }}
      >
        <a
          href="https://www.suno.com/"
          rel="noopener noreferrer"
          aria-label="Visit Suno homepage"
        >
          <img
            src={"https://groove.suno.com/icons/Logo-1.svg"}
            alt="Suno Logo"
          />
        </a>
      </div>
      <div className="headerTextMobile">
        Explore new styles <br />
        of music with Suno
      </div>
      {/* <div className="headerSubTextMobile">
        Here's a small taste (or whatever the <br />
        listening equivalent is) of what's possible
      </div> */}
      {isCollapsed ? (
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
            textAlign: "center",
          }}
        >
          <img
            src={"https://groove.suno.com/icons/Logo-1.svg"}
            alt="Suno Logo"
            style={{
              width: "50px",
              height: "50px",
              marginRight: "14px",
              cursor: "pointer",
              marginTop: "10px",
              color: "white",
              padding: "9px",
            }}
            onClick={(e) => {
              onToggleCollapse();
              e.stopPropagation();
            }}
          />

          <div
            className="linkButtonMobile"
            onClick={navigate}
            aria-label="Suno Button"
            role="button"
            tabIndex={0}
            onKeyDown={(e) => {
              if (e.key === "Enter" || e.key === " ") {
                navigate();
              }
            }}
            style={{
              width: isCollapsed ? "280px" : "302px",
              maxWidth: isCollapsed ? "280px" : "302px",
            }}
          >
            Create with v5
          </div>
        </div>
      ) : (
        <div
          className="linkButtonMobile"
          onClick={navigate}
          aria-label="Suno Button"
          role="button"
          tabIndex={0}
          onKeyDown={(e) => {
            if (e.key === "Enter" || e.key === " ") {
              navigate();
            }
          }}
        >
          Create with v5
        </div>
      )}
      {genre !== "..." ? (
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            textAlign: "center",
            maxWidth: "350px",
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
            width: "100%",
          }}
        >
          <div style={{ marginRight: "8px", marginTop: "4px" }}>
            <svg
              width="12"
              height="13"
              viewBox="0 0 12 13"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect
                className="bar bar1"
                x="3.26929"
                y="0.445496"
                width="2"
                height="12"
                transform="rotate(-1.76 3.26929 0.445496)"
                fill={genreColor ? genreColor : "white"}
              />
              <rect
                className="bar bar2"
                x="6.41528"
                y="5.15097"
                width="2"
                height="7.2"
                transform="rotate(-1.76 6.41528 5.15097)"
                fill={genreColor ? genreColor : "white"}
              />
              <rect
                className="bar bar3"
                x="9.34033"
                y="2.66003"
                width="2"
                height="9.6"
                transform="rotate(-1.76 9.34033 2.66003)"
                fill={genreColor ? genreColor : "white"}
              />
              <rect
                className="bar bar4"
                x="0.528809"
                y="8.93362"
                width="2"
                height="3.6"
                transform="rotate(-1.76 0.528809 8.93362)"
                fill={genreColor ? genreColor : "white"}
              />
            </svg>
          </div>
          <span
            className="currentlyListeningMobile"
            style={{
              color: genreColor ? genreColor : "#FFFFFF",
            }}
          >
            <b>{genre}</b>
          </span>
        </div>
      ) : null}
    </div>
  );
};

export default HeaderBannerMobile;