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; }

/*
Copyright (c) 2018-2019 Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import { StyledRoot, StyledFlag, StyledDialCode } from './styled-components.js';
import { SIZE, COUNTRIES, DEFAULT_MAX_DROPDOWN_HEIGHT, DEFAULT_MAX_DROPDOWN_WIDTH } from './constants.js';
import CountrySelectDropdown from './country-select-dropdown.js';
import { Block } from '../block/index.js';
import { Select as DefaultSelect } from '../select/index.js';
import { PLACEMENT } from '../popover/index.js';
import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
export default 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 ? SIZE.default : _props$size,
      _props$maxDropdownWid = props.maxDropdownWidth,
      maxDropdownWidth = _props$maxDropdownWid === void 0 ? DEFAULT_MAX_DROPDOWN_WIDTH : _props$maxDropdownWid,
      _props$maxDropdownHei = props.maxDropdownHeight,
      maxDropdownHeight = _props$maxDropdownHei === void 0 ? DEFAULT_MAX_DROPDOWN_HEIGHT : _props$maxDropdownHei,
      mapIsoToLabel = props.mapIsoToLabel,
      _props$overrides = props.overrides,
      overrides = _props$overrides === void 0 ? {} : _props$overrides;
  var baseOverrides = {
    Root: {
      component: 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,
      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: PLACEMENT.bottomLeft
      }
    }
  };

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

  var selectOverrides = mergeOverrides(baseOverrides, overrides);

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

  return React.createElement(Block, {
    display: "flex",
    alignItems: "center"
  }, React.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(COUNTRIES),
    clearable: false,
    searchable: false,
    getValueLabel: function getValueLabel(value) {
      return React.createElement(StyledFlag, {
        iso: value.option.id,
        $size: size
      });
    },
    overrides: selectOverrides
  }, selectProps)), React.createElement(DialCode, _extends({
    "data-e2e": "phone-input-dialcode"
  }, dialCodeProps), country.dialCode));
}