import React from 'react';
import { Form } from 'antd';
import { BaseTranslation, Icon, Select } from '@pisell/materials';
import { validateI18nRequired } from "../../../../types";
var validateRequired = function validateRequired(message) {
  return [{
    required: true,
    message: message
  }];
};
var NewPeripheralInfoFields = function NewPeripheralInfoFields(_ref) {
  var workAreas = _ref.workAreas,
    workAreaId = _ref.workAreaId,
    currentWorkAreaId = _ref.currentWorkAreaId,
    getText = _ref.getText,
    translation = _ref.translation;
  return /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connect-new-info"
  }, /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connect-section-title"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "InfoCircleOutlined"
  }), getText('pisell2.saas.device-planning.connect.new-info')), /*#__PURE__*/React.createElement("div", {
    style: {
      height: '8px'
    }
  }), /*#__PURE__*/React.createElement(Form.Item, {
    name: "name",
    label: getText('pisell2.saas.device-planning.add.device-name'),
    required: true,
    rules: [{
      validator: validateI18nRequired(getText('pisell2.saas.device-planning.add.device-name-required'))
    }]
  }, /*#__PURE__*/React.createElement(BaseTranslation, {
    renderMode: "edit"
  })), /*#__PURE__*/React.createElement(Form.Item, {
    name: "workarea_id",
    label: getText('pisell2.saas.device-planning.edit.work-area'),
    required: true,
    rules: validateRequired(getText('pisell2.saas.device-planning.edit.work-area-required'))
  }, /*#__PURE__*/React.createElement(Select, {
    value: workAreaId,
    options: workAreas.map(function (area) {
      return {
        label: "".concat(translation(area.name) || area.id).concat(area.id === currentWorkAreaId ? " (".concat(getText('pisell2.saas.device-planning.connect.current'), ")") : ''),
        value: area.id
      };
    })
  })));
};
export default NewPeripheralInfoFields;