"use client"

import { useRouter } from "next/navigation";
import { LAYOUT_SETTING } from "@/lib/appConstant";
import { getCompanyDomain, getLayoutViewPage, getPageMargin, getServicePath, getViewSettings } from "@/lib/redux/features/serviceAdmin";
import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
import { ServiceViewSettings } from "@/types/serviceAdmin";
import { useTranslations } from "use-intl";
import { useEffect, useState } from "react";
import { getAuthInfo,  getIsAuthenticated,  getIsMobileApp } from "@/lib/redux/features/auth";
import * as _ from 'lodash';
// import { GetContentByHashtagRequest, GetContentByHashtagRequestData } from "@/types/content";
import { useMounted } from "@/hooks/useMounted";
import useResponsive from "@/hooks/useResponsive";
import { makeStyles } from "tss-react/mui";
import StorageHelper from "@/lib/storeHelper";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import UserTableSubscription from "./user-table-subscription";
import UserTablePaymentHistory from "./user-table-payment-history";

const offsetLazyload = 200;
type PropsType = {};


const useStyle = makeStyles()(() => {
    return (
      {
        containerTab: {
            borderBottom: '1px solid #dee2e6',
        },
        active: {
            cursor: 'pointer',
            borderRadius: '0.25rem !important',
            background: '#007bff !important',
            color: '#fff !important',
            // borderBottom: '2px solid #fff',
            fontWeight: 'bold',
            fontSize: '16px',
            height: `39px !important`,
        },
        activeMegreLayout: {
            cursor: 'pointer',
            color: '#00B27B !important',
            borderBottom: '2px solid #00B27B !important',
            fontSize: '16px',
            fontWeight: 'bold',
            height: `39px !important`,
        },
        navLink: {
            cursor: 'pointer',
            // borderBottom: '2px solid #d0d0d0',
            fontSize: '16px',
            height: `39px !important`,
        },
        tabContent: {
            '& .row.react-bootstrap-table-pagination': {
                marginLeft: '0',
                marginRight: '0'
            }
        }
      }
    );
});
export default function SubscriptionPageRender(props: PropsType) {
  
    const t = useTranslations("");
    const dispatch = useAppDispatch();
    const router = useRouter();
    const mounted = useMounted();
    const { classes } = useStyle();

    const { below768, getBelow768 } = useResponsive();
    const currentDomain = useAppSelector(getCompanyDomain);
    const servicePath = useAppSelector(getServicePath) || '';
    const isAuthen = !!useAppSelector(getIsAuthenticated);
    const layoutViewPage = useAppSelector(getLayoutViewPage);
    const marginPage = useAppSelector(getPageMargin);
    const isMobileApp = useAppSelector(getIsMobileApp);

    const isMegreLayout = layoutViewPage === LAYOUT_SETTING.HOME_LAYOUT_AND_SEARCH_LAYOUT.id;
    const userStore = !servicePath || servicePath === '' ? currentDomain : servicePath;
    const isToken = StorageHelper.getCookie(userStore);

    const tabOptions = [
        {
            id: '1',
            title: t('label.subscription')
        },
        {
            id: '2',
            title: t('label.paymentHistory')
        }
    ]

  
    useEffect(() => {
        if ((!isToken && !isAuthen) || isMobileApp) {
            router.push(`${servicePath ? '/'+servicePath : ''}/`);
        }
    }, [isAuthen, isToken, isMobileApp]);

    const [activeTab, setActiveTab] = useState<string>('1');
    const toggle = (tab: string) => {
        if (activeTab !== tab) setActiveTab(tab);
    };
    

    if (!mounted) {
        return null;
    } 
  
  
    if (isMegreLayout) {
        return (
            <div style={{
                width: '100%',
                minHeight: below768 ? '72vh' : '70.2vh',
                backgroundColor: 'white',
                padding: isMegreLayout ? '' : '16px 20.8px'
            }}>
                <Tabs
                    // style={{ borderBottom: 0, width: '100%' }}
                    className="mb-3 pt-5" 
                    style={{ justifyContent: below768 ? 'center' : 'flex-start', marginLeft: below768 ? '10px' : marginPage.left ? marginPage.left + 15 : '0px', marginRight: below768 ? '10px' : marginPage.right ? marginPage.right : '0px' }}
                    value={activeTab}
                    variant="scrollable"
                    indicatorColor="none"
                >
                    {
                        tabOptions.map(tab => {
                            return (
                                <Tab
                                    label={tab.title}
                                    className={activeTab === tab.id ? classes.activeMegreLayout : classes.navLink}
                                    style={{
                                        width: below768 ? '50%' : 'auto',
                                        textAlign: below768 ? 'center' : 'left',
                                        color: ''
                                    }}
                                    // style={{ margin: '5px 2px 0 2px', cursor: 'pointer', padding: '2px 1px', minWidth: '150px' }}
                                    key={`tab-${tab.id}`}
                                    value={tab.id}
                                    onClick={() => toggle(tab.id)}
                                />
                            );
                        })
                    }
                </Tabs>

                <div className={classes.tabContent}>
                    {
                        activeTab === '1' &&
                        <UserTableSubscription isMegreLayout={isMegreLayout} />
                    }
                    {
                        activeTab === '2' &&
                        <UserTablePaymentHistory />
                    }
                </div>
            </div>
        );
    } else {
        return (
            <div className="card">
                <div className="card-body">
                    <Tabs
                        // style={{ borderBottom: 0, width: '100%' }}
                        className={`${classes.containerTab} mb-3 pt-5`}
                        
                        style={{
                            justifyContent: below768 ? 'center' : 'flex-start',
                        }}
                        value={activeTab}
                        variant="scrollable"
                        indicatorColor="none"
                    >
                        {
                            tabOptions.map(tab => {
                                return (
                                    <Tab
                                        label={tab.title}
                                        sx={{
                                            textTransform: 'none',
                                            fontSize: 14,
                                            minHeight: 40
                                        }}
                                        className={activeTab === tab.id ? classes.active : classes.navLink}
                                        style={{
                                            width: below768 ? '50%' : 'auto',
                                            textAlign: below768 ? 'center' : 'left',
                                            color: activeTab === tab.id ? '#fff' : ''
                                        }}
                                        // style={{ margin: '5px 2px 0 2px', cursor: 'pointer', padding: '2px 1px', minWidth: '150px' }}
                                        key={`tab-${tab.id}`}
                                        value={tab.id}
                                        onClick={() => toggle(tab.id)}
                                    />
                                );
                            })
                        }
                    </Tabs>
                    <div className={classes.tabContent}>
                        {
                            activeTab === '1' &&
                            <UserTableSubscription isMegreLayout={isMegreLayout} />
                        }
                        {
                            activeTab === '2' &&
                            <UserTablePaymentHistory />
                        }
                    </div>
                </div>
            </div>
        );
    }

}