"use client";
import React, { useState } from "react";
import AppDropdown from "@/components/ui/dropdown";
import AppTypography from "@/components/ui/typography";
import { useTranslations } from "next-intl";
import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
import {
  clearAuthInfo,
  doLogout,
  getAuthInfo,
  getIsMobileApp,
} from "@/lib/redux/features/auth";
import { LogoutResponse } from "@/types/auth";
import { ResponseStatus, STORAGE_KEYS } from "@/types/common";
import StorageHelper from "@/lib/storeHelper";
import { LogOut, UserRound, UserPlus, LogIn, CircleUserRound, GalleryVerticalEnd } from "lucide-react";
// import { clearUserDetail } from "@/lib/redux/features/user";
import { useMounted } from "@/hooks/useMounted";
import { APP_URL, BANNER_TYPE, IMAGE_PATH, LAYOUT_SETTING, mainColorMegreLayout, OPTION_LOGIN } from "@/lib/appConstant";
import { getBannerSetting, getHeaderSetting, getLayoutSettingAll, getLayoutViewPage, getPageLogo, getPageMargin, getPageTitle, getServicePath, getShowSubscriptionStatus, getViewSettings } from "@/lib/redux/features/serviceAdmin";
import { makeStyles } from 'tss-react/mui';
import { HeaderResponse } from "@/types/serviceAdmin";
import useResponsive from "@/hooks/useResponsive";
import Box from "@mui/material/Box";
import LoginModal from "../modal/login-modal";
import LoginForm from "../auth/form/login-form";
import { getShowBanner, getShowHeader } from "@/lib/redux/features/layout";
import { useRouter } from "next/navigation";

type PropsType = {
  // isNotShowBanner?: boolean;
  isContentDetail?: boolean;
  contentId?: any;
}

const mobileCheck = () => {
  let check = false;
  (function (a) {
    if (
      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
        a
      ) ||
      /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
        a.substr(0, 4)
      )
    ) {
      check = true;
    }
  })((navigator.userAgent || navigator.vendor || window.opera));
  return check;
}

type MakeStylesType = {
  below768: boolean;
  style: any;
  headerSettings: any;
  bannerSetting: any;
}

const useStyle = makeStyles<MakeStylesType>()((theme, { below768, style, headerSettings, bannerSetting }) => {
 
  return ({
    container: {
      width: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-start',
      flexWrap: 'nowrap',
      padding: 0
    },
    header: {
      backgroundColor: `${style.backgroundColor}!important`,
      color: style.color || '#d0d0d0',
      padding: below768 ? 0 : '30px 1.3rem',
      display: below768 ? 'block' : 'flex',
      '& .nav-link': {
        color: `${style.color || '#d0d0d0'}!important`,
        whiteSpace: 'unset',
        wordBreak: 'break-word',
        wordWrap: 'break-word'
      }
    },
    headerItem: {
      position: 'relative',
      display: 'flex',
      flexFlow: 'column nowrap',
      whiteSpace: 'nowrap',
      alignItems: 'center',
      padding: '0 0.5rem',
      color: headerSettings.color ? headerSettings.color : '#d0d0d0',
      cursor: 'pointer'
    },
    headerItem2: {
      display: 'flex',
      flexFlow: 'column nowrap',
      whiteSpace: 'nowrap',
      alignItems: 'center',
      padding: '0 0.5rem',
      color: headerSettings.color ? headerSettings.color : '#d0d0d0',
      cursor: 'pointer',
      flexDirection: 'row'
    },
    headerItem3: {
      position: 'relative',
      display: 'flex',
      textAlign: 'center',
      alignItems: 'center',
      padding: '0 0.5rem',
      color: headerSettings.color ? headerSettings.color : '#d0d0d0',
      cursor: 'pointer'
    },
    logo: {
      width: 'auto',
      height: '100%',
      minHeight: below768 ? 'unset' : '60px',
      maxWidth: below768 ? '70px' : 'unset',
      maxHeight: '70px',
      objectFit: 'contain'
    },
    logoBox: {
      flexGrow: 1,
      display: 'flex',
      alignItems: 'center',
      flexFlow: 'wrap',
      width: '100%',
      '&::after': below768 ? {} : {
        marginLeft: '1rem',
        marginRight: '1rem',
        borderTop: '4px dotted #ebebeb',
        content: `""`,
        flexGrow: 1
      }
    },
    dropdownToggle: {
      '&::after': {
        marginLeft: '1rem',
        marginRight: '1rem',
        borderTop: '4px dotted #ebebeb',
        // content: ''
      }
    },
    pageTitle: {
      margin: '0 1rem!important',
      padding: 0,
      color: `${style.color || '#fff'}!important`,
      whiteSpace: 'inherit',
      wordBreak: 'break-word',
      wordWrap: 'break-word'
    },
    bannerBox: {
      height: below768 ? bannerSetting.heightBanner * 0.6 : bannerSetting.heightBanner,
      backgroundColor: bannerSetting.backgroundColor,
      color: bannerSetting.textColor,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: below768 ? bannerSetting.fontSize * 0.6 : bannerSetting.fontSize,
      cursor: 'pointer',
      '& img': {
        objectFit: 'contain',
        height: '100%',
        width: '100%'
      },
      wordBreak: 'break-word',
      textAlign: 'center',
      padding: bannerSetting.typeBanner === 1 ? '0px 10px 0px 10px' : ''
    },
    accountCircleActive: {
      color: '#00B27B'
    },
    iconUserCircle: {
      fontSize: 25
    },
    userName: {
      marginBottom: '3px',
      height: below768 ? '25px' : ''
    },
    navbarMenu: {
      '& .dropdown-menu': {
        position: 'absolute'
      }
    }
  })
});

const HeaderSearchLayout = (props: PropsType) => {
  const {  isContentDetail, contentId } = props;
  const t = useTranslations("");
  const router = useRouter();
  const mounted = useMounted();
  const dispatch = useAppDispatch();

  const authInfo = useAppSelector(getAuthInfo);
  const viewSettings = useAppSelector(getViewSettings);
  const layoutViewPage = useAppSelector(getLayoutViewPage);
  const servicePath = useAppSelector(getServicePath);
  const bannerSetting = useAppSelector(getBannerSetting);
  const pageMargin = useAppSelector(getPageMargin);
  const isMobileApp = useAppSelector(getIsMobileApp);
  const layoutSettingAll = useAppSelector(getLayoutSettingAll);
  const pageLogo = useAppSelector(getPageLogo);
  const pageTitle = useAppSelector(getPageTitle);
  const showHeader = useAppSelector(getShowHeader);



  const [isOpenProfile, setIsOpenProfile] = useState(false);

  const style = useAppSelector(getHeaderSetting);
  const showSubscriptionStatus = useAppSelector(getShowSubscriptionStatus);

  

  const { below768 } = useResponsive();
  const isOpenType = viewSettings.accountType === OPTION_LOGIN.OPEN_TYPE;
  const urlUpload = process.env.NEXT_PUBLIC_UPLOAD_PATH + '/';

  const { header: headerSettings = {} as HeaderResponse } = viewSettings;
  const [showLoginFormModal, setShowLoginFormModal] = useState(false);


  const homeUrl = window.location.origin + '/' + servicePath;






  const { classes } = useStyle({ below768, style, headerSettings, bannerSetting });

  const handleLogoClick = () => {
    router.push(`${servicePath ? '/'+servicePath : ''}`);
  };

  const getUserDisplayName = () => {
    if (!mounted || !authInfo) return "";
    // if (!authInfo?.firstName && !authInfo?.lastName) return authInfo?.email;
    return authInfo.name ? authInfo.name : authInfo.fullName;
  };

  const handleRenderDropdown = (menu: any) => {
    const menuStyle = {
      boxShadow: "none",
    };
    return (
      <div className="bg-white rounded-lg shadow" style={{ minWidth: '10rem' }}>
        <div className="p-2">
          {React.cloneElement(menu, { style: menuStyle })}
        </div>
      </div>
    );
  };

  const handleLogout = async () => {
    const result = await dispatch(doLogout());
    const payload = result?.payload as LogoutResponse;
    if (payload && payload.status === ResponseStatus.SUCCESS) {
      dispatch(clearAuthInfo());
      // dispatch(clearUserDetail());
      // StorageHelper.removeCookie(STORAGE_KEYS.token,  { path: servicePath || '/' });
      StorageHelper.removeLocalItem(STORAGE_KEYS.user);
      router.push(`${servicePath ? '/'+servicePath : ''}/login`);
    }
  };

  const handleLoginFormSubmit = async (data: any, authenType: any) => {
    // setShowLoginFormModal(false);
    // let request;
    // if (authenType === AUTHEN_TYPES.EMAIL) {
    //   request = {
    //     password: md5(data.password),
    //     rememberMe: data.rememberMe,
    //     email: data.email,
    //     loginType: AUTHEN_TYPES.EMAIL,
    //     loginRole: USER_CONFIG.USER.loginType,
    //     path: data.path
    //   };
    // } else if (authenType === AUTHEN_TYPES.GOOGLE_LOGIN) {
    //   request = data;
    // } else {
    //   const userTrace = await Util.getUserTrace();
    //   const ip = userTrace.ip;
    //   request = {
    //     ip: ip,
    //     loginType: AUTHEN_TYPES.IP
    //   };
    // }
    // login(request);
  };
  const handleClickLogin = () => {
    if (viewSettings.accountType !== OPTION_LOGIN.GAKKEN_ID) {
      setShowLoginFormModal(true);
    } else {
      router.push(`${servicePath ? '/'+servicePath : ''}/login`);
    }
  }

  const renderMenu = [
    {
      key: "profile",
      label: (
        <AppTypography className="text-neutral-600">
          {t("label.profile")}
        </AppTypography>
      ),
      icon: <UserRound size={20} />,
      onClick: () => {
        router.push(`${servicePath ? '/'+servicePath : ''}/profile`);
      },
    },
    {
      key: "subscription",
      label: (
        <AppTypography className="text-neutral-600">
          {t("label.subscription")}
        </AppTypography>
      ),
      icon: <GalleryVerticalEnd size={20} />,
      onClick: () => {
        router.push(`${servicePath ? '/'+servicePath : ''}/subscription`);
      },
    },
    {
      key: "logout",
      label: (
        <AppTypography className="text-neutral-600">
          {t("label.logout")}
        </AppTypography>
      ),
      icon: <LogOut size={20} />,
      onClick: () => {
        handleLogout();
      },
    },
  ];

  if (!showHeader) {
    return null;
  }

  return (
    <>
      <header>
        <div className={classes.header}>
          <div className={classes.container}>
            <div className={classes.logoBox} >
              <a onClick={() => router.push(`${servicePath ? '/'+servicePath : ''}/`)}>
                {
                  pageLogo && pageLogo !== '' && pageLogo !== 'null' &&
                  <img className={`pr-1 ${classes.logo}`} width="40px" src={`${urlUpload}${IMAGE_PATH.LOGO}${pageLogo}`} />
                }
              </a>
              {
                pageTitle &&
                 pageTitle &&
                <div className={classes.pageTitle} onClick={() => router.push(homeUrl)}>
                  {pageTitle}
                </div>
              }
            </div>
            {
              !(isOpenType || isMobileApp) && (
                !!authInfo
                  ? (
                    <div style={{ flexGrow: 'unset', display: 'flex', minWidth: 100 }}>
                      <AppDropdown
                        overlayClassName="manage-account-dropdown"
                        menu={{ items: renderMenu }}
                        trigger={["click"]}
                        dropdownRender={(menu) => handleRenderDropdown(menu)}
                      >
                        <div className={classes.headerItem2}>
                          <AppTypography className="block !text-neutral-600 text-lg font-semibold max-w-[200px] text-nowrap overflow-hidden text-ellipsis">
                            <CircleUserRound className={`cursor-pointer w-full text-center color-[${mainColorMegreLayout}]`}/>
                            <div>{getUserDisplayName()}</div>
                          </AppTypography>
                        </div>
                      </AppDropdown>
                    </div>
                  )
                  : <div className="flex justify-center items-center gap-2">
                    <div className={classes.headerItem} onClick={() => router.push(`${servicePath ? '/'+servicePath : ''}/register`)}>
                      <AppTypography className="block !text-neutral-600 text-lg font-semibold max-w-[160px] text-nowrap overflow-hidden text-ellipsis">
                        <UserPlus className="w-full text-center"/>
                        <div>{t('menu.registerUser')}</div>
                      </AppTypography>
                    </div>
                    <div
                      className={classes.headerItem} 
                      onClick={handleClickLogin}
                    >
                      <AppTypography className="block !text-neutral-600 text-lg font-semibold max-w-[160px] text-nowrap overflow-hidden text-ellipsis">
                        <LogIn className="w-full text-center"/>
                        <div>{t('menu.login')}</div>
                      </AppTypography>
                    </div>
                  </div>
              )
            }
          </div>
        </div>


        <LoginModal
          isOpen={showLoginFormModal}
          toggle={() => setShowLoginFormModal(false)}
          size="middle"
          // backdrop={'static'}
          className="mx-4 my-4"
        >
          <div className="mx-4 my-4 pl-5 pr-5">
            <LoginForm notChangeRouter={true} handleSuccess={() => setShowLoginFormModal(false)}/>
          </div>
        </LoginModal>
      </header>
      
    </>
  );
};

export default HeaderSearchLayout;