"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const register_1 = __importDefault(require("../register"));
const antd_1 = require("antd");
const loading_1 = __importDefault(require("components/share/loading"));
const edit_table_1 = __importDefault(require("lib/hooks/edit-table"));
const colorpicker_1 = require("@cocalc/frontend/colorpicker");
const icon_1 = require("@cocalc/frontend/components/icon");
const A_1 = __importDefault(require("components/misc/A"));
const avatar_1 = require("components/account/avatar");
const profile_1 = __importDefault(require("lib/hooks/profile"));
const use_customize_1 = __importDefault(require("lib/use-customize"));
const font_color_1 = require("@cocalc/frontend/account/avatar/font-color");
const gravatar_url_1 = __importDefault(require("@cocalc/frontend/account/gravatar-url"));
const antd_img_crop_1 = __importDefault(require("@cocalc/antd-img-crop"));
const icons_1 = require("@ant-design/icons");
const code_1 = __importDefault(require("components/landing/code"));
const image_to_data_1 = __importDefault(require("@cocalc/frontend/misc/image-to-data"));
const desc = {
    color: `Select a color, which will be used for your cursor and background of
your name when editing documents with other people. Your color is also
used for the background of your avatar in case you do not select an
image below.`,
    image: `You can use an image for your avatar, instead of using the
first letter of your first name and the color above.`,
};
(0, register_1.default)({
    path: "account/avatar",
    title: "Avatar",
    icon: "user",
    desc: "Configure your avatar's cursor color and profile image.",
    search: desc,
    Component: () => {
        const { account } = (0, use_customize_1.default)();
        const profile = (0, profile_1.default)({ account_id: account?.account_id });
        const { edited, original, setEdited, Save } = (0, edit_table_1.default)({
            accounts: { profile: null, email_address: null },
        });
        const [useImage, setUseImage] = (0, react_1.useState)(undefined);
        (0, react_1.useEffect)(() => {
            if (useImage == null && original != null) {
                setUseImage(!!original.profile.image);
            }
        }, [original]);
        if (original == null || edited == null) {
            return (0, jsx_runtime_1.jsx)(loading_1.default, {});
        }
        return ((0, jsx_runtime_1.jsxs)(antd_1.Space, { direction: "vertical", children: [(0, jsx_runtime_1.jsx)(Save, {}), (0, jsx_runtime_1.jsxs)(antd_1.Row, { children: [(0, jsx_runtime_1.jsx)(antd_1.Col, { md: 6, sm: 24, children: (0, jsx_runtime_1.jsxs)("div", { style: { marginRight: "15px" }, children: [(0, jsx_runtime_1.jsxs)("h3", { style: { marginTop: "10px" }, children: [(0, jsx_runtime_1.jsx)(avatar_1.DisplayAvatar, { style: { marginRight: "10px" }, size: 40, color: edited.profile.color, image: edited.profile.image, letter: profile?.first_name?.[0] }), "Preview"] }), (0, jsx_runtime_1.jsx)("br", {}), profile && ((0, jsx_runtime_1.jsxs)("span", { style: {
                                            fontSize: "12pt",
                                            backgroundColor: edited.profile.color,
                                            color: (0, font_color_1.avatar_fontcolor)(edited.profile.color),
                                            padding: "0 5px",
                                        }, children: [profile?.first_name, " ", profile?.last_name] })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(avatar_1.DisplayAvatar, { size: 120, color: edited.profile.color, image: edited.profile.image, letter: profile?.first_name?.[0] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666" }, children: "(It will take a while for your avatar to update at the top of the page, even after you save it.)" })] }) }), (0, jsx_runtime_1.jsx)(antd_1.Col, { md: 18, sm: 24, children: (0, jsx_runtime_1.jsxs)(antd_1.Space, { direction: "vertical", children: [(0, jsx_runtime_1.jsxs)("h3", { children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "colors" }), " Color"] }), (0, jsx_runtime_1.jsxs)("div", { children: [desc.color, " ", (0, jsx_runtime_1.jsx)(A_1.default, { href: "/config/account/name", children: "Change your name." })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: "100%" }, children: (0, jsx_runtime_1.jsx)(colorpicker_1.ColorPicker, { color: edited.profile.color, style: { width: "200px", margin: "auto" }, onChange: (color) => setEdited(color, "profile.color") }) }), (0, jsx_runtime_1.jsxs)("h3", { children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "image" }), " Image"] }), desc.image, (0, jsx_runtime_1.jsx)(antd_1.Checkbox, { checked: useImage, onChange: (e) => {
                                            setUseImage(e.target.checked);
                                            if (!e.target.checked) {
                                                setEdited("", "profile.image");
                                            }
                                        }, children: "Use an Image" }), useImage && ((0, jsx_runtime_1.jsx)(EditImage, { email_address: original.email_address, value: original.email_address &&
                                            edited.profile.image?.includes("gravatar")
                                            ? "gravatar"
                                            : "image", onChange: (image) => {
                                            setEdited(image, "profile.image");
                                        } }))] }) })] })] }));
    },
});
// This is what facebook uses, and it makes
// 40x40 look very good.  It takes about 20KB
// per image.
const AVATAR_SIZE = 160;
function EditImage({ value, email_address, onChange }) {
    return ((0, jsx_runtime_1.jsxs)("div", { style: { marginLeft: "30px" }, children: [(0, jsx_runtime_1.jsx)(antd_1.Radio.Group, { style: { marginBottom: "20px" }, value: value, onChange: (e) => {
                    if (e.target.value == "gravatar") {
                        onChange((0, gravatar_url_1.default)(email_address));
                    }
                    else {
                        onChange("");
                    }
                }, children: (0, jsx_runtime_1.jsxs)(antd_1.Space, { direction: "vertical", children: [(0, jsx_runtime_1.jsxs)(antd_1.Radio, { value: "gravatar", disabled: !email_address, children: ["Use the Gravatar associated to ", (0, jsx_runtime_1.jsx)(code_1.default, { children: email_address })] }), (0, jsx_runtime_1.jsx)(antd_1.Radio, { value: "image", children: "Upload an Image" })] }) }), value == "gravatar" && ((0, jsx_runtime_1.jsx)(antd_1.Alert, { type: "info", style: { maxWidth: "500px" }, message: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Gravatar is a service for using a common avatar across websites. Go to the", " ", (0, jsx_runtime_1.jsx)(A_1.default, { href: "https://gravatar.com", children: "Wordpress Gravatar site" }), " and sign in (or create an account) using ", (0, jsx_runtime_1.jsx)(code_1.default, { children: email_address }), "."] }) })), value == "image" && ((0, jsx_runtime_1.jsx)(antd_img_crop_1.default, { modalTitle: "Edit Profile Image", shape: "round", rotate: true, maxZoom: 5, onModalOk: (file) => {
                    const reader = new FileReader();
                    reader.addEventListener("load", async (e) => {
                        if (!e.target?.result)
                            return; // typescript
                        const src = e.target.result;
                        onChange(await (0, image_to_data_1.default)(src, AVATAR_SIZE, AVATAR_SIZE, "image/png"));
                    }, false);
                    if (typeof file != "object") {
                        // This is for typescript.
                        // latest version of antd-img-crop has file having
                        // some other potential types, but reader.readAsDataURL
                        // doesn't allow some of those types.
                        console.warn("WARNING: unable to read, since avatar is assumed to be a Blob");
                        return;
                    }
                    reader.readAsDataURL(file);
                }, children: (0, jsx_runtime_1.jsxs)(antd_1.Upload.Dragger, { name: "file", children: [(0, jsx_runtime_1.jsx)("p", { className: "ant-upload-drag-icon", children: (0, jsx_runtime_1.jsx)(icons_1.InboxOutlined, {}) }), (0, jsx_runtime_1.jsx)("p", { className: "ant-upload-text", children: "Click or drag image to this area to upload" })] }) }))] }));
}
//# sourceMappingURL=avatar.js.map