import React from 'react';
import { Dialog } from '@txdfe/at';
import SettingItem from '../setting-item';
import './index.scss';

class SettingPanel extends React.Component {
  render() {
    const { onClose, setting, visible, objectId, objectType, onChange } = this.props;
    const fields = setting.fields;
    return (
      <Dialog
        visible={visible}
        title={setting.name}
        closeable="esc,close,mask"
        minMargin={48}
        className="uiless-extension-setting-panel"
        footer={false}
        onClose={onClose}
      >
        {
          Array.isArray(fields) && fields.map((item, index) => {
            return (
              <SettingItem
                key={item.name}
                item={item}
                objectId={objectId}
                objectType={objectType}
                onChange={onChange}
              />
            )
          })
        }
      </Dialog>
    )
  }
}

export default SettingPanel;