/* eslint-disable camelcase */
import React from 'react';
import PropTypes from 'prop-types';

import styles from './cards.module.scss';
import Card from '~atoms/cards/default-card';
import keygen from '~helpers/keygen';

const CardsGridStyles = ({
  module,
  children,
  mobileColumns = 2,
  tabletColumns = 3,
  desktopColumns = 4,
  className = '',
}) => {
  const divStyle = {
    '--cards-mob-column': `${
      module.mobile_num_of_columns ? module.mobile_num_of_columns : mobileColumns
    }`,
    '--cards-tablet-column': `${
      module.tablet_num_of_columns ? module.tablet_num_of_columns : tabletColumns
    }`,
    '--cards-desktop-column': `${
      module.desktop_num_of_columns ? module.desktop_num_of_columns : desktopColumns
    }`,
  };
  return (
    <div className={className || ''} style={divStyle}>
      {children}
    </div>
  );
};

CardsGridStyles.propTypes = {
  className: PropTypes.string,
  module: PropTypes.shape({
    mobile_num_of_columns: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    tablet_num_of_columns: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    desktop_num_of_columns: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  }).isRequired,
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.any]),
  mobileColumns: PropTypes.number,
  tabletColumns: PropTypes.number,
  desktopColumns: PropTypes.number,
};

const Cards = ({
  module,
  CustomCardComponent,
  page,
  desktopColumns = 4,
  tabletColumns = 3,
  mobileColumns = 2,
}) => (
  <CardsGridStyles
    module={module}
    desktopColumns={desktopColumns}
    tabletColumns={tabletColumns}
    mobileColumns={mobileColumns}
    className={styles.cardsContainer}
  >
    {module.items &&
      module.items.map((item, index) =>
        CustomCardComponent ? (
          <CustomCardComponent
            key={keygen()}
            featured={module.style === 'featured'}
            item={item}
            type={item.type}
            number={index + 1}
            page={page}
          />
        ) : (
          <Card key={keygen()} item={item} />
        )
      )}
  </CardsGridStyles>
);

Cards.propTypes = {
  module: PropTypes.shape({
    // eslint-disable-next-line react/forbid-prop-types
    items: PropTypes.arrayOf(PropTypes.object),
    featured_index: PropTypes.number,
    style: PropTypes.string,
  }).isRequired,
  CustomCardComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
  page: PropTypes.shape({}),
  desktopColumns: PropTypes.number,
  tabletColumns: PropTypes.number,
  mobileColumns: PropTypes.number,
};

export default Cards;
