import React from 'react';
import PropTypes from 'prop-types';
import { AiOutlinePlus } from '@react-icons/all-files/ai/AiOutlinePlus';
import { AiOutlineMinus } from '@react-icons/all-files/ai/AiOutlineMinus';
import ToggleButton from '../../../atoms/toggle-button/index';
import { translate } from '~helpers/getters';
import styles from './category.module.scss';

const CategoryContainer = ({
  obj,
  index,
  currentState,
  updateState,
  currentSection,
  setCurrentSection,
  translations,
  openSign = <AiOutlineMinus title="Minus Icon" />,
  closeSign = <AiOutlinePlus title="Plus Icon" />,
}) => (
  <div>
    <div
      aria-hidden="true"
      className={`${styles.categoryBox} ${currentSection === index && styles.showFullCategory}`}
      onClick={() => setCurrentSection(index)}
    >
      <div className={styles.categoryHeader}>
        <div className={styles.boxTitle}>
          {currentSection === index ? openSign : closeSign}
          <span>{translate(translations, obj?.translateKey, obj?.altTranslation)}</span>
        </div>
        {obj?.button ? (
          <ToggleButton state={currentState} setStateFunc={updateState} />
        ) : (
          <p>{translate(translations, 'cookie_container_always_text', 'Always Enabled')}</p>
        )}
      </div>
      <div className={styles.categoryText}>
        {translate(translations, obj?.textKey, obj?.defaultText)}
      </div>
    </div>
  </div>
);

CategoryContainer.propTypes = {
  obj: PropTypes.shape({
    translateKey: PropTypes.string,
    altTranslation: PropTypes.string,
    textKey: PropTypes.string,
    button: PropTypes.bool,
    defaultText: PropTypes.string,
  }),
  index: PropTypes.number,
  currentState: PropTypes.bool,
  updateState: PropTypes.func,
  currentSection: PropTypes.number,
  setCurrentSection: PropTypes.func,
  translations: PropTypes.shape({}),
  openSign: PropTypes.shape({}),
  closeSign: PropTypes.shape({}),
};

export default CategoryContainer;
