'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