// it has style inside index.scss ---> // Start Sidebar/SidebarMenu && end Sidebar/SidebarMenu

import React from "react";

import "./index.scss";

import downwardArrow from "./arrow-down.svg";
import profilePic from "./profile-pic.svg";
import element from "./element-4.svg";
import folderOpen from "./folder-open.svg";
import wallet from "./wallet-money.svg";
import logout from "./logout.svg";
import messageText from "./message-text.svg";
import moon from "./moon.svg";
import sms from "./sms.svg";
import userEdit from "./user-edit.svg";
import Switch from "../../Switch";

const SidebarMenu = ({ items, buttons }) => {
  return (
    <section>
      <div
        style={{ width: "20%" }}
        className="bg-white p-5 h-screen shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar"
      >
        {/* profile */}
        <div className="flex flex-row items-center">
          <img src={profilePic} alt="" className="w-12 rounded-full" />
          <p className="text-blue-600 font-bold text-base flex-1 mr-2">
            کامران کوهستانی شیرازی
          </p>
          <img src={downwardArrow} alt="" className="w-5 cursor-pointer" />
        </div>
        {/* divider */}
        <div className="border border-gray-200 mt-5"></div>
        <p className="text-xs text-gray-400 my-4">منوی کاربری</p>
        {/* items */}
        {items.map((item, i) => (
          <div className="flex flex-col item-center">
            {/* menu items */}
            <div
              key={i}
              className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2"
            >
              <img src={item.icon} alt="" className="w-5 h-5" />
              <p className="text-blue-600 text-sm flex-1 mx-2">{item.title}</p>
              {item.notification && (
                <div className=" w-6 h-6 bg-blue-700 text-center rounded-full flex flex-col items-center justify-center">
                  <span className=" text-white text-xs">
                    {item.notification}
                  </span>
                </div>
              )}
            </div>
            {/* sub items */}
            {item.subItems.map((subItem, i) => (
              <div
                key={i}
                className="flex flex-row items-center cursor-pointer hover:bg-gray-100 rounded-md p-2"
              >
                {subItem.name && (
                  <p className="text-gray-400 text-xs flex-1 mr-4">
                    {subItem.name}
                  </p>
                )}
                {subItem.num && (
                  <div className=" w-6 h-6 bg-yellow-400 text-center rounded-full flex flex-col items-center justify-center">
                    <span className=" text-white text-xs">{subItem.num}</span>
                  </div>
                )}
              </div>
            ))}
          </div>
        ))}
        {/* buttons */}
        {buttons.map((button, i) => (
          <div className="flex flex-col item-center">
            {/* divider */}
            <div className="border border-gray-200 my-1"></div>
            <div
              key={i}
              className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2"
            >
              <img src={button.icon} alt="" />
              <p className="text-blue-600 text-sm flex-1 mx-2">
                {button.title}
              </p>
              {button.leftIcon && <Switch />}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

export default SidebarMenu;

SidebarMenu.defaultProps = {
  items: [
    {
      icon: element,
      title: "داشبورد مدیریت",
      notification: null,
      subItems: [],
    },
    {
      icon: folderOpen,
      title: "پروژه ها",
      notification: null,
      subItems: [
        { name: "افزدون پروژه", num: null },
        { name: "مدیریت پروژه ها", num: null },
        { name: "پروژه های حذف شده", num: null },
      ],
    },
    {
      icon: wallet,
      title: "مالی و حسابداری",
      notification: null,
      subItems: [
        { name: "تمدید سرویس", num: null },
        { name: "بسته های اشتراکی", num: null },
        { name: "فاکتور ها", num: 1 },
        { name: "درخواست تسویه حساب", num: null },
      ],
    },
    {
      icon: userEdit,
      title: "دیدگاه ها",
      notification: null,
      subItems: [],
    },
    {
      icon: userEdit,
      title: "حساب کاربری",
      notification: null,
      subItems: [{ name: "ویرایش حساب کاربری", num: null }],
    },
    {
      icon: sms,
      title: "پشتیبانی",
      notification: 7,
      subItems: [
        { name: "تیکت ها", num: null },
        { name: "ارسال تیکت جدید", num: null },
        { name: "ویکی", num: null },
      ],
    },
    {
      icon: messageText,
      title: "متستندات",
      notification: null,
      subItems: [{ name: "API توسعه دهندگان", num: null }],
    },
  ],
  buttons: [
    { icon: moon, title: "حالت شب", leftIcon: moon },
    { icon: logout, title: "خروج از حساب کاربری", leftIcon: null },
  ],
};