"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Inputs = void 0;
const inlines_1 = require("inlines");
const react_1 = __importDefault(require("react"));
const TextInput_1 = require("../Input/TextInput");
const NumberInput_1 = require("../Input/NumberInput");
const utils_1 = require("./utils");
const hexSuggest = (v) => v.padEnd(6, v.slice(-2) || '0');
const HexInput = ({ r, g, b, onRgbChange }) => {
    return (react_1.default.createElement(TextInput_1.TextInput, { placeholder: "000000", style: { marginLeft: 8, flexGrow: 4, flexBasis: 80, marginBottom: 8 }, value: `${(0, utils_1.toHex)(r)}${(0, utils_1.toHex)(g)}${(0, utils_1.toHex)(b)}`.toUpperCase(), onChange: (v) => {
            const str = hexSuggest(v);
            const r = parseInt(str.substring(0, 2), 16);
            const g = parseInt(str.substring(2, 4), 16);
            const b = parseInt(str.substring(4, 6), 16);
            onRgbChange([r, g, b]);
        } }));
};
const NumberInput = (0, inlines_1.styled)((props) => react_1.default.createElement(NumberInput_1.NumberInput, { ...props }), {
    marginLeft: 8,
    width: 65,
    flexShrink: 0,
    marginBottom: 8,
    flexGrow: 1,
});
const max225 = (v) => (v ? Math.round((0, utils_1.minmax)(0, v, 255)) : v);
const max100 = (v) => (v ? Math.round((0, utils_1.minmax)(0, v, 100)) : v);
const Inputs = ({ rgb, alpha, onRgbChange, onAlphaChange }) => {
    let [r, g, b] = rgb;
    r = Math.round(r);
    b = Math.round(b);
    g = Math.round(g);
    return (react_1.default.createElement("div", { style: {
            display: 'flex',
            flexWrap: 'wrap',
            marginLeft: -8,
            marginBottom: -8,
        } },
        react_1.default.createElement(HexInput, { r: r, g: g, b: b, onRgbChange: onRgbChange }),
        react_1.default.createElement("div", { style: { display: 'flex', flexGrow: 1 } },
            react_1.default.createElement(NumberInput, { type: "number", value: r, onChange: (r) => onRgbChange([(0, utils_1.minmax)(0, r, 255), g, b]), 
                //   transform={max225}
                placeholder: "R" }),
            react_1.default.createElement(NumberInput, { type: "number", value: g, onChange: (g) => onRgbChange([r, (0, utils_1.minmax)(0, g, 255), b]), 
                //   transform={max225}
                placeholder: "G" }),
            react_1.default.createElement(NumberInput, { type: "number", value: b, onChange: (b) => onRgbChange([r, g, (0, utils_1.minmax)(0, b, 255)]), 
                //   transform={max225}
                placeholder: "B" }),
            react_1.default.createElement(NumberInput, { type: "number", value: Math.round(alpha * 100), onChange: (n) => onAlphaChange(n / 100), 
                //   transform={max100}
                max: 100, placeholder: "A" }))));
};
exports.Inputs = Inputs;
//# sourceMappingURL=Inputs.js.map