import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { Box, Row } from "../grid";
import Tabs from "../tabs";
import TextBase from "../text";
import RadioButton from "../radio-button";
import { ellipsis } from "./util";
import BackBtn from "./back";
import { ActionWrapper } from "./styled";
const Addresses = styled.div `
  display: flex;
  flex-flow: column nowrap;
  overflow-y: auto;
`;
const Identicon = React.lazy(() => import("@polkadot/react-identicon"));
const Settings = ({ account, accounts, network, networks, onAccountChange, onNetworkChange, onClose, }) => (_jsxs(_Fragment, { children: [_jsx(BackBtn, { onClose: onClose }), _jsxs(ActionWrapper, { children: [networks.length > 1 ? (_jsx(Box, { className: "tabs", p: "12px 16px", children: _jsx(Tabs, { items: networks.map(({ name }) => ({
                            value: name,
                            label: name,
                        })), selectedValue: network?.name, onChange: (tab) => {
                            onNetworkChange?.(networks.find(({ name }) => name === tab));
                        }, type: "control" }) })) : undefined, _jsx(Addresses, { className: "addresses", children: accounts.map((acc, i) => (_jsxs(Row, { className: "wallet", children: [_jsx(React.Suspense, { fallback: _jsx("div", {}), children: _jsx(Identicon, { value: acc.address, size: 24, theme: "polkadot" }) }), _jsx(RadioButton, { value: acc.address, title: _jsxs(_Fragment, { children: [_jsx(TextBase.F2, { children: ellipsis(acc.meta?.name ?? "", 12) }), _jsx(TextBase.F3, { fontFamily: "CourierBold", gray: true, children: acc.address.slice(0, 9) + "..." + acc.address.slice(-9) })] }), checked: acc.address === account.address, onClick: () => {
                                    onAccountChange?.(acc.address);
                                } })] }, acc.address))) })] })] }));
export default Settings;
//# sourceMappingURL=settings.js.map