import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
 *
 * WSO2 LLC. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import { FlagOutlined } from '@mui/icons-material';
import Select from '@mui/material/Select';
import clsx from 'clsx';
import { forwardRef, useState } from 'react';
import Flag from 'react-world-flags';
import { countries } from './constants/countries';
import Box from '../Box';
import InputLabel from '../InputLabel';
import ListItemIcon from '../ListItemIcon';
import MenuItem from '../MenuItem';
import OutlinedInput from '../OutlinedInput';
import Typography from '../Typography';

/**
 * The Phone Number Input component is used to get the phone number input from the user.
 *
 * Demos:
 *
 * - [Phone Number Input (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-phone-number-input)
 *
 * API:
 *
 * - inherits [Box API](https://mui.com/material-ui/api/box/)
 *
 * @remarks
 * - ✨ This is a custom component that is not available in the Material-UI library.
 * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available.
 * - ✅ `component` prop is supported.
 * - ✅ The `ref` is forwarded to the root element.
 *
 * @template C - The type of the component.
 * @param props - The props for the PhoneNumberInput component.
 * @param ref - The ref to be forwarded to the Box component.
 * @returns The rendered PhoneNumberInput component.
 */
const PhoneNumberInput = forwardRef((_a, ref) => {
    var { className, dialCodeValue, label, InputLabelProps, OutlinedInputProps, onChange, phoneNumberValue, placeholder, SelectProps } = _a, rest = __rest(_a, ["className", "dialCodeValue", "label", "InputLabelProps", "OutlinedInputProps", "onChange", "phoneNumberValue", "placeholder", "SelectProps"]);
    const [dialCode, setDialCode] = useState(dialCodeValue !== null && dialCodeValue !== void 0 ? dialCodeValue : countries[0].dialCode);
    const [phoneNumber, setPhoneNumber] = useState(phoneNumberValue !== null && phoneNumberValue !== void 0 ? phoneNumberValue : '');
    const handleDialCodeChange = (event) => {
        setDialCode(event.target.value);
        onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value, phoneNumber);
    };
    const handlePhoneNumberChange = (event) => {
        setPhoneNumber(event.target.value);
        onChange === null || onChange === void 0 ? void 0 : onChange(dialCode, event.target.value);
    };
    const renderValue = (value) => {
        const selectedCountry = countries.find((item) => item.dialCode === dialCode);
        return (_jsxs(_Fragment, { children: [_jsx(ListItemIcon, { children: _jsx(Flag, { className: "oxygen-image", alt: selectedCountry.name, code: selectedCountry.code, fallback: _jsx(FlagOutlined, {}) }) }), value] }));
    };
    return (_jsxs(Box, Object.assign({ className: clsx(
        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
        'oxygen-phone-number-input', 'OxygenPhoneNumberInput-root', className), ref: ref }, rest, { children: [_jsx(InputLabel, Object.assign({ htmlFor: "phone-number-input", id: "phone-number-label" }, { children: label })), _jsxs(Box, Object.assign({ className: "OxygenPhoneNumberInput-selectWrapper oxygen-select-input" }, { children: [_jsx(Select, Object.assign({ className: "OxygenPhoneNumberInput-select oxygen-select", labelId: "phone-number-label", id: "phone-number-select", value: dialCode, onChange: handleDialCodeChange, renderValue: renderValue, inputProps: {
                            className: 'oxygen-select-input-root',
                        } }, SelectProps, { children: countries === null || countries === void 0 ? void 0 : countries.map((countryItem) => {
                            const { dialCode: phoneCode, code, name } = countryItem;
                            return (_jsxs(MenuItem, Object.assign({ value: phoneCode, className: "OxygenPhoneNumberInput-dialCodeMenu oxygen-dial-code-menu-item" }, { children: [_jsx(ListItemIcon, { children: _jsx(Flag, { className: "OxygenPhoneNumberInput-dialCodeFlag oxygen-image", alt: name, code: code, fallback: _jsx(FlagOutlined, {}) }) }), _jsx(Typography, { children: name }), "\u00A0", _jsx(Typography, Object.assign({ variant: "body2" }, { children: phoneCode }))] }), code));
                        }) })), _jsx(OutlinedInput, Object.assign({ id: "phone-number-input", type: "tel", placeholder: placeholder, value: phoneNumber, onChange: handlePhoneNumberChange }, OutlinedInputProps))] }))] })));
});
export default PhoneNumberInput;
function addCSS(css){var head = document.getElementsByTagName('head')[0];var s = document.createElement('style');s.setAttribute('type', 'text/css');s.appendChild(document.createTextNode(css));head.appendChild(s);}
addCSS("/**\n * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n.oxygen-dial-code-menu-item .oxygen-image {\n  width: 1.5rem;\n}\n\n.oxygen-phone-number-input .oxygen-select-input {\n  display: inline-flex;\n}\n.oxygen-phone-number-input .oxygen-select-input .oxygen-outlined-input {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.oxygen-phone-number-input .oxygen-select-input .oxygen-select {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.oxygen-phone-number-input .oxygen-select-input .oxygen-select .oxygen-select-input-root {\n  display: flex;\n  align-items: center;\n}\n.oxygen-phone-number-input .oxygen-select-input .oxygen-select .oxygen-select-input-root .oxygen-list-item-icon {\n  min-width: unset;\n  padding-right: 1rem;\n}\n.oxygen-phone-number-input .oxygen-select-input .oxygen-select .oxygen-select-input-root .oxygen-list-item-icon .oxygen-image {\n  width: 1.5rem;\n}");