import * as React from 'react';
import {__} from '../../helpers/TranslationService';

const wrapperStyle: React.CSSProperties = {
};

interface IState {
    cruiseNid: string;
}

export class SearchCruise extends React.Component<{}, IState> {
    constructor(props) {
        super(props);
        this.state = {
            cruiseNid: ''
        };
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    componentDidMount() {

    }

    handleSubmit(event) {
        event.preventDefault();
        const data = new FormData(event.target);
        console.log('handleSubmit');
        console.log('this.state.cruiseNid', this.state.cruiseNid);

        // const url = `/wp-content/themes/dreamlines/ajax/ajaxhandler.php?action=searchresults_json&searchparams[cruiseNids]=${cruiseNid}`;
        // const urlNotFound = `${window.utilityData.searchPageLink}?cruiseNids=${cruiseNid}`;

        // fetch('/api/form-submit-url', {
        //   method: 'POST',
        //   body: data,
        // });
    }

    handleChange(e){
        console.log('handleChange', e.target.cruiseNid);
        const re = /^[0-9\b]+$/;
        if (e.target.value === '' || re.test(e.target.value)) {
           this.setState({cruiseNid: e.target.cruiseNid})
        }
    }

    render() {
        return (
            <form className='' onSubmit={this.handleSubmit}>
                <input type="text" value={this.state.cruiseNid} onChange={this.handleChange} className="" placeholder={__('CruiseNid', 'dreamlines')} required />
                <button>Go!</button>
            </form>
        );
    }
};