import * as React from 'react';
import {Switch} from 'antd';
import {INTENT, joinClassNames} from '../../index';

import * as styles from './switcher.m.scss';
import {getIntentThemeKey} from '../../utils/getIntentThemeKey';

type IntentClassNames = 'switcherIntentDefault' | 'switcherIntentPrimary' | 'switcherIntentDanger';

type SwitcherChange = (checked: boolean, event: MouseEvent) => void;

export interface ISwitcherProps {
    name?: string;
    prefixCls?: string;
    className?: string;
    size?: 'small' | 'default';
    checked?: boolean;
    defaultChecked?: boolean;
    onChange?: SwitcherChange;
    onClick?: SwitcherChange;
    checkedChildren?: React.ReactNode;
    unCheckedChildren?: React.ReactNode;
    disabled?: boolean;
    loading?: boolean;
    autoFocus?: boolean;
    style?: React.CSSProperties;
    title?: string;
    leftText?: React.ReactNode;
    rightText?: React.ReactNode;
    'data-qaid'?: string;
    intent?: INTENT.DEFAULT | INTENT.DANGER | INTENT.PRIMARY;
}

export class Switcher extends React.Component<ISwitcherProps> {
    static defaultProps = {
        intent: INTENT.DEFAULT
    };

    override render () {
        const {leftText, rightText, intent = INTENT.DEFAULT, ...otherProps} = this.props;
        const intentThemeKey = getIntentThemeKey<IntentClassNames>('switcher', intent);

        const className = joinClassNames(
            styles.container,
            styles[intentThemeKey]
        );

        const leftSpan = joinClassNames(
            styles.spanStyle,
            styles.left
        );

        const rightSpan = joinClassNames(
            styles.spanStyle,
            styles.right
        );

        return (
            <span className={className} data-component-id={'Switcher'}>
                {leftText && <span className={leftSpan}>{leftText}</span>}
                <Switch {...otherProps}/>
                {rightText && <span className={rightSpan}>{rightText}</span>}
            </span>
        );
    }
}