import React from 'react';
import { Form } from 'antd';
import { BaseTranslation, Icon, Select } from '@pisell/materials';
import { validateI18nRequired } from "../../types";
var DeviceBasicInfoForm = function DeviceBasicInfoForm(_ref) {
  var _selectedModel$type;
  var form = _ref.form,
    selectedModel = _ref.selectedModel,
    _ref$profiles = _ref.profiles,
    profiles = _ref$profiles === void 0 ? [] : _ref$profiles,
    profileRequired = _ref.profileRequired,
    showProfile = _ref.showProfile,
    workAreas = _ref.workAreas,
    workAreaId = _ref.workAreaId,
    currentWorkAreaId = _ref.currentWorkAreaId,
    getText = _ref.getText,
    translation = _ref.translation,
    onWorkAreaChange = _ref.onWorkAreaChange,
    onValuesChange = _ref.onValuesChange,
    _ref$showSelectedMode = _ref.showSelectedModel,
    showSelectedModel = _ref$showSelectedMode === void 0 ? true : _ref$showSelectedMode;
  return /*#__PURE__*/React.createElement("div", {
    className: "add-device-modal__body",
    style: {
      minHeight: 'auto'
    }
  }, showSelectedModel && selectedModel ? /*#__PURE__*/React.createElement("div", {
    className: "add-device-modal__selected-model"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: ((_selectedModel$type = selectedModel.type) === null || _selectedModel$type === void 0 ? void 0 : _selectedModel$type.icon) || 'DesktopOutlined'
  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "add-device-modal__model-name"
  }, translation(selectedModel.name) || ''), /*#__PURE__*/React.createElement("div", {
    className: "add-device-modal__model-desc"
  }, translation(selectedModel.description) || ''))) : null, /*#__PURE__*/React.createElement(Form, {
    form: form,
    layout: "vertical",
    preserve: false,
    onValuesChange: onValuesChange
  }, /*#__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"
  })), workAreas ? /*#__PURE__*/React.createElement(Form.Item, {
    label: getText('pisell2.saas.device-planning.edit.work-area'),
    required: true
  }, /*#__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
      };
    }),
    onChange: function onChange(value) {
      return onWorkAreaChange === null || onWorkAreaChange === void 0 ? void 0 : onWorkAreaChange(value);
    }
  })) : null, showProfile && profileRequired ? /*#__PURE__*/React.createElement(Form.Item, {
    name: "profile_id",
    label: getText('pisell2.saas.device-planning.add.device-profile'),
    required: true,
    rules: [{
      required: true,
      message: getText('pisell2.saas.device-planning.add.device-profile-required')
    }],
    help: profiles.length === 0 ? getText('pisell2.saas.device-planning.add.create-profile-first') : undefined
  }, /*#__PURE__*/React.createElement(Select, {
    disabled: profiles.length === 0,
    options: profiles.map(function (profile) {
      return {
        label: translation(profile.name) || String(profile.id),
        value: profile.id
      };
    })
  })) : null));
};
export default DeviceBasicInfoForm;