import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, ClickAwayListener, Link, Paper, TextField, InputAdornment } from "@material-ui/core";
import React from "react";
import { CustomPicker } from "react-color";
import { Saturation, Hue } from "react-color/lib/components/common";
import ReactDraggable from "react-draggable";
import styled from "styled-components";
export const ColorPicker = (props) => {
    const [color, setColor] = React.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 (_jsx(ClickAwayListener, Object.assign({ onClickAway: props.onClose }, { children: _jsx(ReactDraggable, Object.assign({ defaultPosition: props.position }, { children: _jsx(EditStackColorDialogDiv, Object.assign({ "data-testid": "ColorPickerLayer-root" }, { children: _jsxs(Paper, { children: [_jsx(CustomColorPicker, { onChange: onChange, color: color || "", "data-testid": `ColorPickerDialog-root` }, void 0),
                        _jsx(StyledWrapper, { children: _jsx(StyledTextField, { variant: "outlined", value: color, onChange: (event) => {
                                    setColor(event.target.value);
                                }, InputProps: {
                                    endAdornment: _jsx(InputAdornment, Object.assign({ position: "end" }, { children: "Hex" }), void 0),
                                }, "data-testid": "ColorPickerLayer-colorInput" }, void 0) }, void 0),
                        _jsxs(StyledButtonGroup, { children: [_jsx(Link, Object.assign({ onClick: onCancel }, { children: "Cancel" }), void 0),
                                _jsx(Button, Object.assign({ color: "primary", variant: "contained", onClick: onApply }, { children: "Apply" }), void 0)] }, void 0)] }, void 0) }), void 0) }), void 0) }), void 0));
};
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 {
        var 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 = CustomPicker(({ hex, hsl, rgb, onChange }) => {
    return (_jsxs(_Fragment, { children: [onChange && (_jsx(StyledSaturation, { children: _jsx(Saturation, { hsl: hsl || rgbToHsl(rgb || { r: 0, g: 0, b: 0 }), hsv: rgb2hsv(rgb || { r: 0, g: 0, b: 0 }), onChange: onChange }, void 0) }, void 0)),
            _jsx(CustomColorPickerRender, { children: onChange && (_jsx(StyledHueRender, { children: _jsx(Hue, { hsl: hsl || rgbToHsl(rgb || { r: 0, g: 0, b: 0 }), onChange: onChange }, void 0) }, void 0)) }, void 0)] }, void 0));
});
const EditStackColorDialogDiv = styled.div `
    position: absolute;
    z-index: 3;
`;
const StyledButtonGroup = styled.div `
    padding: 16px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 10px;
    justify-content: flex-end;

    > *:first-child {
        margin-right: 10px;
    }
`;
const StyledHueRender = styled.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.div `
    width: 272px;
    height: 190px;
    position: relative;
`;
const CustomColorPickerRender = styled.div `
    padding: 8px 16px;
`;
const StyledTextField = styled(TextField) `
    &.MuiTextField-root input {
        background: #fcfcfe !important;

        //styleName: text/Inter Regular 14px;
        font-family: Inter;
        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-family: Inter;
        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.div `
    padding: 8px 16px;
    width: 272px;
`;
//# sourceMappingURL=ColorPicker.js.map