import React, { Component } from 'react';
import axios from 'axios';
import PawnedListItem from './PawnedListItem';
import './SearchField.css';

export default class SearchField extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isPawnedEmail: '',
            pawnedList: [],
            intiated: false,
            displayMessage: '',
            displayMessageStyle: ''
        };

        this.onFocus = this.onFocus.bind(this);
        this.onBlur = this.onBlur.bind(this);
        this.checkIsPawned = this.checkIsPawned.bind(this);
        this.breachItems = [];
        this.displayMessage;

    }

    render() {

        if (this.state.pawnedList.length > 0) {
            this.breachItems = this.state.pawnedList.map((breach) => {
                return <PawnedListItem key={breach.Domain} breach={breach} />
            });
        } else {
            this.breachItems = [];
        }

        return (
            <div className="searchWrapper">
                <div className="search">
                    <div className="title">
                        <label className="hover-field glitch-text" data-text="isPawned">
                            isPawned
                        <span>Check wheather your email address is Pawned anywhere</span>
                        </label>
                    </div>
                    <input className="email-field pulse" type="email" placeholder="Enter an Email ID" onKeyPress={(event) => { if (event.key == 'Enter') this.checkIsPawned.call() }} onChange={(event) => this.setState({ isPawnedEmail: event.target.value })} required onFocus={this.onFocus} onBlur={this.onBlur} />
                    <button className="kool-button-black check-button hover-field" onClick={this.checkIsPawned}>Check
                    </button>
                </div>
                <div className={`display-message ${this.state.displayMessageStyle}`}>
                    {this.state.displayMessage}
                </div>
                <div className="searchResults">
                    {this.breachItems}
                </div> 
            </div>
        );
    }

    componentDidMount() {

    }

    onFocus(e) {
        if (e.target.classList.contains('pulse')) {
            e.target.classList.remove('pulse');
        }
    }

    onBlur(e) {
        if (!e.target.classList.contains('pulse') && e.target.value.length == 0) {
            e.target.classList.add('pulse');
        }
    }

    checkIsPawned() {
        // axios.get()
        this.setState({
            intiated: true
        });
        axios({
            method: 'get',
            url: `https://haveibeenpwned.com/api/v2/breachedaccount/${this.state.isPawnedEmail}`
        }).then((response) => {
            const breachList = response.data;
            this.setState({
                pawnedList: response.data,
                displayMessage: `Your email address is Pawned on ${breachList.length} websites`,
                displayMessageStyle: 'not-safe-message'
            });
        }).catch((error) => {
            if (error.response.status === 404) {
                this.setState({
                    displayMessage: `You are safe now.`,
                    displayMessageStyle: 'safe-message',
                    pawnedList: []
                });
            }
        })
    }
}