import { Button } from "@mui/material";
import DetailUser from "./detailUser";
import Head from "./Head";
import NotfoundDashboard from "./NotfoundDashboard";

// Sidebars
import Comments from "./sidebars/comments";
import Messages from "./sidebars/messages";
import Transactions from "./sidebars/transactions";
import Turns from "./sidebars/turns";
import DownloadD from "@/components/icons/DownloadD";
import ArrowRightD from "@/components/icons/ArrowRightD";

const listTab = [
  "حساب کاربری",
  "نوبت های من",
  "تراکنش های من",
  "نظرات من",
  "پیام ها",
  "خروج",
];

function UserAccountPage({
  user,
  isTurnsDetails,
  setIsTurnsDetails,
  value,
  setIsOpenSide,
}) {
  const sidebars = [
    <DetailUser
      user={user}
      isTurnsDetails={isTurnsDetails}
      setIsTurnsDetails={setIsTurnsDetails}
    />,
    <Turns user={user} loading={false} setIsTurnsDetails={setIsTurnsDetails} />,
    <Transactions user={user} loading={false} />,
    <Comments user={user} loading={false} />,
    <Messages user={user} loading={false} />,
    <NotfoundDashboard />,
  ];

  return (
    <div className="w-full md:w-[68%] lg:w-[72%]">
      {value === 5 ? (
        <NotfoundDashboard />
      ) : (
        <>
          <Head user={user} />
          <div className="w-full flex items-center justify-between">
            <Button
              className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
              onClick={() =>
                isTurnsDetails ? setIsTurnsDetails(false) : setIsOpenSide(true)
              }
              variant="text"
            >
              <ArrowRightD />
              <p className="text-[#525252] text-[14px] font-bold">
                {isTurnsDetails ? "جزئیات نوبت " : listTab[value]}
              </p>
            </Button>
            {value === 1 && isTurnsDetails ? (
              <Button
                className="!flex md:!hidden !py-[8px] !px-[12px] !text-[#616161] !text-[14px] !font-medium !justify-center !items-center !gap-[4px]"
                variant="text"
              >
                <DownloadD />
                دانلود اطلاعات نوبت
              </Button>
            ) : undefined}
          </div>
          <div className=" mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
            {sidebars[value]}
          </div>
        </>
      )}
    </div>
  );
}

export default UserAccountPage;
