"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = CountrySelect;

var _react = _interopRequireDefault(require("react"));

var _styledComponents = require("./styled-components.js");

var _constants = require("./constants.js");

var _countrySelectDropdown = _interopRequireDefault(require("./country-select-dropdown.js"));

var _index = require("../block/index.js");

var _index2 = require("../select/index.js");

var _index3 = require("../popover/index.js");

var _overrides = require("../helpers/overrides.js");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function CountrySelect(props) {
  var country = props.country,
      inputRef = props.inputRef,
      _props$onCountryChang = props.onCountryChange,
      onCountryChange = _props$onCountryChang === void 0 ? function (event) {} : _props$onCountryChang,
      _props$size = props.size,
      size = _props$size === void 0 ? _constants.SIZE.default : _props$size,
      _props$maxDropdownWid = props.maxDropdownWidth,
      maxDropdownWidth = _props$maxDropdownWid === void 0 ? _constants.DEFAULT_MAX_DROPDOWN_WIDTH : _props$maxDropdownWid,
      _props$maxDropdownHei = props.maxDropdownHeight,
      maxDropdownHeight = _props$maxDropdownHei === void 0 ? _constants.DEFAULT_MAX_DROPDOWN_HEIGHT : _props$maxDropdownHei,
      mapIsoToLabel = props.mapIsoToLabel,
      _props$overrides = props.overrides,
      overrides = _props$overrides === void 0 ? {} : _props$overrides;
  var baseOverrides = {
    Root: {
      component: _styledComponents.StyledRoot,
      props: {
        size: size
      }
    },
    ControlContainer: {
      style: function style(props) {
        if (!props.$isFocused && !props.$isPseudoFocused) {
          return {
            backgroundColor: 'transparent',
            borderColor: 'transparent'
          };
        }
      }
    },
    IconsContainer: {
      style: {
        paddingRight: '0'
      }
    },
    SingleValue: {
      style: {
        display: 'flex',
        alignItems: 'center'
      }
    },
    DropdownContainer: {
      style: {
        width: maxDropdownWidth,
        maxWidth: 'calc(100vw - 10px)'
      }
    },
    Dropdown: {
      component: _countrySelectDropdown.default,
      props: {
        country: country,
        maxDropdownHeight: maxDropdownHeight,
        mapIsoToLabel: mapIsoToLabel,
        overrides: {
          CountrySelectDropdown: overrides.CountrySelectDropdown,
          CountrySelectDropdownListItem: overrides.CountrySelectDropdownListItem,
          CountrySelectDropdownFlagColumn: overrides.CountrySelectDropdownFlagColumn,
          CountrySelectDropdownNameColumn: overrides.CountrySelectDropdownNameColumn,
          CountrySelectDropdownDialcodeColumn: overrides.CountrySelectDropdownDialcodeColumn
        }
      }
    },
    Popover: {
      props: {
        placement: _index3.PLACEMENT.bottomLeft
      }
    }
  };

  var _getOverrides = (0, _overrides.getOverrides)(overrides.CountrySelect, _index2.Select),
      _getOverrides2 = _slicedToArray(_getOverrides, 2),
      Select = _getOverrides2[0],
      selectProps = _getOverrides2[1];

  var selectOverrides = (0, _overrides.mergeOverrides)(baseOverrides, overrides);

  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.DialCode, _styledComponents.StyledDialCode),
      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
      DialCode = _getOverrides4[0],
      dialCodeProps = _getOverrides4[1];

  return _react.default.createElement(_index.Block, {
    display: "flex",
    alignItems: "center"
  }, _react.default.createElement(Select, _extends({
    size: size,
    value: [country],
    onChange: function onChange(event) {
      // After choosing a country, shift focus to the text input
      if (inputRef && inputRef.current) {
        inputRef.current.focus();
      }

      onCountryChange(event);
    },
    options: Object.values(_constants.COUNTRIES),
    clearable: false,
    searchable: false,
    getValueLabel: function getValueLabel(value) {
      return _react.default.createElement(_styledComponents.StyledFlag, {
        iso: value.option.id,
        $size: size
      });
    },
    overrides: selectOverrides
  }, selectProps)), _react.default.createElement(DialCode, _extends({
    "data-e2e": "phone-input-dialcode"
  }, dialCodeProps), country.dialCode));
}