import React from "react";
import { textTruncate } from "../../../utils/helpers/shortenString";
import { UserProfile } from "../../../types/notifications";
import MoreIcon from "../../navbar/moreInfo";
import { streamingProfile } from "../../../utils/helpers/streamer";
import { SmallMore } from "../../buttons/SmallMore";
import TooltipBottom from "../../../utils/helpers/tooltipBottom";
import MoreReport from "../../buttons/moreReport";
import { Transition } from "@headlessui/react";
import classNames from "../../../utils/helpers/className";

const contentCard = ({
  profile,
  mobile,
}: {
  mobile?: boolean;
  profile: streamingProfile;
}) => {
  // group-hover:lg:h-[calc(15.4vw+4.563px)] group-hover:xl:h-[calc(11.9vw+1.563px)]
  return (
    <div className=" group flex  h-full  w-full flex-col justify-center group-hover:justify-between">
      <Transition show={true} className="flex h-full w-full  group-hover:grow ">
        <div
          className={classNames(
            mobile ? "h-auto w-[30vw]" : "h-full",
            "group-hover: block  whitespace-normal bg-transparent  group-hover:flex  group-hover:flex-grow"
          )}
        >
          <div className="group-hover:h-50 relative flex  w-full group-hover:z-20   ">
            <div className="absolute -top-[1.5em] -left-[0.35em] z-10 m-auto hidden h-[1.0rem] w-[1.0rem] rotate-[45deg] border-[#0e0e10] bg-[#0e0e10] group-hover:flex"></div>
            <Transition.Child className="  overflow-hidden bg-transparent transition-transform duration-500 group-hover:absolute   group-hover:flex-1  group-hover:translate-x-[0.2em]   group-hover:-translate-y-4 group-hover:border-l-8 group-hover:border-b-8  group-hover:border-l-red-400 group-hover:border-b-yellow-400">
              <video
                title={`moon1`}
                id={`1`}
                muted
                loop
                className="w-full  cursor-pointer object-cover "
                src={`/videos/s${1}.mp4`}
              ></video>
            </Transition.Child>
            {/* change %'s to em's  */}
            <div className=" invisible absolute -bottom-[0.23em] -right-[0.035em] z-10 m-auto h-[0.50rem]  w-[0.50rem] -rotate-[90deg] border-[#0e0e10] bg-gradient-to-tr from-[rgba(14,14,16,1)_50%] to-[rgba(250,204,21,1)_50%] shadow-none transition-transform duration-500 group-hover:visible group-hover:flex group-hover:translate-x-[0.21em] group-hover:-translate-y-[1.00em]"></div>
            {/* <Transition.Child className="hidden h-full w-2 bg-yellow-300 hover:block">
            </Transition.Child> */}
          </div>
        </div>
      </Transition>
      <div className="flex ">
        <div className="w-auto whitespace-normal pt-2 pr-4">
          <div className="w-auto cursor-pointer whitespace-normal">
            <img
              src="/120.jpg"
              alt="streamer profile"
              className="w-[1.5rem] rounded-full"
            />
          </div>
        </div>
        <div className="flex w-full flex-col pt-0 leading-none">
          <div className="flex">
            <div className="m-0 flex w-full items-center justify-between p-0 pt-1 font-bold text-white ">
              {/* l?:44 m?:30 *should be the max length of the titles */}
              <div className=" cursor-pointer text-[0.7rem] hover:text-violet-400">
                {textTruncate(
                  "this is the longes stream title inexistance a",
                  30
                )}
              </div>
              <div className=" flex w-auto flex-col items-center justify-center pt-2">
                <MoreReport />
              </div>
            </div>
          </div>
          <p
            title={`streamer name`}
            className=" cursor-pointer text-[0.6rem] text-gray-400"
          >
            {profile.name}
          </p>
          <div className="w-full">
            <p className="inline-block cursor-pointer  text-[0.4rem] text-gray-400 hover:text-violet-400">
              Category
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default contentCard;