"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorPicker = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const react_1 = tslib_1.__importDefault(require("react"));
const react_color_1 = require("react-color");
const common_1 = require("react-color/lib/components/common");
const react_draggable_1 = tslib_1.__importDefault(require("react-draggable"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const ColorPicker = (props) => {
    const [color, setColor] = react_1.default.useState(props.value);
    const onChange = (data) => {
        setColor(data.hex);
    };
    const onApply = (event) => {
        event.stopPropagation();
        if (color) {
            props.onChange(color);
        }
    };
    const onCancel = (event) => {
        event.stopPropagation();
        props.onClose();
    };
    return ((0, jsx_runtime_1.jsx)(core_1.ClickAwayListener, { onClickAway: props.onClose, children: (0, jsx_runtime_1.jsx)(react_draggable_1.default, { defaultPosition: props.position, children: (0, jsx_runtime_1.jsx)(EditStackColorDialogDiv, { "data-testid": "ColorPickerLayer-root", children: (0, jsx_runtime_1.jsxs)(core_1.Paper, { children: [(0, jsx_runtime_1.jsx)(CustomColorPicker, { onChange: onChange, color: color || "", "data-testid": `ColorPickerDialog-root` }), (0, jsx_runtime_1.jsx)(StyledWrapper, { children: (0, jsx_runtime_1.jsx)(StyledTextField, { variant: "outlined", value: color, onChange: (event) => {
                                    setColor(event.target.value);
                                }, InputProps: {
                                    endAdornment: (0, jsx_runtime_1.jsx)(core_1.InputAdornment, { position: "end", children: "Hex" }),
                                }, "data-testid": "ColorPickerLayer-colorInput" }) }), (0, jsx_runtime_1.jsxs)(StyledButtonGroup, { children: [(0, jsx_runtime_1.jsx)(core_1.Link, { onClick: onCancel, children: "Cancel" }), (0, jsx_runtime_1.jsx)(core_1.Button, { color: "primary", variant: "contained", onClick: onApply, children: "Apply" })] })] }) }) }) }));
};
exports.ColorPicker = ColorPicker;
function rgb2hsv({ r, g, b }) {
    let rr, gg, bb, h = 0, s = 0;
    let rabs = r / 255;
    let gabs = g / 255;
    let babs = b / 255;
    let v = Math.max(rabs, gabs, babs);
    let diff = v - Math.min(rabs, gabs, babs);
    const diffc = (c) => (v - c) / 6 / diff + 1 / 2;
    const percentRoundFn = (num) => Math.round(num * 100) / 100;
    if (diff === 0) {
        h = s = 0;
    }
    else {
        s = diff / v;
        rr = diffc(rabs);
        gg = diffc(gabs);
        bb = diffc(babs);
        if (rabs === v) {
            h = bb - gg;
        }
        else if (gabs === v) {
            h = 1 / 3 + rr - bb;
        }
        else if (babs === v) {
            h = 2 / 3 + gg - rr;
        }
        if (h < 0) {
            h += 1;
        }
        else if (h > 1) {
            h -= 1;
        }
    }
    return {
        h: Math.round(h * 360),
        s: percentRoundFn(s * 100),
        v: percentRoundFn(v * 100),
    };
}
function rgbToHsl(props) {
    let r = props.r / 255, g = props.g / 255, b = props.b / 255;
    let max = Math.max(r, g, b), min = Math.min(r, g, b);
    let h = (max + min) / 2, s = (max + min) / 2, l = (max + min) / 2;
    if (max === min) {
        h = s = 0;
    }
    else {
        let d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch (max) {
            case r:
                h = (g - b) / d + (g < b ? 6 : 0);
                break;
            case g:
                h = (b - r) / d + 2;
                break;
            case b:
                h = (r - g) / d + 4;
                break;
        }
        h /= 6;
    }
    return { h, s, l };
}
const CustomColorPicker = (0, react_color_1.CustomPicker)(({ hsl, rgb, onChange }) => {
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onChange && ((0, jsx_runtime_1.jsx)(StyledSaturation, { children: (0, jsx_runtime_1.jsx)(common_1.Saturation, { hsl: hsl || rgbToHsl(rgb || { r: 0, g: 0, b: 0 }), hsv: rgb2hsv(rgb || { r: 0, g: 0, b: 0 }), onChange: onChange }) })), (0, jsx_runtime_1.jsx)(CustomColorPickerRender, { children: onChange && ((0, jsx_runtime_1.jsx)(StyledHueRender, { children: (0, jsx_runtime_1.jsx)(common_1.Hue, { hsl: hsl || rgbToHsl(rgb || { r: 0, g: 0, b: 0 }), onChange: onChange }) })) })] }));
});
const EditStackColorDialogDiv = styled_components_1.default.div `
    position: absolute;
    z-index: 3;
`;
const StyledButtonGroup = styled_components_1.default.div `
    padding: 16px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 10px;
    justify-content: flex-end;

    > *:first-child {
        margin-right: 10px;
    }
`;
const StyledHueRender = styled_components_1.default.div `
    height: 24px;
    position: relative;

    > div {
        padding: 8px 0;

        .hue-horizontal {
            border-radius: 8px;

            > div > div {
                margin-top: 0 !important;
                background: #4050a6 !important;
                transform: translateX(-12px) translateY(-8px) !important;
                width: 24px !important;
                height: 24px !important;
                box-shadow: 0px 2px 4px rgba(39, 41, 50, 0.1) !important;
                border-radius: 50% !important;
                border: solid 2px #fff;
            }
        }
    }
`;
const StyledSaturation = styled_components_1.default.div `
    width: 272px;
    height: 190px;
    position: relative;
`;
const CustomColorPickerRender = styled_components_1.default.div `
    padding: 8px 16px;
`;
const StyledTextField = (0, styled_components_1.default)(core_1.TextField) `
    &.MuiTextField-root input {
        background: #fcfcfe !important;

        //styleName: text/Inter Regular 14px;

        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0em;
        text-align: left;

        color: rgba(39, 41, 50, 0.7);
    }

    &.MuiTextField-root .MuiOutlinedInput-notchedOutline {
        border: 1px solid rgba(39, 41, 50, 0.2);
        box-sizing: border-box;
        border-radius: 4px;
    }

    .MuiInputAdornment-root .MuiTypography-body1 {
        //styleName: text/Inter Medium 12px;

        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 17px;
        letter-spacing: 0px;
        text-align: center;

        color: rgba(39, 41, 50, 0.4);
    }
`;
const StyledWrapper = styled_components_1.default.div `
    padding: 8px 16px;
    width: 272px;
`;
//# sourceMappingURL=ColorPicker.js.map