/* eslint-disable camelcase */
import React, { Suspense, useContext, useMemo } from 'react';
import PropTypes from 'prop-types';
import useLoadMore from 'gatsby-core-theme/src/hooks/useLoadMore';
import { Context } from '~context/MainProvider.js';
import { getCard } from '../../../../helpers/cards';
import AdminButton from '../../../atoms/admin/card/button';
import useTranslate from '~hooks/useTranslate/useTranslate';
import styles from './cards.module.scss';
import Card from '~atoms/cards/default-card';
import Button from '~atoms/button/button';

const Cards = ({
  module,
  page,
  modulePosition,
  enableLoadMore = false,
  limit = 6,
  buttonType = 'tertiary',
  buttonSize = 'm',
  isArchiveModule = false,
  increment = limit,
}) => {
  const CustomCardComponent = useMemo(() => getCard(module?.model_type || module?.cards_page_type, page?.template), [module?.model_type, module?.cards_page_type, page?.template]);

  const { admin } = useContext(Context) || {};
  const loadMoreData = useLoadMore({
    items: module.items,
    enabled: enableLoadMore && !isArchiveModule,
    initialLimit: limit,
    increment: increment || limit,
  });

  const moduleItems = isArchiveModule ? module.items : loadMoreData.items;
  const hasMore = !isArchiveModule && loadMoreData.hasMore;
  const loadMoreHandler = !isArchiveModule ? loadMoreData.loadMore : null;

  const loadMoreText =
    useTranslate(`load_more_${module?.model_type}`) || useTranslate('load_more', 'Load More');

  return (
    <div className={styles.cardsOuterContainer}>
      <div className={`${styles.cardsContainer || ''} ${styles.templateOneStyles || ''}`}>
        {moduleItems &&
          moduleItems.map((item, index) =>
            CustomCardComponent ? (
              <Suspense
                key={item.id}
                fallback={<></>}
              >
                {admin ? (
                  <div className={styles.container}>
                    <AdminButton item={item} />
                    <CustomCardComponent
                      key={item.id}
                      featured={module.style === 'featured'}
                      item={item}
                      type={item.type}
                      number={index + 1}
                      page={page}
                      modulePosition={modulePosition}
                      itemPosition={index + 1}
                      moduleStyle={module?.style}
                    />
                  </div>
                ) : (
                  <CustomCardComponent
                    key={item.id}
                    featured={module.style === 'featured'}
                    item={item}
                    type={item.type}
                    number={index + 1}
                    page={page}
                    modulePosition={modulePosition}
                    itemPosition={index + 1}
                    moduleStyle={module?.style}
                  />
                )}
              </Suspense>
            ) : (
              <Card
                key={item.id}
                item={item}
                modulePosition={modulePosition}
                itemPosition={index + 1}
              />
            )
          )}
      </div>
      {enableLoadMore && hasMore && !isArchiveModule && (
        <div className={styles.loadMoreContainer}>
          <Button
            btnText={loadMoreText}
            onClick={loadMoreHandler}
            buttonType={buttonType}
            buttonSize={buttonSize}
            gtmClass="cards-gtm btn-cta"
            isInternalLink={false}
          />
        </div>
      )}
    </div>
  );
};

Cards.propTypes = {
  module: PropTypes.shape({
    items: PropTypes.arrayOf(PropTypes.shape({})),
    featured_index: PropTypes.number,
    style: PropTypes.string,
    cards_page_type: PropTypes.string,
    model_type: PropTypes.string,
    name: PropTypes.string,
  }).isRequired,
  page: PropTypes.shape({
    template: PropTypes.string,
  }),
  modulePosition: PropTypes.number,
  enableLoadMore: PropTypes.bool,
  limit: PropTypes.number,
  buttonSize: PropTypes.string,
  buttonType: PropTypes.string,
  isArchiveModule: PropTypes.bool,
  increment: PropTypes.number,
};

export default Cards;
