"use client";

import { useEffect, useState } from "react";

// Tabs
import Turns from "./tabs/turns";
import DetailUser from "./tabs/detailUser";
import Comments from "./tabs/comments";
import Messages from "./tabs/messages";
import Tabs from "@/app/component/Tabs";
import Transactions from "./tabs/transactions";
import IsTurnsDetails from "./tabs/turns/isTurnsDetails";
import ArrowRightD from "@/components/icons/ArrowRightD";
import { Button } from "@mui/material";
import NotfoundDashboard from "./NotfoundDashboard";
import DownloadD from "@/components/icons/DownloadD";

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

function ContentTabs({
  user,
  value,
  isTurnsDetails,
  setIsTurnsDetails,
  setValue,
  isOpenSide,
  setIsOpenSide,
}) {
  const [loading, setLoading] = useState(true);
  const handleChange = (event, newValue) => setValue(newValue);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  const components = [
    <DetailUser user={user} />,
    <Turns
      user={user}
      loading={loading}
      setIsTurnsDetails={setIsTurnsDetails}
    />,
    <Transactions user={user} loading={loading} />,
    <Comments user={user} loading={loading} />,
    <Messages user={user} loading={loading} />,
    <NotfoundDashboard />,
  ];

  return (
    <div
      className="md:mt-[12px] lg:mt-[24px] md:pt-[12px] pb-[24px] w-full rounded-[8px] 
            shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
            bg-transparent md:bg-[#FFF]"
    >
      <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>
      {isTurnsDetails ? (
        <IsTurnsDetails
          loading={loading}
          user={user}
          setIsTurnsDetails={setIsTurnsDetails}
        />
      ) : (
        <>
          <div className="!hidden md:!flex !w-full">
            <Tabs
              style={{
                ".MuiTabs-indicator": {
                  height: "2px",
                  borderRadius: "16px",
                  background: "#5559CE",
                },
                "& .MuiTabs-scroller": {
                  borderBottom: "1px solid #EFEFEF",
                },
                "& .MuiTabs-flexContainer": {
                  paddingRight: "15px",
                  paddingLeft: "15px",
                },
                "& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
                  color: "#5559CE !important",
                },
                "& .MuiButtonBase-root.Mui-selected": {
                  color: "#5559CE !important",
                },
              }}
              value={value}
              color="#5559CE"
              listTab={listTab}
              handleChange={handleChange}
            />
          </div>
          <div className="mt-[24px] sm:mt-[28px] md:mt-[32px] px-0 md:px-[24px]">
            {components[value]}
          </div>
        </>
      )}
    </div>
  );
}

export default ContentTabs;