import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import flow from 'lodash/flow';
import { withNamespaces, Trans } from 'react-i18next';

import * as actionCreators from '../../actions/login';
import logo from '../../components/ui/svg/logo.svg';
import Toasts from '../../components/Toasts';
import Footer from '../../components/ui/Footer';
import Form from './Form';

import './Login.css';
import '../../components/ui/Tabler.css';

class Login extends Component {
    state = {
        isForgotPasswordVisible: false,
    };

    handleSubmit = ({ username: name, password }) => {
        this.props.processLogin({ name, password });
    };

    toggleText = () => {
        this.setState(prevState => ({
            isForgotPasswordVisible: !prevState.isForgotPasswordVisible,
        }));
    };

    render() {
        const { processingLogin } = this.props.login;
        const { isForgotPasswordVisible } = this.state;

        return (
            <div className="login">
                <div className="login__form">
                    <div className="text-center mb-6">
                        <img src={logo} className="h-6" alt="logo" />
                    </div>
                    <Form onSubmit={this.handleSubmit} processing={processingLogin} />
                    <div className="login__info">
                        <button
                            type="button"
                            className="btn btn-link login__link"
                            onClick={this.toggleText}
                        >
                            <Trans>forgot_password</Trans>
                        </button>
                        {isForgotPasswordVisible && (
                            <div className="login__message">
                                <Trans
                                    components={[
                                        <a
                                            href="https://github.com/AdguardTeam/AdGuardHome/wiki/Configuration#password-reset"
                                            key="0"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                        >
                                            link
                                        </a>,
                                    ]}
                                >
                                    forgot_password_desc
                                </Trans>
                            </div>
                        )}
                    </div>
                </div>
                <Footer />
                <Toasts />
            </div>
        );
    }
}

Login.propTypes = {
    login: PropTypes.object.isRequired,
    processLogin: PropTypes.func.isRequired,
};

const mapStateToProps = ({ login, toasts }) => ({ login, toasts });

export default flow([
    withNamespaces(),
    connect(
        mapStateToProps,
        actionCreators,
    ),
])(Login);