/* eslint-disable react/no-array-index-key */
import React from 'react';
import Col from '../../../base/Grid/Col';
import Row from '../../../base/Grid/Row';
import { TButtons } from '../../../../const/common';
import { clearPropsValues } from '../../../../util/index';
import buttonPanelPCStyle from './ButtonPanelPC.module.scss';

interface IButtonPanelPCProps {
  buttons?: TButtons;
}

export default function ButtonPanelPC(props: IButtonPanelPCProps) {
  const { buttons = [] } = props;

  const renderButtonPanel = () => buttons.map((itemArr, rowIndex) => {
    const renderButtonPanelCol = () => itemArr.map((item, index) => {
      const { component, props: buttonProps } = item;
      if (buttonProps?.show === false) {
        return;
      }
      const newProps = clearPropsValues(props, 'show');
      // @ts-ignore
      const ButtonComp = React.createElement(component, { ...newProps });
      const size = Math.floor(12 / itemArr.length);
      return <Col key={index} style={{ justifyContent: 'center' }} span={size}>{ButtonComp}</Col>;
    });

    return <Row key={rowIndex}>{renderButtonPanelCol()}</Row>;
  });
  return <div className={buttonPanelPCStyle['button-panel-pc-container']}>{renderButtonPanel()}</div>;
}