import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import {
  StarOutlined,
  UnorderedListOutlined,
  ShopOutlined,
  UserOutlined,
  EditOutlined,
  DashboardOutlined,
  UsergroupAddOutlined,
  SettingOutlined,
  DeploymentUnitOutlined,
} from "@ant-design/icons";
import ImageWithFallback from "./ImageWithFallback";
import { useUser } from "context/UserContext";
import { getRouterTitle } from "utilFuncs/utilFunctions";
import type { MenuProps } from "antd";
import { Button, Dropdown, Space } from "antd";

function ProfileLinks({ shopSlug }: any) {
  const router = useRouter();

  console.log(router.pathname, "pathname");

  const { user } = useUser();

  const items: MenuProps["items"] = [
    // {
    //   key: "0",
    //   icon: <DeploymentUnitOutlined />,
    //   label: <Link href={`/my-shops`}>My Shop Ads</Link>,
    // },
    {
      key: "1",
      icon: <DashboardOutlined />,
      label: <Link href={`/my-shops/${shopSlug}/shop-overview`}>Overview</Link>,
    },
    {
      key: "2",
      icon: <UsergroupAddOutlined />,
      label: (
        <Link href={`/my-shops/${shopSlug}/shop-members`}>Shop Members</Link>
      ),
    },
    {
      key: "3",
      icon: <UnorderedListOutlined />,
      label: (
        <Link href={`/my-shops/${shopSlug}/shop-activity`}>Shop Activiy</Link>
      ),
    },
    {
      key: "4",
      icon: <StarOutlined />,
      label: (
        <Link href={`/my-shops/${shopSlug}/ratings-and-reviews`}>
          Ratings and Reviews
        </Link>
      ),
    },
    {
      key: "5",
      icon: <SettingOutlined />,
      label: <Link href={`/my-shops/${shopSlug}/settings`}>Settings</Link>,
    },
  ];

  return (
    <div className="profile-sidebar">
      <div className="profile-card">
        <div className="profile-sidebar-title">
          <h4 className="title">{getRouterTitle(router)}</h4>
        </div>
        <div className="profile-user text-center">
          <div className="profile-author center">
            {/* <img src={userState?.picture} alt={userState?.name} /> */}
            <div className="w-20 h-20 bg-gray-300 rounded-full relative">
              <ImageWithFallback
                src={user?.picture}
                alt={user?.name}
                layout="fill"
              />
            </div>
          </div>
          <div className="profile-author-name">
            <h4 className="name mb-2">{user?.name}</h4>
            <Button
              href={`/user/${user?.name}`}
              type="primary"
              block
              icon={<UserOutlined />}
            >
              Go To Profile
            </Button>

            <Button disabled={true} icon={<EditOutlined />} className="mt-2" type="default">
              Edit Shop details
            </Button>
          </div>
        </div>
        <div className="profile-link">
          <ul>
            <li>
              <Link href="/my-ads">
                <a
                  className={`${router.pathname === "/my-ads" ? "active" : ""}`}
                >
                  <UnorderedListOutlined /> My Ads
                </a>
              </Link>
            </li>
            <li>
              {/* <Link href="/my-shops"> */}
              <Dropdown menu={{ items }} placement="bottomLeft">
                <a
                  className={`${
                    router.pathname === "/my-shops" ||
                    router.pathname === "/my-shops/[shop_slug]/shop-overview" ||
                    router.pathname === "/my-shops/[shop_slug]/settings" ||
                    router.pathname ===
                      "/my-shops/[shop_slug]/ratings-and-reviews" ||
                    router.pathname === "/my-shops/[shop_slug]/shop-members" ||
                    router.pathname === "/my-shops/[shop_slug]/shop-activity" ||
                    router.pathname === "/my-shops/[shop_slug]/settings"
                      ? "active"
                      : ""
                  }`}
                >
                  <ShopOutlined /> My Shop
                </a>
              </Dropdown>
              {/* </Link> */}
            </li>
            <li>
              <Link href="/my-favorites">
                <a
                  className={`${
                    router.pathname === "/my-favorites" ? "active" : ""
                  }`}
                >
                  <StarOutlined /> My Favorites
                </a>
              </Link>
            </li>
            <li>
              <Link href="/my-account">
                <a
                  className={`${
                    router.pathname === "/my-account" ? "active" : ""
                  }`}
                >
                  <UserOutlined /> My Account
                </a>
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}

export default ProfileLinks;