"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports._CustomFieldTypeDropdown = exports.CustomFieldTypeDropdown = void 0;
var _react = _interopRequireDefault(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _designSystem = require("@wix/design-system");
var _react2 = require("@wix/bex-core/react");
var _fieldTypePrefixIcons = require("../../utils/fieldTypePrefixIcons");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CustomFieldModal/CustomFieldTypeDropdown.tsx";
const _CustomFieldTypeDropdown = props => {
  const {
    state: {
      form: {
        $: {
          type,
          name
        }
      },
      mode,
      generateUniqueKey,
      setKeyFieldIfNotDirty
    }
  } = props;
  const {
    translate: t
  } = (0, _react2.useWixPatternsContainer)();
  const [fieldTypeOptions] = _react.default.useState(() => [(0, _designSystem.listItemSelectBuilder)({
    dataHook: 'custom-field-modal-type-shortText',
    id: 'shortText',
    prefix: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 33,
        columnNumber: 9
      }
    }, (0, _fieldTypePrefixIcons.getFieldTypeIcon)({
      fieldType: 'SHORT_TEXT',
      size: 'medium'
    })),
    title: t('cairo.customFields.fieldType.shortText'),
    label: t('cairo.customFields.fieldType.shortText')
  }), (0, _designSystem.listItemSelectBuilder)({
    dataHook: 'custom-field-modal-type-longText',
    id: 'longText',
    prefix: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 44,
        columnNumber: 9
      }
    }, (0, _fieldTypePrefixIcons.getFieldTypeIcon)({
      fieldType: 'LONG_TEXT',
      size: 'medium'
    })),
    title: t('cairo.customFields.fieldType.longText'),
    label: t('cairo.customFields.fieldType.longText')
  }), (0, _designSystem.listItemSelectBuilder)({
    dataHook: 'custom-field-modal-type-date',
    id: 'date',
    prefix: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 55,
        columnNumber: 9
      }
    }, (0, _fieldTypePrefixIcons.getFieldTypeIcon)({
      fieldType: 'DATE',
      size: 'medium'
    })),
    title: t('cairo.customFields.fieldType.date'),
    label: t('cairo.customFields.fieldType.date')
  }), (0, _designSystem.listItemSelectBuilder)({
    dataHook: 'custom-field-modal-type-dateTime',
    id: 'dateTime',
    prefix: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 66,
        columnNumber: 9
      }
    }, (0, _fieldTypePrefixIcons.getFieldTypeIcon)({
      fieldType: 'DATE_TIME',
      size: 'medium'
    })),
    title: t('cairo.customFields.fieldType.dateAndTime'),
    label: t('cairo.customFields.fieldType.dateAndTime')
  }), (0, _designSystem.listItemSelectBuilder)({
    dataHook: 'custom-field-modal-type-integer',
    id: 'integer',
    prefix: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 77,
        columnNumber: 9
      }
    }, (0, _fieldTypePrefixIcons.getFieldTypeIcon)({
      fieldType: 'INTEGER',
      size: 'medium'
    })),
    title: t('cairo.customFields.fieldType.numberInteger'),
    label: t('cairo.customFields.fieldType.numberInteger')
  }), (0, _designSystem.listItemSelectBuilder)({
    dataHook: 'custom-field-modal-type-decimal',
    id: 'decimal',
    prefix: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 88,
        columnNumber: 9
      }
    }, (0, _fieldTypePrefixIcons.getFieldTypeIcon)({
      fieldType: 'DECIMAL',
      size: 'medium'
    })),
    title: t('cairo.customFields.fieldType.numberDecimal'),
    label: t('cairo.customFields.fieldType.numberDecimal')
  }), (0, _designSystem.listItemSelectBuilder)({
    dataHook: 'custom-field-modal-type-checkbox',
    id: 'checkbox',
    prefix: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 99,
        columnNumber: 9
      }
    }, (0, _fieldTypePrefixIcons.getFieldTypeIcon)({
      fieldType: 'CHECKBOX',
      size: 'medium'
    })),
    title: t('cairo.customFields.fieldType.checkbox'),
    label: t('cairo.customFields.fieldType.checkbox')
  }), (0, _designSystem.listItemSelectBuilder)({
    dataHook: 'custom-field-modal-type-url',
    id: 'url',
    prefix: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 110,
        columnNumber: 9
      }
    }, (0, _fieldTypePrefixIcons.getFieldTypeIcon)({
      fieldType: 'URL',
      size: 'medium'
    })),
    title: t('cairo.customFields.fieldType.url'),
    label: t('cairo.customFields.fieldType.url')
  })
  /* listItemSelectBuilder({
    dataHook: 'custom-field-modal-type-dropdown',
    id: 'dropdown',
    prefix: (
      <Box>
        <DropdownIcon />
      </Box>
    ),
    title: t('cairo.customFields.fieldType.dropdownList'),
    label: t('cairo.customFields.fieldType.dropdownList'),
  }),*/]);
  return /*#__PURE__*/_react.default.createElement(_designSystem.Dropdown, {
    dataHook: "custom-field-modal-type",
    disabled: mode === 'edit',
    valueParser: option => option.label,
    selectedId: type.value,
    onSelect: ({
      id
    }) => {
      type.onChange(id);
      setKeyFieldIfNotDirty(generateUniqueKey(name.value));
    },
    popoverProps: {
      appendTo: 'window',
      zIndex: 5001
    },
    dropdownWidth: "258px",
    placeholder: t('cairo.customFields.addCustomField.modal.fieldType.placeholder'),
    options: fieldTypeOptions,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 131,
      columnNumber: 5
    }
  });
};
exports._CustomFieldTypeDropdown = _CustomFieldTypeDropdown;
const CustomFieldTypeDropdown = exports.CustomFieldTypeDropdown = (0, _mobxReactLite.observer)(_CustomFieldTypeDropdown);
//# sourceMappingURL=CustomFieldTypeDropdown.js.map