import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useState, useEffect } from 'react';
import styled, { css } from 'styled-components';
import { hideVisually, parseToHsl, parseToRgb } from 'polished';
import { withTestIds } from '../../utils';
import FormField from '../FormField';
import { defaultThemeProp } from '../../theme';
import { StyledFormControl } from '../FormControl';
import Flex from '../Flex';
import { useConsolidatedRef, useUID, useOuterEvent, useTestIds } from '../../hooks';
import { getColorPickerTestIds } from './ColorPicker.test-ids';
const StyledColorPicker = styled.div(({ theme, swatchOnly }) => {
    const size = theme.components.input.height;
    const borderWidth = theme.components['form-control']['border-width'];
    return css `
      ${StyledFormControl} {
        overflow: hidden;
        text-transform: uppercase;
        ${!swatchOnly &&
        css `
          min-width: 8rem;
        `}

        ${!swatchOnly &&
        css `
          padding-inline-end: ${theme.base.spacing};
        `}

        &:focus-within {
          box-shadow: ${theme.base.shadow.focus};
          border: none;
        }

        & > input {
          ${hideVisually}

          & + div {
            height: calc(${size} - (2 * ${borderWidth}));

            ${swatchOnly
        ? css `
                  width: calc(${size} - (2 * ${borderWidth}));
                `
        : css `
                  min-width: calc(${size} - ${borderWidth});
                  margin-inline-end: ${theme.base.spacing};
                  border-inline-end: ${borderWidth} solid
                    ${theme.components['form-control']['border-color']};
                `}
          }

          &:focus + div {
            width: ${size};
            height: ${size};
          }
        }

        & input {
          height: 2rem !important;
          min-height: 2rem;
          color: #000000 !important;
          background-color: #ffffff !important;
          font-size: 0.8125rem !important;
          font-family: ${theme.base['font-family']};

          & + label {
            font-weight: 600;
            color: rgba(0, 0, 0, 0.6) !important;
            font-size: 0.8125rem !important;
            font-family: ${theme.base['font-family']};
          }
        }
      }
    `;
});
StyledColorPicker.defaultProps = defaultThemeProp;
export default withTestIds(forwardRef(function ColorPicker(props, ref) {
    const uid = useUID();
    const { testId, id = uid, value = '#000000', label, info, disabled, status, required, readOnly, labelHidden, swatchOnly = false, inline, onClick, onChange, onBeforeClose, additionalInfo, ...restProps } = props;
    const testIds = useTestIds(testId, getColorPickerTestIds);
    const inputRef = useConsolidatedRef(ref);
    const [showColorPicker, setShowColorPicker] = useState(false);
    const hideColorPicker = () => {
        if (showColorPicker) {
            onBeforeClose?.();
        }
        setShowColorPicker(false);
    };
    useOuterEvent('mousedown', [inputRef], hideColorPicker);
    useEffect(() => {
        if (showColorPicker) {
            inputRef?.current?.focus();
            inputRef?.current?.click();
        }
    }, [showColorPicker]);
    const onChangeHandler = (e) => {
        const color = e.target.value;
        const { red: r, green: g, blue: b } = parseToRgb(color);
        const { hue: h, saturation: s, lightness: l } = parseToHsl(color);
        onChange?.({
            hex: color,
            rgb: { r, g, b },
            hsl: { h, s, l }
        }, e);
    };
    return (_jsx(FormField, { testId: testIds, inline: inline, container: inline ? { justify: 'between' } : undefined, as: StyledColorPicker, id: id, label: label, labelHidden: labelHidden, swatchOnly: swatchOnly, info: info, disabled: disabled, status: status, required: required, additionalInfo: additionalInfo, children: _jsxs(Flex, { container: { alignItems: 'center' }, item: swatchOnly ? { alignSelf: 'start' } : undefined, as: StyledFormControl, disabled: disabled, status: status, required: required, readOnly: readOnly, onClick: readOnly || disabled ? undefined : () => setShowColorPicker(true), children: [_jsx("input", { "data-testid": testIds.control, ...restProps, id: id, type: readOnly ? undefined : 'color', ref: inputRef, value: value, disabled: disabled, required: required, readOnly: readOnly, onChange: onChangeHandler }), _jsx("div", { style: { backgroundColor: value } }), !swatchOnly && value] }) }));
}), getColorPickerTestIds);
//# sourceMappingURL=ColorPicker.js.map