"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var register_1 = __importDefault(require("../register"));
var antd_1 = require("antd");
var loading_1 = __importDefault(require("components/share/loading"));
var edit_table_1 = __importDefault(require("lib/hooks/edit-table"));
var colorpicker_1 = require("@cocalc/frontend/colorpicker");
var icon_1 = require("@cocalc/frontend/components/icon");
var A_1 = __importDefault(require("components/misc/A"));
var avatar_1 = require("components/account/avatar");
var profile_1 = __importDefault(require("lib/hooks/profile"));
var use_customize_1 = __importDefault(require("lib/use-customize"));
var font_color_1 = require("@cocalc/frontend/account/avatar/font-color");
var gravatar_url_1 = __importDefault(require("@cocalc/frontend/account/gravatar-url"));
var antd_img_crop_1 = __importDefault(require("antd-img-crop"));
var icons_1 = require("@ant-design/icons");
var code_1 = __importDefault(require("components/landing/code"));
var desc = {
    color: "Select a color, which will be used for your cursor and background of\nyour name when editing documents with other people. Your color is also\nused for the background of your avatar in case you do not select an\nimage below.",
    image: "You can use an image for your avatar, instead of using the\nfirst 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: function () {
        var _a, _b, _c;
        var account = (0, use_customize_1.default)().account;
        var profile = (0, profile_1.default)({ account_id: account === null || account === void 0 ? void 0 : account.account_id });
        var _d = (0, edit_table_1.default)({
            accounts: { profile: null, email_address: null },
        }), edited = _d.edited, original = _d.original, setEdited = _d.setEdited, Save = _d.Save;
        var _e = __read((0, react_1.useState)(undefined), 2), useImage = _e[0], setUseImage = _e[1];
        (0, react_1.useEffect)(function () {
            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, __assign({ 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, __assign({ md: 6, sm: 24 }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ style: { marginRight: "15px" } }, { children: [(0, jsx_runtime_1.jsxs)("h3", __assign({ 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: (_a = profile === null || profile === void 0 ? void 0 : profile.first_name) === null || _a === void 0 ? void 0 : _a[0] }), "Preview"] })), (0, jsx_runtime_1.jsx)("br", {}), profile && ((0, jsx_runtime_1.jsxs)("span", __assign({ style: {
                                            fontSize: "12pt",
                                            backgroundColor: edited.profile.color,
                                            color: (0, font_color_1.avatar_fontcolor)(edited.profile.color),
                                            padding: "0 5px",
                                        } }, { children: [profile === null || profile === void 0 ? void 0 : profile.first_name, " ", profile === null || profile === void 0 ? void 0 : 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: (_b = profile === null || profile === void 0 ? void 0 : profile.first_name) === null || _b === void 0 ? void 0 : _b[0] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", __assign({ 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, __assign({ md: 18, sm: 24 }, { children: (0, jsx_runtime_1.jsxs)(antd_1.Space, __assign({ 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, __assign({ href: "/config/account/name" }, { children: "Change your name." }))] }), (0, jsx_runtime_1.jsx)("div", __assign({ style: { width: "100%" } }, { children: (0, jsx_runtime_1.jsx)(colorpicker_1.ColorPicker, { color: edited.profile.color, style: { width: "200px", margin: "auto" }, onChange: function (color) { return 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, __assign({ checked: useImage, onChange: function (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 &&
                                            ((_c = edited.profile.image) === null || _c === void 0 ? void 0 : _c.includes("gravatar"))
                                            ? "gravatar"
                                            : "image", onChange: function (image) {
                                            setEdited(image, "profile.image");
                                        } }))] })) }))] })] })));
    },
});
// This is what facebook uses, and it makes
// 40x40 look very good.  It takes about 20KB
// per image.
var AVATAR_SIZE = 160;
function EditImage(_a) {
    var value = _a.value, email_address = _a.email_address, onChange = _a.onChange;
    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { marginLeft: "30px" } }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Radio.Group, __assign({ style: { marginBottom: "20px" }, value: value, onChange: function (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, __assign({ direction: "vertical" }, { children: [(0, jsx_runtime_1.jsxs)(antd_1.Radio, __assign({ 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, __assign({ 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, __assign({ 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, __assign({ modalTitle: "Edit Profile Image", shape: "round", rotate: true, maxZoom: 5, onModalOk: function (file) {
                    var reader = new FileReader();
                    reader.addEventListener("load", function (e) {
                        var _a;
                        if (!((_a = e.target) === null || _a === void 0 ? void 0 : _a.result))
                            return; // typescript
                        var img = new Image();
                        img.src = e.target.result;
                        img.onload = function () {
                            img.width = AVATAR_SIZE;
                            img.height = AVATAR_SIZE;
                            var canvas = document.createElement("canvas");
                            var ctx = canvas.getContext("2d");
                            if (ctx == null) {
                                return;
                            }
                            ctx.clearRect(0, 0, canvas.width, canvas.height);
                            canvas.width = img.width;
                            canvas.height = img.height;
                            ctx.drawImage(img, 0, 0, img.width, img.height);
                            onChange(canvas.toDataURL("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, __assign({ name: "file" }, { children: [(0, jsx_runtime_1.jsx)("p", __assign({ className: "ant-upload-drag-icon" }, { children: (0, jsx_runtime_1.jsx)(icons_1.InboxOutlined, {}) })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "ant-upload-text" }, { children: "Click or drag image to this area to upload" }))] })) })))] })));
}
//# sourceMappingURL=avatar.js.map