/**
 * The password input element
 *
 * @author Platon Fedorov
 * @date 2020-11-27
 */
import * as React from 'react';

import {Input} from '../../index';
import {Props} from './Input.types';

type IState = {
    suffix: string;
    type: string;
}

export class InputPassword extends React.Component<Props, IState> {
    override state = {
        suffix: 'eye-crossed',
        type: 'password'
    };

    toggleClick = () => {
        this.setState((prevState) => {
            return {
                suffix: (prevState.suffix === 'eye') ? 'eye-crossed' : 'eye',
                type: (prevState.type === 'text') ? 'password' : 'text'
            };
        });
    }

    override render () {
        const {suffix, onSuffixClick, type, ...props} = this.props;

        return (
            <Input
                type={this.state.type}
                suffix={this.state.suffix}
                onSuffixClick={this.toggleClick}
                {...props}
            />
        );
    }
}