import React, { useEffect } from 'react';
import classNames from 'classnames';
import { makeStyles } from 'tss-react/mui';
import Box from '@mui/material/Box';
import Skeleton from '@mui/material/Skeleton';
import { useAppDispatch, useAppSelector } from '@/lib/redux/hooks';
import { useTranslations } from 'next-intl';
import { APP_URL, IMAGE_PATH } from '@/lib/appConstant';
import useResponsive from '@/hooks/useResponsive';
import { getLayoutSettingAll, getServicePath, getViewSettings } from '@/lib/redux/features/serviceAdmin';
import { getAuthInfo } from '@/lib/redux/features/auth';
import { getIsLoadingSubscriptions, getPaginationSubscription, getSubscriptionPage, loadSubscriptionPublicUserPage } from '@/lib/redux/features/subscription';
import { useRouter } from 'next/navigation';


type PropsType = {
  isMegreLayout: boolean;
}
type MakeStylesType = {
  below768?: boolean;
  subscriptionPlanBackground: any;
  subscriptionPlanText: any;
}

const useStyle = makeStyles<MakeStylesType>()((
  theme,
  { below768, subscriptionPlanBackground, subscriptionPlanText }
) => {
  return ({
    title: {
      padding: '0.5rem 1rem',
      fontWeight: 700,
      background: subscriptionPlanBackground || '#808080',
      color: subscriptionPlanText || '#fff',
      cursor: 'pointer',
      // borderLeft: '1px solid #d2d2d2',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center'
    },
    contents: {
      flex: '1 0 0px',
      display: 'flex',
      flexDirection: 'column',
      position: 'relative',
      maxWidth: 'calc(100%)',
      justifyContent: 'center',
      '& .react-multiple-carousel__arrow': {
        display: 'none'
      }
    },
    contentsRow: {
      maxWidth: '100%',
      display: 'flex',
      overflowX: 'auto',
      // border: '1px solid #d0d0d0',
      padding: '0.5rem 1rem',
      justifyContent: 'start'
    },
    contentWrap: {
      padding: '0.5rem',
      flex: '1 0 0px',
      minWidth: 164,
      maxWidth: 164,
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-start',
      alignItems: 'center',
      cursor: 'pointer',
      position: 'relative'
    },
    favoriteIcon: {
      width: '50%',
      height: '33%',
      position: 'absolute',
      top: 0,
      right: 0,
      color: '#F08828',
      fontSize: '1rem',
      borderRadius: '50%',
      justifyContent: 'flex-end',
      padding: below768 ? '4px' : '8px',
      margin: '0!important',
      display: 'flex',
      cursor: 'pointer',
      zIndex: 2,
      transition: 'all 0.3s ease-in-out',
      '&:hover': {
        transform: 'scale(1.2)'
      },
      '& .wrap-icon': {
        background: '#fff',
        borderRadius: '50%',
        border: '1.5px solid #999999',
        width: '28px',
        height: '28px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }
    },
    contentWrapScale: {
      margin: below768 ? '0.25rem' : '0.5rem',
      // flex: '0 0 20%',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      cursor: 'pointer',
      position: 'relative',
      minWidth: 200,
      ['@media (max-width:1120px)']: { // eslint-disable-line no-useless-computed-key
        flex: '0 0 25%',
        minWidth: below768 ? 120 : 170
      },
      ['@media (max-width:900px)']: { // eslint-disable-line no-useless-computed-key
        minWidth: below768 ? 120 : 150
      },
      '& .favoriteIcon': {
        margin: '0.5rem 0.5rem'
      }
    },
    contentImage: {
      textAlign: 'center',
      position: 'relative',
      overflow: 'hidden',
      border: '1px solid #d0d0d0',
      maxWidth: '100%',
      borderRadius: '12%',
      display: 'flex',
      justifyContent: 'center',
      // alignItems: 'center',
      height: 200,
      width: 200,
      ['@media (max-width:1120px)']: { // eslint-disable-line no-useless-computed-key
        height: below768 ? 120 : 170,
        width: below768 ? 120 : 170
      },
      ['@media (max-width:900px)']: { // eslint-disable-line no-useless-computed-key
        height: below768 ? 120 : 140,
        width: below768 ? 120 : 140
      }
    },
    contentTitle: {
      textAlign: 'center',
      wordBreak: 'break-word',
      wordWrap: 'break-word',
      width: '100%'
    },
    noImage: {
      objectFit: 'contain',
      height: '100%',
      width: '100%'
    },
    bold: {
      fontWeight: 700
    },
    wrapSkeleton: {
      display: 'flex',
      flexDirection: 'row',
      padding: '0.5rem',
      flex: '1 0 100%',
      overflow: 'hidden',
      '& span': {
        padding: '0 0.5rem'
      },
      '& .skeleton-input-component': {
        minHeight: below768 ? 170 : 210,
        maxHeight: below768 ? 170 : 210,
        maxWidth: below768 ? 170 : 210,
        minWidth: below768 ? 170 : 210
      }
    },
    iconPaging: {
      height: below768 ? '100%' : 'unset',
      opacity: below768 ? 0 : 1,
      borderRadius: below768 ? 'none' : '50%',
      fontSize: '1.5rem',
      padding: '0.5rem 1.16rem',
      background: '#20e079a8',
      color: '#fff',
      position: 'absolute',
      zIndex: 10,
      cursor: 'pointer',
      '&:hover': {
        background: '#3ee88d'
      }
    },
    iconPrevPage: {
      marginLeft: below768 ? 0 : 10
    },
    iconNextPage: {
      right: below768 ? 0 : 10
    },
    disabled: {
      background: '#828282!important',
      opacity: 0.8,
      display: 'none'
    },
    allContents: {
      display: 'flex',
      flexFlow: 'row wrap',
      border: below768 ? 'none' : '1px solid #d0d0d0',
      marginBottom: '0.5rem'
    },
    selectNumItem: {
      width: 72,
      marginLeft: '0.5rem'
    },
    noData: {
      textAlign: 'center',
      padding: '1rem',
      flex: '1 0 100%'
    },
    flexWrap: {
      flexWrap: 'wrap',
      overflowX: 'unset',
      justifyContent: 'start'
    },
    contentOverlay: {
      width: '100%',
      zIndex: 1,
      position: 'absolute',
      backgroundColor: '#fff',
      color: '#000',
      border: '1px solid #f7d32f',
      transform: 'rotate(-45deg)',
      left: '-30%',
      top: below768 ? '0.5rem' : '1rem',
      fontSize: below768 ? '9px' : '12px',
      padding: '4px',
      fontWeight: 600
    }
  })
});

export default function HomeSubscriptionPlan(props: PropsType) {
  const {
    isMegreLayout
  } = props;

  const dispatch = useAppDispatch();
  const t = useTranslations("");
  const router = useRouter();

  const layoutSettingAll = useAppSelector(getLayoutSettingAll);
  const subscriptionList = useAppSelector(getSubscriptionPage);
  const pagination = useAppSelector(getPaginationSubscription);
  const isLoading = useAppSelector(getIsLoadingSubscriptions);
  const viewSettings = useAppSelector(getViewSettings);
  const servicePath = useAppSelector(getServicePath);
  // const currentDomain = useAppSelector(getCompanyDomain);
  const authInfo = useAppSelector(getAuthInfo);

  

  const totalPages = pagination.totalPages || 0;
  const paginationPages = pagination.page || 0;
  
  const { subscriptionPlanBackground, subscriptionPlanText } = layoutSettingAll;
  const { below768, getBelow768 } = useResponsive();

  const { classes } = useStyle({ below768, subscriptionPlanBackground, subscriptionPlanText });

  const onFetchData = (param: any) => {
    dispatch(loadSubscriptionPublicUserPage(param));
  };

  const renderSkeleton = () => {
    return <div className={classes.wrapSkeleton}>
      {
        [...Array(below768 ? 3 : 10).keys()].map(skeleton => (
          <Skeleton key={`skeleton-component-${skeleton}`} className={'skeleton-input-component'} />
        ))
      }
    </div>;
  };

  const renderContent = (item: any, index: number) => {
    return (
      <div key={`sp-${index}-${item.id}`} className={classes.contentWrapScale}>
        <div className={`${classes.contentImage}`}>
          <div onClick={() => router.push(`${servicePath ? '/'+servicePath : ''}/subscription/${item.id}`)} >
            <img
              className={classes.noImage}
              src={APP_URL.UPLOAD_PATH + '/' + IMAGE_PATH.SUBSCRIPTION + item.imageName}
            />
          </div>
        </div>
      </div>
    );
  };

  const renderRowContent = (items: any) => {
    const isWrapLine = false;
    return (
      <Box className={`${classes.contentsRow} ${isWrapLine ? classes.flexWrap : ''}`}>
        {
          subscriptionList.map((item: any, index: number) => {
            return renderContent(item, index);
          })
        }
      </Box>
    );
  };

  const onChangePage = (page: number) => {
    const newQueries = { ...pagination };
    newQueries.page = page;
    onFetchData(newQueries)
  };

  useEffect(() => {
    onFetchData({ size: 150 })
  }, [authInfo]);

  return (
    <div style={{ marginBottom: isMegreLayout ? '1.4rem' : '' }}>
      {
        isLoading
          ? <div>
            <div className={classes.title}>
              <span style={{ display: 'flex', alignItems: 'center' }}>
                {t('title.subscriptionPlan')}
              </span>
            </div>
            <div className={classes.contents}>
              {renderSkeleton()}
            </div>
          </div>
          : (
            subscriptionList && subscriptionList.length > 0 &&
              <div>
                <div className={classes.title}>
                  <span style={{ display: 'flex', alignItems: 'center' }}>
                    {t('title.subscriptionPlan')}
                  </span>
                </div>
                <div className={classes.contents}>
                  {
                    isLoading
                      ? renderSkeleton()
                      : subscriptionList && subscriptionList.length > 0
                        ? renderRowContent(subscriptionList)
                        : <div className={classes.noData}>
                          {t('text.noData')}
                        </div>
                  }
                  {
                    subscriptionList && subscriptionList.length > 0 && (
                      <React.Fragment>
                        <span
                          className={`${classes.iconPaging} ${classes.iconPrevPage} ${paginationPages <= 1 && classes.disabled}`}
                          onClick={() => onChangePage(paginationPages - 1)}
                        >
                          <i className="fas fa-chevron-left"></i>
                        </span>
                        <span
                          className={`${classes.iconPaging} ${classes.iconNextPage} ${totalPages <= paginationPages && classes.disabled}`}
                          onClick={() => onChangePage(paginationPages + 1)}>
                          <i className="fas fa-chevron-right"></i>
                        </span>
                      </React.Fragment>
                    )
                  }
                </div>
              </div>
          )
      }
    </div>
  );
};