import type { FC } from 'react';
import React from 'react';
import cx from 'classnames';

const CLASS_NAME = 'ArtistProfileCheckable';
const CLASS_NAME_WRAPPER = `${CLASS_NAME}-item-wrapper`;

interface Props {
    id: string;
    name: string;
    onChange?: () => void;
    checked?: boolean;
    overClick?: boolean;
    children?: React.ReactNode;
}

const ArtistProfileCheckable: FC<Props> = ({
    id,
    name,
    onChange,
    checked,
    children,
    overClick,
}) => (
    <div
        role="checkbox"
        aria-checked={checked}
        tabIndex={0}
        className={cx(CLASS_NAME_WRAPPER, {
            [`${CLASS_NAME_WRAPPER}-checked`]: !!checked,
            [`${CLASS_NAME_WRAPPER}-overclick`]: !!overClick,
        })}
        onClick={overClick ? onChange : undefined}
        onKeyDown={overClick ? onChange : undefined}
    >
        <div className={`${CLASS_NAME}-item-content`}>{children}</div>
        <div className={`${CLASS_NAME}-item-check`}>
            <div className={`${CLASS_NAME}-check-round`}>
                <input
                    id={id}
                    className={`${CLASS_NAME}-input`}
                    readOnly={overClick}
                    onChange={overClick ? undefined : onChange}
                    name={name}
                    checked={checked}
                    type="radio"
                />
                <label htmlFor={id} className={`${CLASS_NAME}-label`} />
            </div>
        </div>
    </div>
);

export default ArtistProfileCheckable;