"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.RgbPicker = void 0;
const react_1 = __importStar(require("react"));
const inlines_1 = require("inlines");
const utils_1 = require("./utils");
const Absolute = (0, inlines_1.styled)('div', {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
});
const GradientX = (0, inlines_1.styled)(Absolute, {
    background: 'linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0))',
});
const GradientY = (0, inlines_1.styled)(Absolute, {
    background: 'linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0))',
});
const Pointer = ({ x, y }) => {
    return (react_1.default.createElement("div", { style: {
            position: 'absolute',
            left: `${x * 100}%`,
            top: `${y * 100}%`,
            transform: `translate3d(-50%,-50%,0)`,
        } },
        react_1.default.createElement("div", { style: {
                border: '2px solid white',
                color: 'rgba(0,0,0,0.4)',
                boxShadow: '0px 0px 2px currentColor, inset 0px 0px 2px currentColor',
                height: 8,
                width: 8,
                borderRadius: 4,
            } })));
};
const preventBehavior = (e) => {
    e.preventDefault();
};
const preventBodyScroll = () => {
    document.addEventListener('touchmove', preventBehavior, {
        passive: false,
    });
};
const onTouchStart = () => {
    preventBodyScroll();
};
const onTouchEnd = (e) => {
    document.removeEventListener('touchmove', preventBehavior);
};
const RgbPicker = ({ hue, rgb, onChange, style }) => {
    const { x, y } = (0, utils_1.rgbToXY)(rgb, hue);
    const xRef = (0, react_1.useRef)(x);
    const onDown = (e) => {
        const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
        const onMove = ({ clientX, clientY }) => {
            let x = (clientX - left) / width;
            let y = (clientY - top) / height;
            if (x > 1)
                x = 1;
            if (x < 0)
                x = 0;
            if (y > 1)
                y = 1;
            if (y < 0)
                y = 0;
            const rgb = (0, utils_1.xyToRgb)(x, y, hue);
            xRef.current = x;
            onChange(rgb);
        };
        const onUp = (e) => {
            onMove(e);
            removeEventListener('mousemove', onMove);
            removeEventListener('mouseup', onUp);
        };
        addEventListener('mousemove', onMove);
        addEventListener('mouseup', onUp);
        onMove(e);
    };
    const onTouchMoveHandler = (e) => {
        e.preventDefault();
        const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
        const onMove = ({ clientX, clientY }) => {
            let x = (clientX - left) / width;
            let y = (clientY - top) / height;
            if (x > 1)
                x = 1;
            if (x < 0)
                x = 0;
            if (y > 1)
                y = 1;
            if (y < 0)
                y = 0;
            const rgb = (0, utils_1.xyToRgb)(x, y, hue);
            xRef.current = x;
            onChange(rgb);
        };
        onMove(e.touches[0]);
    };
    return (react_1.default.createElement("div", { onTouchStart: onTouchStart, onTouchMove: onTouchMoveHandler, onTouchEnd: onTouchEnd, onMouseDown: onDown, style: {
            position: 'relative',
            width: '100%',
            flexGrow: 1,
            background: `rgb(${hue.join(',')})`,
            borderRadius: 4,
            overflow: 'hidden',
            transform: 'translate3d(0,0,0)',
            ...style,
        } },
        react_1.default.createElement(GradientX, null,
            react_1.default.createElement(GradientY, null,
                react_1.default.createElement(Pointer, { x: y === 1 ? xRef.current : x, y: y })))));
};
exports.RgbPicker = RgbPicker;
//# sourceMappingURL=RgbPicker.js.map