"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, BookOpenText, UserPlus, LogIn, Menu, CircleUserRound, GalleryVerticalEnd, Search } from "lucide-react";
// import { clearUserDetail } from "@/lib/redux/features/user";
import { useMounted } from "@/hooks/useMounted";
import { APP_URL, BANNER_TYPE, DOMAIN_TYPE, IMAGE_PATH, LAYOUT_SETTING, mainColorMegreLayout, OPTION_LOGIN } from "@/lib/appConstant";
import { getBannerSetting, getLayoutSettingAll, getLayoutViewPage, getPageLogo, getPageMargin, getPageTitle, getServicePath, getViewSettings } from "@/lib/redux/features/serviceAdmin";
import { makeStyles } from 'tss-react/mui';
import { HeaderResponse } from "@/types/serviceAdmin";
import SearchOutlined from "@ant-design/icons/SearchOutlined";
import useResponsive from "@/hooks/useResponsive";
import Box from "@mui/material/Box";
import { getShowBanner, getShowHeader, onToggleSidebar } from "@/lib/redux/features/layout";
import { useRouter } from "next/navigation";
import CarouselHeader from "@/components/ui/carousel-header";
import ButtonIconSearch from "@/components/ui/button/button-icon-search";
import LoginModal from "@/components/modal/login-modal";
import LoginForm from "@/components/auth/form/login-form";

const WIDTH_SLIDE = 948;

type PropsType = {
  // isNotShowBanner?: boolean;
  isContentDetail?: boolean;
  showSidebar?: 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;
  bannerSetting: any;
  headerSettings: any;
  pageMargin: {left: any; right: any};
};

const useStyle = makeStyles<MakeStylesType>()((
  theme, { bannerSetting, headerSettings, pageMargin, below768 }
) => {
  var bannerHeight = 40;

  if (bannerSetting.typeBanner === BANNER_TYPE.SLIDE) {
    const bannerDesktop = bannerSetting.heightBanner ? bannerSetting.heightBanner : 329;
    const bannerMobile = bannerSetting.mobileBannerHeight ? bannerSetting.mobileBannerHeight : 256;
    bannerHeight = below768 ? mobileCheck() ? bannerMobile : bannerDesktop : bannerDesktop;
  }

  bannerHeight = below768 ? mobileCheck() ? bannerSetting.mobileBannerHeight : bannerSetting.heightBanner : bannerSetting.heightBanner;

  return ({
    container: {
      background: "#ffffff",
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      width: "100%",
      top: 0,
      zIndex: 1,
      color: headerSettings.color || '#d0d0d0',
      // padding: '16px 20.8px',
      height: below768 ? '80px' : 'unset',
    },
    header: {
      flexWrap: 'nowrap',
      backgroundColor: `${headerSettings.backgroundColor}!important`,
      width: '100%',
      '& .dropdown-toggle:after': {
        display: 'none'
      },
      '& .nav-link': {
        color: `${headerSettings.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 || '#d0d0d0',
      cursor: 'pointer'
    },
    headerItem2: {
      display: 'flex',
      flexFlow: 'column nowrap',
      whiteSpace: 'nowrap',
      alignItems: 'center',
      padding: '0 0.5rem',
      color: headerSettings.color || '#d0d0d0',
      cursor: 'pointer',
      flexDirection: 'row'
    },
    headerItem3: {
      position: 'relative',
      display: 'flex',
      textAlign: 'center',
      alignItems: 'center',
      padding: '0 0.5rem',
      color: headerSettings.color || '#d0d0d0',
      cursor: 'pointer'
    },
    logo: {
      width: 'auto',
      height: '100%',
      minHeight: below768 ? 'unset' : '60px',
      maxWidth: below768 ? '70px' : 'unset',
      maxHeight: '70px',
      objectFit: 'contain'
    },
    logoBox: {
      display: 'flex',
      alignItems: 'center'
    },
    pageTitle: {
      margin: '0 10px!important',
      padding: 0,
      color: `${headerSettings.color || '#fff'}!important`,
      wordBreak: 'break-word',
      wordWrap: 'break-word',
      maxWidth: below768 ? 'calc(100vw - 170px)' : 'calc(100vw - 470px)',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      fontSize: '1.25rem',
      '&:hover': {
        textDecoration: 'none'
      }
    },
    wrapControl: {
      display: 'flex',
      justifyContent: 'flex-end',
      alignItems: 'center'
    },
    bannerBox: {
      height: bannerHeight,
      backgroundColor: bannerSetting.backgroundColor,
      color: bannerSetting.textColor || '#000',
      // display: 'flex',
      // justifyContent: 'center',
      // alignItems: 'center',
      fontSize: below768 ? bannerSetting.fontSize * 0.6 : bannerSetting.fontSize,
      cursor: 'pointer',
      '& img': {
        objectFit: bannerSetting.typeBanner === BANNER_TYPE.SLIDE ? 'none' : 'contain',
        height: '100%',
        width: '100%'
      },
      wordBreak: 'break-word',
      textAlign: 'center',
      padding: bannerSetting.typeBanner === 1 ? '0px 10px 0px 10px' : ''
    },
    layout3: {
      paddingLeft: `${!below768 ? pageMargin.left : '0'}px`,
      paddingRight: `${!below768 ? pageMargin.right : '0'}px`
    },
    accountCircleActive: {
      color: '#00B27B'
    },
    iconUserCircle: {
      fontSize: 25
    },
    userName: {
      maxWidth: 'calc(100% - 30px)',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      marginBottom: 4
    },
    containerSlideItem: {
      width: '100%',
      height: bannerHeight,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    },
    slideItem: {
      width: WIDTH_SLIDE,
      // minWidth: 50,
      height: bannerHeight
    },
    imgCarouselItem: {
      width: '100%',
      height: bannerHeight,
      borderRadius: '9px'
    },
    iconMenu: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center'
    },
    fullWidth: {
      width: '100%'
    },
    customCarouse: {
      '& .carousel .control-dots': {
        // zIndex: bannerHeight <= 60 ? -1 : 1
        margin: bannerHeight <= 60 ? below768 ? '0' : '-5px 0' : '10px 0'
      }
    }
  })
});

const HeaderMegreLayout = (props: PropsType) => {
  const {  isContentDetail, showSidebar, 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 isShowBanner = useAppSelector(getShowBanner);
  const showHeader = useAppSelector(getShowHeader);
  

  const { below768, getBelow768 } = 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 { accountType } = viewSettings;
  const { classes } = useStyle({ bannerSetting, headerSettings, pageMargin, below768 });

  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 registerGakkenUser = async () => {
    const isFullDomain = viewSettings.domainType === DOMAIN_TYPE.FULL_DOMAIN;
    const redirectUrl = isFullDomain ? `${window.location.origin}/login` : `${window.location.origin}/${servicePath}/login`;
    const gakkenUrl = `${process.env.NEXT_PUBLIC_GAKKEN_LINK}/user-register-1?response_type=code&client_id=${viewSettings.gakkenServiceCode}&redirect_uri=${redirectUrl}`;
    window?.location && window.location.replace(gakkenUrl);
  };

  const handleClickRegister = async () => {
    if (accountType === OPTION_LOGIN.GAKKEN_ID) {
      registerGakkenUser();
    } else {
      router.push(`${servicePath ? '/'+servicePath : ''}/register`);
    }
  }
  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 openLinkBanner = () => {
    if (bannerSetting.link && bannerSetting.link !== '') {
      window.open(bannerSetting.link);
    }
  };

  const handleClickSlide = (slide: any) => {
    if (slide.bannerSlideLinkType === 'EXTERNAL_LINK') {
      if (slide.bannerSlideLink !== '') {
        window.open(slide.bannerSlideLink);
      }
    }
    if (slide.bannerSlideLinkType === 'INTERNAL_LINK') {
      if (slide.bannerSlideLink !== '') {
        router.push(`${servicePath ? '/'+servicePath : ''}/${slide.bannerSlideLink}`);
      }
    }
  };
  const renderCarouselItem = (list: any[]) => {
    let arr:any[] = [];
    for (let i = 0; i < list.length; i++) {
      const image = below768 ? list[i].mobileSlideImage : list[i].desktopSlideImage;
      if (!image || image === '') {
        continue;
      }
      const item = (
        <div className={classes.containerSlideItem} onClick={() => { handleClickSlide(list[i]) }}>
          <div className={classes.slideItem}>
            <img className={classes.imgCarouselItem} src={APP_URL.UPLOAD_PATH + '/' + IMAGE_PATH.BANNER + image} alt="slide" />
          </div>
        </div>
      );
      arr = [...arr, item];
    }
    return arr;
  };
  const RenderBanner = () => {
    if (
      !window.location.pathname.includes('profile') &&
      !window.location.pathname.includes('notifications') &&
      !window.location.pathname.includes('subscription') &&
      !window.location.pathname.includes('search') &&
      !window.location.pathname.includes('order-entry') &&
      !window.location.pathname.includes('gakken-payment') &&
      !window.location.pathname.includes('veritrans-payment') &&
      !window.location.pathname.includes('thank-you') &&
      !contentId
    ) {
      if (bannerSetting && bannerSetting.show) {
        switch (bannerSetting.typeBanner) {
          case BANNER_TYPE.MESSAGE:
            if (bannerSetting.message && bannerSetting.message !== '') {
              return <Box className={classes.bannerBox} onClick={() => openLinkBanner()}>
                {bannerSetting.message}
              </Box>;
            } else {
              return null;
            }
          case BANNER_TYPE.IMAGE:
            if (bannerSetting.image && bannerSetting.image !== '') {
              return <Box className={classes.bannerBox} onClick={() => openLinkBanner()}>
                <img src={`${APP_URL.UPLOAD_PATH}/${IMAGE_PATH.BANNER}${bannerSetting.image}`} alt="banner" />
              </Box>;
            } else {
              return null;
            }
          case BANNER_TYPE.SLIDE:
            if (bannerSetting.bannerImageResponseList && bannerSetting.bannerImageResponseList.length > 0) {
              return (
                <Box className={classes.bannerBox}>
                  <CarouselHeader items={renderCarouselItem(bannerSetting.bannerImageResponseList)} onChange={() => {}}/>
                </Box>);
            } else {
              return null;
            }
          default:
            return null;
        }
      }
    }
  };

  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 (
    <div className={`${classes.container} `}>
      <div  className={` ${classes.header} ${!below768 ? classes.layout3 : ''}`}>
        <div className="w-full flex justify-between items-center " style={{ padding: '16px 20.8px' }}>
          {/* Logo */}
          <Box display="flex" justifyContent="space-between" alignItems="center" flex="1 auto">
            <Box className={`${classes.logoBox} cursor-pointer`}>
              <div
                onClick={() => handleLogoClick()}>
                {
                  pageLogo && pageLogo !== '' && pageLogo !== 'null' &&
                  <img className={`${classes.logo}`} width="40px" src={`${urlUpload}${IMAGE_PATH.LOGO}${pageLogo}`} />
                }
              </div>
              {
                pageTitle && <div className={classes.pageTitle}>{pageTitle}</div>
              }
            </Box>
          </Box>
          {
            mounted &&
            <div className="flex justify-center items-center gap-2">
              {/* PC */}
              {
                !below768 &&
                <>
                  {
                    !isOpenType && !isMobileApp && !authInfo &&
                    <>
                      <div className={classes.headerItem} onClick={handleClickRegister}>
                        <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"/>
                        </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">
                          <div>{t('menu.login')}</div>
                        </AppTypography>
                      </div>
                    </>
                  }
                </>
              }
              {/* Mobile */}
              {
                below768 &&
                <>
                  
                </>
              }
              {/* Show Profile */}
              {
                !!authInfo &&
                <div>
                  <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>
              }
              {/* Show Icon Menu */}
              <div className={classes.headerItem2}>
                <AppTypography className="block !text-neutral-600 text-lg font-semibold max-w-[160px] text-nowrap overflow-hidden text-ellipsis">
                  {
                    layoutSettingAll.isFullScreenSearch
                      ? <ButtonIconSearch/>
                      : <div className={classes.iconMenu} onClick={() => router.push(`${servicePath ? '/'+servicePath : ''}/search`)}>
                        <div>
                          <div style={{ flexDirection: 'column' }} className='flex items-center justify-center'>
                            <Search/>
                          </div>
                        </div>
                        {/* <Menu/> */}
                      </div>
                  }
                </AppTypography>
              </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={() => {
              window && window.location.reload();
              setShowLoginFormModal(false)
            }}/>
          </div>
          {/* {`<LoginEndUserForm
            onCancel={() => setShowLoginFormModal(false)}
            onSubmit={handleLoginFormSubmit}
          />`} */}
        </LoginModal>
      </div>
      
      {
        isShowBanner &&
        <div style={{ display: 'block', width: '100%', overflow: 'hidden' }}>
          <RenderBanner/>
        </div>
      }
    </div>
  );
};

export default HeaderMegreLayout;