import { Button } from '../button';
import { classNames, optionClassNames, stateClassNames, States, Size, Roundness, FillMode } from '../misc';

import { KendoComponent } from '../_types/component';
import { SIGNATURE_FOLDER_NAME, SIGNATURE_MODULE_NAME } from './constants';
export const SIGNATURE_CLASSNAME = `k-signature`;

const states = [
    States.hover,
    States.focus,
    States.valid,
    States.invalid,
    States.disabled
];

const options = {
    size: [ Size.undefined, Size.small, Size.medium, Size.large ],
    rounded: [ Roundness.undefined, Roundness.none, Roundness.small, Roundness.medium, Roundness.large, Roundness.full ],
    fillMode: [ FillMode.undefined, FillMode.solid, FillMode.flat, FillMode.outline ]
};

export type KendoSignatureOptions = {
    size?: (typeof options.size)[number] | null;
    rounded?: (typeof options.rounded)[number] | null;
    fillMode?: (typeof options.fillMode)[number] | null;
};

export type KendoSignatureProps = KendoSignatureOptions & {
    maximized?: boolean;
};

export type KendoSignatureState = { [K in (typeof states)[number]]?: boolean };

const defaultOptions = {};

export const Signature: KendoComponent<KendoSignatureProps & KendoSignatureState & React.HTMLAttributes<HTMLDivElement>> = (
    props: KendoSignatureProps &
        KendoSignatureState &
        React.HTMLAttributes<HTMLDivElement>
) => {
    const {
        size,
        rounded,
        fillMode,
        hover,
        focus,
        valid,
        invalid,
        disabled,
        maximized,
        ...other
    } = props;

    return (
        <div
            {...other}
            className={classNames(
                props.className,
                SIGNATURE_CLASSNAME,
                'k-input',
                optionClassNames(SIGNATURE_CLASSNAME, {
                    size
                }),
                optionClassNames('k-input', {
                    fillMode,
                    rounded
                }),
                stateClassNames(SIGNATURE_CLASSNAME, {
                    hover,
                    focus,
                    valid,
                    invalid,
                    disabled,
                }),
                {
                    ['k-signature-maximized']: maximized,
                }
            )}>
            <canvas className="k-signature-canvas" role="img" aria-label="Signature" tabIndex={0}></canvas>
            <div
                className={classNames(
                    'k-signature-actions',
                    'k-signature-actions-top'
                )}>
                <Button
                    className={classNames(
                        'k-signature-action',
                        'k-signature-maximize',
                        maximized ? 'k-hidden' : ''
                    )}
                    icon="hyperlink-open"
                    rounded={rounded}
                    size={size}
                    fillMode="flat"
                    aria-label="Maximize"
                />
                <Button
                    className={classNames(
                        'k-signature-action',
                        'k-signature-minimize',
                        maximized ? '' : 'k-hidden'
                    )}
                    icon="hyperlink-open"
                    rounded={rounded}
                    size={size}
                    fillMode="flat"
                    aria-label="Minimize"
                />
            </div>
            <div className="k-signature-line"></div>
            <div
                className={classNames(
                    'k-signature-actions',
                    'k-signature-actions-bottom'
                )}>
                <Button
                    className={classNames(
                        'k-signature-action',
                        'k-signature-clear',
                    )}
                    icon="x"
                    rounded={props.rounded}
                    size={props.size}
                    fillMode="flat"
                    aria-label="Clear"
                />
            </div>
        </div>
    );
};

Signature.states = states;
Signature.options = options;
Signature.className = SIGNATURE_CLASSNAME;
Signature.defaultOptions = defaultOptions;
Signature.moduleName = SIGNATURE_MODULE_NAME;
Signature.folderName = SIGNATURE_FOLDER_NAME;

Signature.ariaSpec = {
    selector: '.k-signature',
    rules: [
        { selector: '.k-signature-canvas', attribute: 'role=img', usage: 'Sets canvas role to img.' },
        { selector: '.k-signature-canvas', attribute: 'aria-label', usage: 'Announces the purpose of the Signature.' },
        { selector: '.k-signature-action', attribute: 'nodeName=button', usage: 'Renders action as a button element.' },
        { selector: '.k-signature-action', attribute: 'aria-label', usage: 'Announces the purpose of the action button.' },
    ]
};

export default Signature;