import React, { useState } from 'react';

import classNames from 'classnames';

import styles from './min.less';

const Categories = props => {
  const [currentIndex, setCurrentIndex] = useState(props.currentMenuIndex);
  const selectCategories = (event, index) => {
    event.preventDefault();
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
    setCurrentIndex(index);
    // eslint-disable-next-line no-unused-expressions
    props.onChange && props.onChange(index);
  };
  return (
    <div className={classNames(styles['menu-categories'], {
      [styles['min-cateorites']]: props.mode
    })}>
      {(props.data || []).map((item, index) => {
        const categorieCls = classNames(
          styles['categorie-name'],
          styles.btn,
          currentIndex === index ? styles.active : '',
        );
        return (
          <div
            className={categorieCls}
            key={item.name}
            onClick={event => selectCategories(event, index)}
          >
            {/* eslint-disable-next-line jsx-a11y/alt-text */}
            <img src={item.extData.icon} />
            <span>{item.extData.label}</span>
          </div>
        );
      })}
    </div>
  );
};

export default Categories;
