import AppBar from "../../components/AppBar";
import Layout from "../../components/Layout";
import Link from "../../components/Link";
import { useAuth } from "../../helpers/auth";
import {
  ArrowRightOnRectangleIcon,
  ChatBubbleLeftRightIcon,
  ChevronRightIcon,
  ClipboardDocumentIcon,
  ClipboardIcon,
  ClockIcon,
  DocumentArrowDownIcon,
  MapIcon,
  PaperClipIcon,
  PencilSquareIcon,
  QuestionMarkCircleIcon,
  ReceiptPercentIcon,
  UserIcon
} from "@heroicons/react/24/outline"; 

const activityMenus = [
  { icon: (<ReceiptPercentIcon className="w-5" />), name: 'Daftar Transaksi', url: '/my/profile' },
  { icon: (<ClipboardIcon className="w-5" />), name: 'Penawaran Harga', url: '/my/profile' },
  { icon: (<ClockIcon className="w-5" />), name: 'Purchase Order', url: '/my/profile' },
  { icon: (<DocumentArrowDownIcon className="w-5" />), name: 'Faktur Penjualan', url: '/my/profile' },
  { icon: (<PaperClipIcon className="w-5" />), name: 'Faktur Pajak', url: '/my/profile' },
  { icon: (<ClipboardDocumentIcon className="w-5" />), name: 'Surat Jalan', url: '/my/profile' }
];

const serviceMenus = [
  { icon: (<ChatBubbleLeftRightIcon className="w-5"/>), name: 'Customer Support', url: '/my/profile' },
  { icon: (<QuestionMarkCircleIcon className="w-5"/>), name: 'F.A.Q', url: '/my/profile' },
];

const settingMenus = [
  { icon: (<MapIcon className="w-5" />),name: 'Daftar Alamat', url: '/my/profile' },
  { icon: (<ArrowRightOnRectangleIcon className="w-5" />),name: 'Keluar Akun', url: '/logout' },
];

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

  return (
    <>
      <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>
              <div className="badge-red font-normal text-xs">Akun Bisnis</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">
            { activityMenus.map((menu, index) => (
              <Link href={menu.url} className="text-gray_r-11 font-normal flex gap-x-2 items-center py-4 border-b border-gray_r-6" key={index}>
                <span className="flex gap-x-2">
                  { menu.icon }
                  { menu.name }
                </span>
                <ChevronRightIcon className="w-5 ml-auto"/>
              </Link>
            )) }
          </div>

          <p className="font-medium mb-2">Pusat Bantuan</p>
          <div className="flex flex-col mb-6">
            { serviceMenus.map((menu, index) => (
              <Link href={menu.url} className="text-gray_r-11 font-normal flex gap-x-2 items-center py-4 border-b border-gray_r-6" key={index}>
                <span className="flex gap-x-2">
                  { menu.icon }
                  { menu.name }
                </span>
                <ChevronRightIcon className="w-5 ml-auto"/>
              </Link>
            )) }
          </div>

          <p className="font-medium mb-2">Pengaturan Akun</p>
          <div className="flex flex-col mb-6">
            { settingMenus.map((menu, index) => (
              <Link href={menu.url} className="text-gray_r-11 font-normal flex gap-x-2 items-center py-4 border-b border-gray_r-6" key={index}>
                <span className="flex gap-x-2">
                  { menu.icon }
                  { menu.name }
                </span>
                <ChevronRightIcon className="w-5 ml-auto"/>
              </Link>
            )) }
          </div>
        </div>
      </Layout>
    </>
  );
}