import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import CustomIcon from 'components/items/CustomIcon';
import styleIdentifiers from './moduleHeader.scss';
import ModuleDropActions from '../ModuleDropActions';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ModuleHeaderProps = StateProps & DispatchProps & OwnProps;

const ModuleHeader = (props: ModuleHeaderProps) => {
  const { title, noBack, history, actions } = props;
  return (
    <div className={styles('ModuleHeader')}>
      <div className={styles('header-container')}>
        {!noBack && (
          <div className={styles('back')} onClick={() => history.goBack()}>
            <CustomIcon className={styles('icon')} icon="angle-left" />
            <TextItem path="admin.buttons.back" />
          </div>
        )}
        {title && (
          <div className={styles('title')}>
            <TextItem path={title} />
          </div>
        )}
        {actions && (
          <ModuleDropActions
            className={styles('actions')}
            buttonClassName={styles('button-actions')}
            label="Bulk actions"
            actions={actions}
          />
        )}
      </div>
    </div>
  );
};

export default ModuleHeader;
