import React from 'react';
import { Form, Input as AntdInput, Select } from 'antd';
import { BaseTranslation, Icon } from '@pisell/materials';
import { DEVICE_SHORT_NUMBER_MAX_LENGTH, normalizeDeviceShortNumberInput, validateDeviceShortNumber, validateI18nRequired } from "../../model";
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,
    showShortNumber = _ref.showShortNumber,
    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",
    placeholder: getText('pisell2.saas.device-planning.add.device-name-placeholder')
  })), /*#__PURE__*/React.createElement(Form.Item, {
    name: "description",
    label: getText('pisell2.saas.device-planning.modal.description')
  }, /*#__PURE__*/React.createElement(BaseTranslation, {
    renderMode: "edit",
    type: "textarea",
    placeholder: getText('pisell2.saas.device-planning.modal.description-placeholder')
  })), showShortNumber ? /*#__PURE__*/React.createElement(Form.Item, {
    name: "short_number",
    label: getText('pisell2.saas.device-planning.device-short-number.label'),
    normalize: function normalize(value) {
      return normalizeDeviceShortNumberInput(value);
    },
    required: true,
    rules: [{
      validator: validateDeviceShortNumber({
        required: getText('pisell2.saas.device-planning.device-short-number.required'),
        format: getText('pisell2.saas.device-planning.device-short-number.format'),
        reserved: getText('pisell2.saas.device-planning.device-short-number.reserved')
      })
    }],
    extra: getText('pisell2.saas.device-planning.device-short-number.helper')
  }, /*#__PURE__*/React.createElement(AntdInput, {
    maxLength: DEVICE_SHORT_NUMBER_MAX_LENGTH,
    placeholder: getText('pisell2.saas.device-planning.device-short-number.placeholder')
  })) : null, workAreas ? /*#__PURE__*/React.createElement(Form.Item, {
    label: getText('pisell2.saas.device-planning.edit.work-area'),
    required: true
  }, /*#__PURE__*/React.createElement(Select, {
    value: workAreaId,
    placeholder: getText('pisell2.saas.device-planning.edit.work-area-placeholder'),
    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,
    placeholder: getText('pisell2.saas.device-planning.add.device-profile-placeholder'),
    options: profiles.map(function (profile) {
      return {
        label: translation(profile.name) || String(profile.id),
        value: profile.id
      };
    }),
    allowClear: true
  })) : null));
};
export default DeviceBasicInfoForm;