import { useState } from "react";
import {
  AlertOctagonIcon,
  BellRingingIcon,
  BookmarkIcon,
  CompassIcon,
  DropdownIcon,
  MessageCircleIcon,
  ThumbsUpIcon,
  XSquareIcon,
} from "../../../../icons";
import clsx from "clsx";
import { Media, MediaGallery } from "../../../molecules";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../../../../../@/components/ui/dropdown-menu";

type CommunityCardProps = {
  supportingText?: string;
  communityImage: string;
  communityName: string;
  profileName: string;
  contentText: string;
  medias: Media[];
};

const CommunityCard = ({
  supportingText,
  communityImage,
  communityName,
  profileName,
  contentText,
  medias,
}: CommunityCardProps) => {
  const [isTextExpanded, setIsTextExpanded] = useState(false);

  return (
    <section className="bg-mono-50 flex flex-col items-start p-4 gap-4 rounded-2xl">
      {supportingText && (
        <div className="flex gap-2 items-center text-mono-500 text-sm">
          <CompassIcon />
          {supportingText}
        </div>
      )}
      <div className="h-[1px] w-full bg-mono-200"></div>
      <div className="w-full flex gap-3 items-center">
        <div className="flex gap-3 items-center">
          <img
            className="w-[48px] h-[48px] rounded-lg border-[1.5px] border-solid"
            src={communityImage}
          />
          <div>
            <div>
              <span className="text-mono-900 text-base font-semibold">
                {communityName}
              </span>
            </div>
            <div>
              <span className="text-mono-500 text-xs font-medium">
                {profileName}
              </span>
            </div>
          </div>
        </div>
        <span className="ml-auto">
          <DropdownMenu>
            <DropdownMenuTrigger>
              <DropdownIcon />
            </DropdownMenuTrigger>
            <DropdownMenuContent className="bg-mono-0 text-gray-500">
              <DropdownMenuItem>
                <BookmarkIcon className="mr-2" />
                Save post
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <hr />
              <DropdownMenuItem>
                <BellRingingIcon className="mr-2" />
                Turn on notifications for this post
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <hr />
              <DropdownMenuItem>
                <XSquareIcon className="mr-2" />
                Hide post
              </DropdownMenuItem>
              <DropdownMenuItem>
                <AlertOctagonIcon className="mr-2" />
                Report post to LogoIpsum
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </span>
      </div>
      <div>
        <div
          className={clsx("overflow-hidden", {
            "max-h-[100px]": !isTextExpanded,
          })}
        >
          {contentText}
        </div>
        <span
          className="text-mono-600 cursor-pointer text-sm"
          onClick={() => setIsTextExpanded(!isTextExpanded)}
        >
          See {isTextExpanded ? "less" : "more"}
        </span>
      </div>
      <div>
        <MediaGallery items={medias} />
        <div className="flex gap-4 mt-2 p-3 justify-between">
          <div className="flex gap-4">
            <ThumbsUpIcon />
            <MessageCircleIcon />
          </div>
          <div className="flex gap-4 text-sm text-mono-500">
            <span>15 Likes</span>
            <span>25 Comments</span>
          </div>
        </div>
        <div></div>
      </div>
    </section>
  );
};

export { CommunityCard, CommunityCardProps };
