import React from 'react';
import oeeStyle from './oee.less';
import OeeSearchComponent from './oeeSearchComponent';
import * as commonUtils from '../../utils/utils';

const OeeToolBar = (props) => {
  const { slaveConfig } = props;
  const onBtnClick = (item) => {
    console.log(item);
  };
  const buttonConfig = commonUtils.isNotEmptyObject(slaveConfig) ? slaveConfig.gdsconfigformslave.filter(item => item.sName === '' && item.showName !== '' && item.sControlName !== '' && item.bVisible && item.sControlName.indexOf('Btn') > -1) : [];
  return (
    <div className={oeeStyle.bottomBtns}>
      <div className={oeeStyle.btnBrints}>
        {
          commonUtils.isNotEmptyArr(buttonConfig) ?
            buttonConfig.map((item, index) => {
              return (
                // eslint-disable-next-line jsx-a11y/anchor-is-valid,react/no-array-index-key
                <a key={index} style={{ background: `${item.sColorTerms}` }} onClick={() => onBtnClick(item)}>
                  {item.showName}
                </a>
              );
            }) : ''
        }
      </div>
      <div className={oeeStyle.searchComponent}>
        <OeeSearchComponent {...props} />
      </div>
    </div>
  );
};

export default OeeToolBar;