import React, {Component} from 'react';
import TextField from 'material-ui/TextField';
import Button from 'material-ui/Button';
import {momentFromNow} from '../../lib/util';
import {RevealAuctionConfirmDialog} from './RevealAuctionConfirmDialog';
import './RevealAuctionForm.css';

const FormComponent = (props) => (
  <div className="RevealAuctionForm">
    <div className="RevealAuctionForm-field">
      <TextField
        id="email"
        name="email"
        label="Email"
        value={props.email}
        onChange={props.handleInputChange}
        margin="normal"
        placeholder="youremail@example.com"
        helperText="The bid information will send to this email"
      />

      <TextField
        id="ethBid"
        name="ethBid"
        label="ETH"
        value={props.ethBid}
        onChange={props.handleInputChange}
        margin="normal"
        placeholder="0.01"
        helperText="Bid amount"
      />
      <TextField
        id="secret"
        name="secret"
        label="Secret"
        value={props.secret}
        onChange={props.handleInputChange}
        margin="normal"
        placeholder="passphrase"
        helperText="Please protect your bid with random numbers and characters"
      />
      <TextField
        id="gas"
        name="gas"
        label="Gas Price"
        type="number"
        value={props.gas}
        onChange={props.handleInputChange}
        margin="normal"
        helperText="Recommend use 21 Gwei"
      />
    </div>
    <div className="RevealAuctionForm-submit">
      <Button
        raised
        label="Dialog"
        color="primary"
        onClick={props.handleOpen}
      >
        Confirm Submit
      </Button>
    </div>
  </div>
);

export class RevealAuctionForm extends Component {
  state = {
    open: false
  };

  handleOpen = () => {
    (this.props.address && this.props.privateKey) ?
      this.setState({open: true}) :
      this.props.handleWarningMessageOpen("Should login first")
  }

  handleClose = () => {
    this.setState({open: false});
  }

  render() {
    return (
      <div>
        <h2>{this.props.searchResult.searchName}.eth</h2>
        <div>
          <div>
            <p>Reveal Auction On</p>
            <div>{this.props.unsealStartsAt.toString()}</div>
            <div>{momentFromNow(this.props.unsealStartsAt).toString()}</div>
          </div>
          <div>
            <p>Finalize Auction On</p>
            <div>{this.props.registratesAt.toString()}</div>
            <div>{momentFromNow(this.props.registratesAt).toString()}</div>
          </div>
        </div>

        <FormComponent 
          {...this.props}
          handleOpen={this.handleOpen}
        />

        {
          (this.state.open && this.props.address && this.props.privateKey) &&
          <RevealAuctionConfirmDialog
            {...this.props}
            open={this.state.open}
            handleClose={this.handleClose}
          />
        }
      </div>
    );
  }
};

@@ -167,16 +167,65 @@
 /util';%0A
+import %7BsealedBids%7D from '../../lib/ensService';%0A
 import %7B
@@ -1873,24 +1873,27 @@
 () =%3E %7B%0A    
+if 
 (this.props.
@@ -1930,9 +1930,9 @@
 ey) 
-?
+%7B
 %0A   
@@ -1943,32 +1943,301 @@
 his.
-setState(%7Bopen: true%7D) :
+props.handleWarningMessageOpen(%22Should login first%22);%0A    %7D%0A%0A    const checkValue = sealedBids(%0A      this.props.searchResult.searchName,%0A      this.props.ethBid,%0A      this.props.secret,%0A      this.props.privateKey%0A    );%0A    if (checkValue === '0x0000000000000000000000000000000000000000') %7B
 %0A   
@@ -2276,36 +2276,78 @@
 geOpen(%22
-Should login first%22)
+Invalid sealed bids%22);%0A    %7D%0A%0A    this.setState(%7Bopen: true%7D);
 %0A  %7D%0A%0A  

add sealedBid validation on the confirm form button