import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { shortString } from "@equilab/utils/lib/format";
import cn from "classnames";
import React from "react";
import { t } from "ttag";
import { useDevice } from "../../contexts/device";
import { useBase } from "../../contexts/substrate/base";
import ConnectPolkadot from "../connect-polkadot-badge";
import { Box } from "../grid";
import Identicon from "../identicon";
import Input from "../input";
import Select from "../select";
import Text from "../text";
import { AddressInputWrapper as Wrapper, Avatar, AccWrapper } from "./styled";
export const AddressInput = ({ width = "447px", className, accounts, connected: _connected, children, noInput, ...props }) => {
    const { screen } = useDevice();
    const isDesktop = screen === "large";
    const connected = React.useMemo(() => !!accounts, [accounts]);
    const { validateSubstrateAddress } = useBase();
    const selectDisabled = React.useMemo(() => {
        return !accounts || !connected;
    }, [accounts, connected]);
    const hasAvatar = React.useMemo(() => {
        return (!!props.value &&
            props.value.length > 0 &&
            validateSubstrateAddress(props.value) &&
            connected);
    }, [props.value, connected, validateSubstrateAddress]);
    const accountName = React.useMemo(() => accounts?.find((acc) => acc.address === props.value)?.meta.name, [accounts, props.value]);
    return (_jsxs(Wrapper, { width: width, hasAvatar: hasAvatar, className: cn("ui-address-input", className, {
            "ui-address-input--disabled": selectDisabled,
            "ui-address-input--error": props.error,
        }), children: [!selectDisabled ? (_jsx(Avatar, { className: "ui-address-input__avatar", children: hasAvatar ? (_jsx(Identicon, { value: props.value, size: 36, theme: "polkadot" })) : (connected) })) : null, accountName && (_jsx(AccWrapper, { className: "ui-address-input__name", children: _jsx(Text.F2, { fontFamily: "Bold", gray: true, children: accountName }) })), selectDisabled ? (_jsx("div", { className: "ui-address-input__disabled-content", children: _jsx(ConnectPolkadot, {}) })) : undefined, _jsx(Input, { value: props.value, placeholder: connected
                    ? shortString("5HWNeYCNYwKA8FCM1rXddGAayxzZhKBKRyUi2TGrQadY9Q7A", 28, "prefix")
                    : t `Connect wallet`, disabled: props.disabled || noInput, error: props.error, width: `${parseFloat(width) - (isDesktop ? 64 : 46)}px`, onChange: props.onChange, ...(props.input ?? {}) }), _jsx(Select, { disabled: props.disabled, placeholder: " ", width: isDesktop ? "64px" : "49px", onSelect: props.onChange, error: !!props.error, ...(props.select ?? {}), children: accounts?.map((acc) => {
                    return (_jsxs(Select.Option, { onClick: () => props.onChange?.(acc.address), className: "ui-address-input__select-option", children: [_jsx(Avatar, { className: "ui-address-input__avatar", children: _jsx(Identicon, { value: acc.address, size: 36, theme: "polkadot" }) }), _jsxs(Box, { pl: "62px", pt: "10px", children: [_jsx(Text.F2, { fontFamily: "Bold", gray: true, className: "ui-address-input__select-option-name", children: acc.meta.name ?? "" }), _jsx(Text.T4, { lineHeight: 14, children: shortString(acc.address, 20, "infix") })] })] }, acc.pub));
                }) })] }));
};
export default AddressInput;
//# sourceMappingURL=index.js.map