import React, { useEffect, useState } from 'react';
import StyledCheckboxLayout from './styles/StyleCheckbox';
import { classNames } from '../types';
export const PHXCheckbox = ({ activeData, checkType = 'default', children, className, disabled, error, errorType, expanded, helpText, id = 'checkbox', label, onChange, register, isLarge = false, title, isShowHelpText = false, stopPropagation = false, inputRef, ...rest }) => {
    const [show, setShow] = useState(false);
    useEffect(() => {
        // @ts-ignore
        setShow(expanded);
    }, [expanded]);
    const handleChange = (e) => {
        setShow(e.target.checked);
        if (onChange) {
            onChange(e);
        }
    };
    const getBorderClasses = (type) => {
        if (type !== 'with-border')
            return '';
        return classNames(isLarge
            ? 'py-2.5 rounded-xl border-[0.75px] border-gray-500 px-4 text-sm font-normal shadow-md hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-2 focus:outline-indigo-500 focus:ring-transparent'
            : 'py-1.5 rounded-lg border-[0.5px] border-gray-500 px-3 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', error && 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50', disabled && 'bg-gray-50');
    };
    const getColorByActiveData = (isWithBorder = false) => {
        const isDangerType = (activeData === null || activeData === void 0 ? void 0 : activeData.activeType) === 'danger' && (activeData === null || activeData === void 0 ? void 0 : activeData.isActive);
        if (isDangerType) {
            return isWithBorder ? `border-[#F53E3E] text-[#F53E3E]` : `text-[#F53E3E]`;
        }
        else {
            return isWithBorder ? 'border-gray-500 text-indigo-800' : 'text-gray-700';
        }
    };
    return (React.createElement("div", { className: className, onClickCapture: (e) => {
            if (stopPropagation)
                e.stopPropagation();
        } },
        React.createElement(StyledCheckboxLayout, { activeData: activeData, id: id }),
        label && (React.createElement("label", { className: classNames(getColorByActiveData(false), isLarge ? 'block text-sm font-normal' : 'block text-xs font-normal') }, label)),
        React.createElement("div", { className: classNames('flex items-center py-1', getBorderClasses(checkType)) },
            React.createElement("div", { className: classNames('flex items-center text-xs font-normal leading-5 hover:cursor-pointer', checkType === 'with-border' && 'flex-1', getColorByActiveData(false)) },
                React.createElement("input", { ...rest, ref: inputRef, className: classNames(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-200 hover:bg-transparent' : getColorByActiveData(true), isLarge
                        ? 'hidden h-6 w-6 rounded-md border-[0.75px] hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'
                        : 'hidden h-4 w-4 rounded border-[0.5px] hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'), id: id, onClick: (e) => {
                        if (stopPropagation)
                            e.stopPropagation();
                    }, onChange: handleChange, ...register, disabled: disabled, type: 'checkbox' }),
                React.createElement("label", { className: classNames('checkbox', checkType === 'with-border' && 'flex-1', disabled && 'disabled', isLarge && 'large'), htmlFor: id, onClick: (e) => {
                        if (stopPropagation)
                            e.stopPropagation();
                    } },
                    React.createElement("span", { className: classNames(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled
                            ? 'border-gray-200 bg-gray-200'
                            : (activeData === null || activeData === void 0 ? void 0 : activeData.activeType) === 'danger' && (activeData === null || activeData === void 0 ? void 0 : activeData.isActive)
                                ? getColorByActiveData(true)
                                : 'border-gray-400', isLarge
                            ? 'icon block h-6 w-6 rounded-md border hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'
                            : 'icon block h-4 w-4 rounded border hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent') }),
                    React.createElement("span", { className: classNames(isLarge ? 'ml-9 text-sm font-normal' : 'ml-7 font-normal', disabled ? 'text-gray-400 hover:bg-transparent' : getColorByActiveData(false), 'block') }, title)))),
        helpText && (show || isShowHelpText) ? (React.createElement("div", { className: classNames(isLarge ? 'pl-9 text-sm text-gray-500' : 'pl-7 text-xs text-gray-500') }, helpText)) : null,
        show && children ? React.createElement("div", { className: classNames(isLarge ? 'ml-9' : 'ml-7') }, children) : React.createElement(React.Fragment, null),
        error && errorType ? (React.createElement("div", { className: 'ml-1 mt-1 flex items-center' },
            React.createElement("svg", { className: classNames(isLarge ? 'mr-2.5 h-5 w-5 text-red-500' : 'mr-2 h-4 w-4 text-red-500'), fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
                React.createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' })),
            React.createElement("p", { className: classNames(isLarge ? 'text-sm text-red-800' : 'text-xs text-red-800') }, errorType === 'required-field' ? 'Vui lòng chọn thông tin' : 'Thông tin đã tồn tại'))) : null));
};
//# sourceMappingURL=Checkbox.js.map