import React, { forwardRef } from 'react';
import './CustomCheckbox.scss';

type CheckboxProps = {
    onChange: (checked: boolean) => void
    isLink?: boolean
    htmlFor?: string
    label?: any
    id?: string
    name?: string
    checked?: boolean
    indeterminate?: boolean
    required?: boolean
    hasError?: any
    disabled?: boolean
    checkedBackgroundColor?: string
    checkmarkColor?: string
    borderColor?: string
    marginRight?: string
}

const CustomCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(
    (
        {
            required = false,
            checked,
            indeterminate = false,
            onChange,
            disabled = false,
            hasError = false,
            label,
            id = (Math.random() + 1).toString(36).substring(7),
            name,
            isLink,
            checkedBackgroundColor = '#61C765',
            checkmarkColor = '#FFFFFF',
            borderColor = '#040059',
            marginRight = '2.5rem',
        },
        ref
    ) => {
        const checkmarkSvg = `<svg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'><path d='M1 5L4.2 8L11 1' stroke='${checkmarkColor}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>`;
        const dashSvg = `<svg xmlns='http://www.w3.org/2000/svg' width='10' height='2' viewBox='0 0 10 2'><rect width='10' height='2' rx='1' fill='${checkmarkColor}'/></svg>`;

        const isFilled = checked || indeterminate;

        const checkboxStyle: React.CSSProperties = {
            // Base rules — always applied, so the box is always visible
            appearance: 'none',
            WebkitAppearance: 'none',
            MozAppearance: 'none',
            width: '20px',
            height: '20px',
            borderRadius: '5px',
            border: `1.5px solid ${isFilled ? checkedBackgroundColor : (hasError ? '#E15554' : borderColor)}`,
            backgroundColor: '#FFFFFF',
            accentColor: checkedBackgroundColor,
            marginRight,
            flexShrink: 0,
            cursor: disabled ? 'not-allowed' : 'pointer',
            opacity: disabled ? 0.5 : 1,

            // Fill/icon overrides
            ...(isFilled
                ? {
                    backgroundColor: checkedBackgroundColor,
                    backgroundImage: `url("data:image/svg+xml,${encodeURIComponent(
                        indeterminate && !checked ? dashSvg : checkmarkSvg
                    )}")`,
                    backgroundRepeat: 'no-repeat',
                    backgroundPosition: 'center',
                }
                : {}),
        };

        return (
            <div className="checkbox-terms--wrapper">
                <input
                    ref={ref}
                    disabled={disabled}
                    checked={checked}
                    type="checkbox"
                    id={id}
                    name={name}
                    required={required}
                    className={`checkbox  ${hasError && 'hasError'}`}
                    style={checkboxStyle}
                    onChange={(e) => onChange(e.target.checked)}
                />

                {label && isLink && (
                    <label htmlFor={id}>
                        <a href="#" target="_blank">{label}</a>
                    </label>
                )}

                {label && !isLink && <label htmlFor={id}>{label}</label>}
                {hasError && <p className={'error-message'}>{hasError}</p>}
            </div>
        );
    }
);

CustomCheckbox.displayName = 'CustomCheckbox';

export default CustomCheckbox;