"use client"
import React from 'react';

import { makeStyles } from 'tss-react/mui';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import useResponsive from '@/hooks/useResponsive';
import { IMAGE_PATH, LAYOUT_SETTING, LINK_POSITION, LINK_TYPE, POSITION_LINK_FOOTER } from '@/lib/appConstant';
import { useAppSelector } from '@/lib/redux/hooks';
import { getFooterSetting, getServicePath } from '@/lib/redux/features/serviceAdmin';
import { sortByOrdinalNumber } from '@/lib/utils';
import { FooterLinkResponse } from '@/types/serviceAdmin';
import Link from 'next/link';
import { getShowFooter } from '@/lib/redux/features/layout';
import { useRouter } from 'next/navigation';

type PropsType = {
  pageLogo: any;
  layoutViewPage: any;
  pageMargin: any;
  footerSetting: FooterLinkResponse
}

type MakeStylesType = {
  below768: boolean;
  footerSetting: any;
  pageMargin: any;
  positionLinkFooter: 'left' | 'center' | 'right';
};
const useStyle = makeStyles<MakeStylesType>()((theme, { below768, footerSetting, pageMargin, positionLinkFooter }) => {
  return (
    {
      setting: {
        padding: '0 1.3rem',
        backgroundColor: footerSetting.backgroundColor,
        color: footerSetting.color,
        fontWeight: 700
      },
      links: {
        display: 'flex',
        justifyContent: 'flex-end',
        margin: '0.8rem 0',
        '& .footer-item': {
          color: footerSetting.color || '#007bff',
          flexGrow: 1,
          textAlign: positionLinkFooter,
          fontSize: `${footerSetting.fontSize}` || '0.8rem',
          // maxWidth: '200px',
          wordBreak: 'break-word'
        },
        '& .footer-item a': {
          cursor: 'pointer'
        },
        '& .footer-item a:hover': {
          color: footerSetting.color || '#007bff',
          textDecoration: 'underline!important'
        }
      },
      small: {
        fontSize: `${footerSetting.fontSize}px !important` || '0.8rem',
        wordBreak: 'break-all'
      },
      logoAndCoperight: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column'
      },
      logoBox: {
        display: 'flex',
        alignItems: 'center'
      },
      logo: {
        width: 'auto',
        height: '100%',
        minHeight: below768 ? 'unset' : '60px',
        maxWidth: below768 ? '70px' : 'unset',
        maxHeight: '70px',
        objectFit: 'contain'
      },
      containerFooterLayout3: {
        marginLeft: `${!below768 ? pageMargin.left : '0'}px`,
        marginRight: `${!below768 ? pageMargin.right : '0'}px`
        // padding: '0 1.3rem'
      }
    }
  );
});

const AppFooter = (props: PropsType) => {
  const { pageLogo, layoutViewPage, pageMargin, footerSetting } = props;
  const router = useRouter();
  const { below768 } = useResponsive();
  const servicePath = useAppSelector(getServicePath);
  const showFooter = useAppSelector(getShowFooter);

  const upperLinks = footerSetting.links ? sortByOrdinalNumber(footerSetting.links.filter(item => item.positionLink === LINK_POSITION.UPPER_LINK)) : [];
  const lowerLinks = footerSetting.links ? sortByOrdinalNumber(footerSetting.links.filter(item => item.positionLink === LINK_POSITION.LOWER_LINK)) : [];
  const middleLinks = footerSetting.links ? sortByOrdinalNumber(footerSetting.links.filter(item => item.positionLink === LINK_POSITION.MIDDLE_LINK)) : [];
  const isMegreLayout = layoutViewPage === LAYOUT_SETTING.HOME_LAYOUT_AND_SEARCH_LAYOUT.id;
  const urlUpload = process.env.NEXT_PUBLIC_UPLOAD_PATH + '/';

  const getPositionLinkFooter = (): 'left' | 'center' | 'right' => {
    switch (footerSetting.horizontalLinkPosition) {
      case POSITION_LINK_FOOTER.LEFT:
        return 'left';
      case POSITION_LINK_FOOTER.CENTER:
        return 'center';
      case POSITION_LINK_FOOTER.RIGHT:
        return 'right';
      default:
        return 'left';
    }
  };

  const { classes } = useStyle({ below768, footerSetting, pageMargin, positionLinkFooter: getPositionLinkFooter() });

  if (!showFooter) {
    return null;
  }

  return (
    <footer className={`footer mt-auto py-3 flex-shrink-0 ${classes.setting}`}>
      <div className={isMegreLayout ? classes.containerFooterLayout3 : ''}>
        <Grid container>
          {/* Logo */}
          {
            pageLogo && pageLogo !== '' && pageLogo !== 'null' &&
            <Grid item xs={4} sm={3} md={2} className={`${classes.logoAndCoperight}`}>
              <Box className={classes.logoBox}>
                <div onClick={() => router.push(`${servicePath ? '/'+servicePath : ''}/`)} >
                  <img className={`${classes.logo}`} width="40px" src={`${urlUpload}${IMAGE_PATH.LOGO}${pageLogo}`} />
                </div>
              </Box>
              <small className={classes.small}> {footerSetting.copyRight} </small>
            </Grid>
          }
          {/* Link */}
          <Grid item xs={8} sm={9} md={10} style={{ padding: '0 10px' }}>
            <div className="row">
              <div className={`col-sm-12 col-md-12 ${classes.links}`}>
                {
                  upperLinks && upperLinks.map((item, index) => (
                    item.typeLink === LINK_TYPE.EXTERNAL_LINK
                      ? <div key={`upper-external-link-${index}`} className="footer-item" style={{ width: `${100 / middleLinks.length}%` }}>
                        <a
                          href={item.url} 
                          // onClick={() => window.open(item.url)}
                        >
                          {item.label}
                        </a>
                      </div>
                      : <div key={`upper-internal-link-${index}`} className="footer-item" style={{ width: `${100 / middleLinks.length}%` }}>
                        <div>
                          <Link href={`${servicePath ? '/'+servicePath : ''}/${item.url}`}>
                            {item.label}
                          </Link>
                        </div>
                      </div>
                  ))
                }
              </div>
              <div className={`col-sm-12 col-md-12 ${classes.links}`}>
                {
                  middleLinks && middleLinks.map((item, index) => (
                    item.typeLink === LINK_TYPE.EXTERNAL_LINK
                      ? <div key={`middle-external-link-${index}`} className="footer-item" style={{ width: `${100 / middleLinks.length}%` }}>
                        <a
                          href={item.url}
                          // onClick={() => window.open(item.url)}
                        >
                          {item.label}
                        </a>
                      </div>
                      : <div key={`middle-internal-link-${index}`} className="footer-item" style={{ width: `${100 / middleLinks.length}%` }}>
                        <div>
                          <Link href={`${servicePath ? '/'+servicePath : ''}/${item.url}`}>
                            {item.label}
                          </Link>
                        </div>
                      </div>
                  ))
                }
              </div>
              <div className={`col-sm-12 col-md-12 ${classes.links}`}>
                {
                  lowerLinks && lowerLinks.map((item, index) => (
                    item.typeLink === LINK_TYPE.EXTERNAL_LINK
                      ? <div key={`lower-external-link-${index}`} className="footer-item" style={{ width: `${100 / lowerLinks.length}%` }}>
                        <a onClick={() => window.open(item.url)}>
                          {item.label}
                        </a>
                      </div>
                      : <div key={`lower-internal-link-${index}`} className="footer-item" style={{ width: `${100 / lowerLinks.length}%` }}>
                        <div >
                          <Link href={`${servicePath ? '/'+servicePath : ''}/${item.url}`}>
                            {item.label}
                          </Link>
                        </div>
                      </div>
                  ))
                }
              </div>
              {
                (!pageLogo || pageLogo === '' || pageLogo === 'null') &&
                <div className="col-sm-12 col-md-12 text-center" >
                  <small className={classes.small}> {footerSetting.copyRight} </small>
                </div>
              }
            </div>
          </Grid>
        </Grid>
        
      </div>
      {/* {`<ScrollTopButton />`} */}
    </footer>
  );
};

export default AppFooter;