import React from 'react';
import { colors } from '../colors';
import { themeColors } from '../colorExtractor';

interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
    checked?: boolean;
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
}

const Checkbox: React.FC<CheckboxProps> = ({ checked = false, onChange, onClick, ...props }) => {
    const [hovered, setHovered] = React.useState(false);
    const boxStyle: React.CSSProperties | undefined = checked
        ? {
            backgroundColor: hovered ? colors.primary.light : colors.primary.default,
            borderColor: hovered ? colors.primary.light : colors.primary.default,
            boxShadow: `0 0 0 ${hovered ? 3 : 2}px ${colors.primary.opacity(hovered ? 0.3 : 0.2)}`,
        }
        : undefined;
    const boxClassName = [
        'flex items-center justify-center transition-all duration-200 border-2',
        !checked && (hovered ? 'bg-gray-500 border-gray-500' : 'bg-transparent border-gray-500'),
    ]
        .filter(Boolean)
        .join(' ');

    return (
        <label
            className="relative inline-flex items-center justify-center cursor-pointer"
            style={{ width: 18, height: 18, flexShrink: 0 }}
            onClick={(e) => e.stopPropagation()}
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
        >
            <input
                type="checkbox"
                className="absolute opacity-0 w-0 h-0"
                checked={checked}
                onChange={onChange}
                onClick={onClick}
                {...props}
            />
            <div
                className={boxClassName}
                style={{
                    width: 18,
                    height: 18,
                    borderRadius: themeColors.borderRadius.component,
                    ...boxStyle,
                }}
            >
                <svg
                    width="12"
                    height="10"
                    viewBox="0 0 12 10"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="transition-all duration-200"
                    style={{
                        opacity: checked ? 1 : 0,
                        transform: checked ? 'scale(1)' : 'scale(0.5)',
                    }}
                >
                    <path
                        d="M1 5L4.5 8.5L11 1"
                        stroke="white"
                        strokeWidth="2.5"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                    />
                </svg>
            </div>
        </label>
    );
};

export default Checkbox;