"use client"

import { ServiceViewSettings } from "@/types/serviceAdmin";
import { makeStyles } from "tss-react/mui";
import { useTranslations } from "next-intl";
import useResponsive from "@/hooks/useResponsive";
import { useRouter } from "next/navigation";
import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
import { PAGINATION } from "@/lib/appConstant";
import { getServicePath, getViewSettings } from "@/lib/redux/features/serviceAdmin";
import { useEffect, useState } from "react";
import { fetchNotificationsPublicPage, getNotificationsList, getQueriesNotifications } from "@/lib/redux/features/notifications";
import CustomPagination from "../ui/custom-pagination";
import moment from "moment";
import AppSelect from "../ui/select";

type PropsType = { viewSettings?: ServiceViewSettings };

const useStyle = makeStyles<{below768?: boolean}>()((theme, { below768 }) => (
    {
      header: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '1rem 0',
        borderBottom: '2px solid #d0d0d0',
        fontSize: '18px'
      },
      titleNotifications: {
        // background: '#e2e2e2',
        color: '#707070',
        padding: '0.5rem 1rem',
        width: '100%'
        // border: '1px solid #fff'
      },
      itemNotifications: {
        borderBottom: '2px solid #d0d0d0'
      },
      customCSS: {
        color: '#707070',
        fontWeight: 700,
        fontSize: below768 ? '12px' : '16px'
      },
      textInfo: {
        padding: '0 1rem 0.5rem 1rem'
      },
      textInfoCreatedDate: {
        padding: '0 1rem 0.5rem 1rem',
        color: '#999999'
      },
      newInfo: {
        margin: '1.4rem 0',
        width: '100%'
      },
      selectNumItem: {
        marginBottom: 10
      }
    }
));

const optionNumItem = [
  { value: 5, label: '5' },
  { value: 10, label: '10' },
  { value: 15, label: '15' },
  { value: 20, label: '20' },
  { value: 25, label: '25' },
  { value: 30, label: '30' }
];
export default function NotificationsPageRender(props: PropsType) {
    const t = useTranslations("");
    const dispatch = useAppDispatch();
    const router = useRouter();
    const { below768, getBelow768 } = useResponsive();
    
    const viewSettings = useAppSelector(getViewSettings);
    const servicePath = useAppSelector(getServicePath);
    const queries = useAppSelector(getQueriesNotifications);
    const notificationsList: any[] = useAppSelector(getNotificationsList);
    
    const [pageSize, setPageSize] = useState(PAGINATION.size);
    
    // const isMegreLayout = layoutViewPage === LAYOUT_SETTING.HOME_LAYOUT_AND_SEARCH_LAYOUT.id;

    const { classes } = useStyle({ below768 });

    const renderNotifications = (item, index) => {
        const { title, body, createdDate } = item;
        // eslint-disable-next-line no-unused-vars
        return (
        <div key={`render-notifications-page-${index}`} className={classes.itemNotifications}>
          <div className={`${classes.titleNotifications} ${classes.customCSS}`}>
            {title}
          </div>
          <div className={`${classes.textInfo}`}>
            {body}
          </div>
          <div className={`${classes.textInfoCreatedDate}`}>
            { moment(createdDate).format('yyyy/MM/DD') }
          </div>
        </div>
        );
    };

    const onChangePage = (page?: number) => {
        dispatch(fetchNotificationsPublicPage({ page, size: pageSize }));
    };

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

    useEffect(() => {
        dispatch(fetchNotificationsPublicPage({ page: 1, size: pageSize }));
    }, [pageSize]);
    return (
        <div className={classes.newInfo}>
            {
                notificationsList && notificationsList.length > 0 &&
                <>
                    <div className={`${classes.header} ${classes.customCSS}`} >
                        <div className='text-left'>{t('title.notifications')}</div>
                    </div>
                    {notificationsList.map((item, index) => renderNotifications(item, index))}
                </>
            }
            <div className="flex items-center " style={{ margin: '2rem 0.5rem', flexDirection: below768 ? 'column' : 'row' }}>
                <div style={{ width: 72 }} className="mb-[0.5rem]">
                  <AppSelect
                      allowClear
                      value={pageSize}
                      onChange={(value) => {
                          console.log('value: ', value);
                          
                          setPageSize(value);
                      }}
                      options={optionNumItem}
                      virtual={true}
                      listHeight={250}
                  />
                </div>
                <div style={{ flex: '1 0 0px' }}>
                  <CustomPagination
                      style={{ marginBottom: 0 }}
                      page={queries.page}
                      totalPages={queries.totalPages}
                      onChangePage={onChangePage}
                  />
                </div>
            </div>
        </div>
    );

}