import AppBar from "@/components/layouts/AppBar";
import Layout from "@/components/layouts/Layout";
import Link from "@/components/elements/Link";
import { useAuth } from "@/core/utils/auth";
import {
  ArrowRightOnRectangleIcon,
  ChatBubbleLeftRightIcon,
  ChevronRightIcon,
  MapIcon,
  PaperClipIcon,
  PencilSquareIcon,
  QuestionMarkCircleIcon,
  ReceiptPercentIcon,
  UserIcon,
  HeartIcon
} from "@heroicons/react/24/outline"; 
import WithAuth from "@/components/auth/WithAuth";

const Menu = ({ icon, name, url }) => {
  return (
    <Link href={url} className="text-gray_r-11 font-normal flex gap-x-2 items-center py-4 border-b border-gray_r-6">
      <span className="flex gap-x-2">
        { icon }
        { name }
      </span>
      <ChevronRightIcon className="w-5 ml-auto"/>
    </Link>
  );
};

export default function MyMenu() {
  const [auth] = useAuth();

  return (
    <WithAuth>
      <Layout>
        <AppBar title="Menu Utama" />

        <div className="p-4 flex gap-x-2 items-center">
          <div className="flex-1 flex gap-x-3 items-center">
            <div className="p-2 bg-gray_r-4 rounded-full h-fit">
              <UserIcon className="w-6" />
            </div>
            <div>
              <h2>{ auth?.name }</h2>
              { auth?.company ? (
                <div className="badge-red font-normal text-xs">Akun Bisnis</div>
                ) : (
                <div className="badge-gray font-normal text-xs">Akun Individu</div>
              ) }
            </div>
          </div>
          <Link href="/my/profile">
            <PencilSquareIcon className="w-6 text-yellow_r-12"/>
          </Link>
        </div>
    
        <div className="px-4 mt-4">
          <p className="font-medium mb-2">Aktivitas Pembelian</p>
          <div className="flex flex-col mb-6">
            <Menu icon={<ReceiptPercentIcon className="w-5" />} name="Daftar Transaksi" url="/my/transactions" />
            <Menu icon={<PaperClipIcon className="w-5" />} name="Invoice & Faktur Pajak" url="/my/invoices" />
            <Menu icon={<HeartIcon className="w-5" />} name="Wishlist" url="/my/wishlist" />
          </div>

          <p className="font-medium mb-2">Pusat Bantuan</p>
          <div className="flex flex-col mb-6">
            <Menu icon={<ChatBubbleLeftRightIcon className="w-5"/>} name="Layanan Pelanggan" url="/" />
            <Menu icon={<QuestionMarkCircleIcon className="w-5"/>} name="F.A.Q" url="/faqs" />
          </div>

          <p className="font-medium mb-2">Pengaturan Akun</p>
          <div className="flex flex-col mb-6">
            <Menu icon={<MapIcon className="w-5" />} name="Daftar Alamat" url="/my/address" />
            <Menu icon={<ArrowRightOnRectangleIcon className="w-5" />} name="Keluar Akun" url="/logout" />
          </div>
        </div>
      </Layout>
    </WithAuth>
  );
}