import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import enhanceWithClickOutside from "react-click-outside";
import styled from "styled-components";
import { composeStyle as comp } from "../../util";
import { isActive } from "./index";
const Wrapper = styled.div ``;
const SelectedLocale = styled.div ``;
const Modal = styled.div(({ theme: { mediaLaptop, modalWidth, modalPadding, laptopModalWidth } }) => `
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: white;
  color: #1792ff;
  ${comp("width", modalWidth)}
  ${comp("padding", modalPadding)}

  @media (${mediaLaptop}) {
    ${comp("width", laptopModalWidth)}
  }
`);
class LocalePicker extends React.Component {
    state = {
        isModalOpened: false,
    };
    openModal = (e) => {
        e.preventDefault();
        e.stopPropagation();
        this.setState({ isModalOpened: true });
    };
    getAlternativeLocales = (inverted) => {
        return React.Children.map(this.props.children, (child) => {
            if (child.props.locale) {
                return child.props.active || isActive(child.props.locale)
                    ? null
                    : React.cloneElement(child, { inverted });
            }
        });
    };
    getSelectedLocale = (inverted) => {
        return React.Children.map(this.props.children, (child) => {
            if (child.props.locale) {
                return child.props.active || isActive(child.props.locale)
                    ? React.cloneElement(child, { inverted })
                    : null;
            }
        });
    };
    handleClickOutside() {
        this.setState({ isModalOpened: false });
    }
    render() {
        return (_jsxs(Wrapper, { children: [_jsx(SelectedLocale, { onClick: this.openModal, children: this.getSelectedLocale(false) }), this.state.isModalOpened && (_jsxs(Modal, { theme: this.props.theme, children: [this.getAlternativeLocales(true), this.getSelectedLocale(true)] }))] }));
    }
}
export default enhanceWithClickOutside(LocalePicker);
//# sourceMappingURL=locale-picker.js.map