import React from 'react';
import {Card, CardActions, CardText, CardTitle, Divider, Paper, RaisedButton, TextField,Dialog,FlatButton} from 'material-ui';
import {inject, observer} from 'mobx-react';

import './style.scss'
import {LINKS} from "../../routes";
import {getMobileOperatingSystem} from '../../stores/firebase';
import {Helmet} from "react-helmet";
import LoadingDialog from '../LoadingDialog/index';


@inject('appstate')
@observer
export default class ForgotPasswordComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      email: "",
      password: "",
      open : false,
      message : 'HAI',
      status : 0,
      loading : false
    };
    this.defaultState = Object.assign({}, this.state);
    this.authStore = props.appstate.auth;
    this.http = props.appstate.http;
    this.settingStore = props.appstate.setting;
  }

  componentDidMount() {
    this.settingStore.getAll();
  }

  handleTextFieldChange = (event, name) => {
    console.log(event.target.value);
    this.setState({
      [name]: event.target.value
    });
  };

  forgotPassword() {
    this.setState({
      loading : true
    });
    this.authStore.forgetPassword({email : this.state.email})
    .then(res=>{
      this.setState({
        loading : false,
        open : true,
        message : 'Succeed forgot password, please check your email',
        status : 1
      })
    }).catch(err=>{
      this.setState({
        loading : false,
        open : true,
        message : 'User with that email not found',
        status : 0
      })
    })
  }

  closeDialog = ()=>{
    if(this.state.status){
      this.props.history.push(LINKS.LOGIN);
    }
    else{
      this.setState({
        open : false
      })
    }
  }

  render() {
    const actions1 = [
      <FlatButton
        label="Ok"
        primary={true}
        onClick={()=>this.closeDialog()}
        style={{marginRight: 10}}
      />
    ];

    // const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/logo_ikan.png" : this.http.appendImagePath(this.settingStore.setting.icon);
    const applicationIcon = "/assets/images/logo_ikan.png";
    return (
      <div className="login">
        <Helmet>
          <meta charSet="utf-8"/>
          <title>Forgot Passwords</title>
          <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
          <link rel="icon" type="image/png" href={applicationIcon} sizes="96x96"/>
        </Helmet>
        <div style={{width: "100%"}}>
          {/*
            (this.settingStore.isIconEmpty) ?
              <div style={{textAlign: "center"}}>
                <Paper style={{
                  backgroundSize: "contain",
                  backgroundClip: "padding-box",
                  padding: 10,
                  height: 75, width: 75,
                  background: '#fff',
                  marginRight: "auto",
                  marginLeft: "auto"
                }} zDepth={1} circle={true}>
                  <img className="logo" src="/assets/images/logo_ikan.png"/>
                </Paper>
                <h2 style={{
                  color: '#275164',
                  marginRight: "auto",
                  marginLeft: "auto",
                  maxWidth: 500,
                  marginTop: 15,
                  marginBottom: 0
                }}>5 Roti dan 2 Ikan</h2>
              </div>
              :
              <div style={{textAlign: "center"}}>
                <Paper style={{
                  backgroundSize: "contain",
                  backgroundClip: "padding-box",
                  padding: 10,
                  height: 75, width: 75,
                  background: '#fff',
                  marginRight: "auto",
                  marginLeft: "auto"
                }} zDepth={1} circle={true}>
                  <img className="logo"
                       src={this.http.appendImagePath(this.settingStore.setting.icon)}/>
                </Paper>
                <h2 style={{
                  color: '#275164',
                  marginRight: "auto",
                  marginLeft: "auto",
                  maxWidth: 500,
                  marginTop: 15,
                  marginBottom: 0
                }}>{this.settingStore.setting.name}</h2>
              </div>
          */}
          <div style={{textAlign: "center"}}>
            <Paper style={{
              backgroundSize: "contain",
              backgroundClip: "padding-box",
              padding: 10,
              height: 75, width: 75,
              background: '#fff',
              marginRight: "auto",
              marginLeft: "auto"
            }} zDepth={1} circle={true}>
              <img className="logo" src={applicationIcon}/>
            </Paper>
            <h2 style={{
              color: '#275164',
              marginRight: "auto",
              marginLeft: "auto",
              maxWidth: 500,
              marginTop: 15,
              marginBottom: 0
            }}>Marketplace</h2>
          </div>
        </div>
        <Card style={{width: 350, marginTop: '18px'}} className="cardLite align-center">
          <CardTitle title={<p style={{fontSize: 14}}>Forgot Password</p>}>
            <Divider style={{backgroundColor: '#48d8b2', width: '150px'}} className="margin-auto"/>
          </CardTitle>
          <form>
            <CardText>
              <TextField
                hintText="Email"
                fullWidth={true}
                name="email"
                type="text"
                value={this.state.email}
                onChange={(event) => this.handleTextFieldChange(event, 'email')}
              />
            </CardText>
            <CardActions>
              <RaisedButton primary={true} label="Send New Password Link" onClick={this.forgotPassword.bind(this)}/>
            </CardActions>
          </form>
          <a style={{fontSize: 12, fontWeight: 500, display: 'block', margin: '18px 0px 30px'}}
             onClick={() => this.props.history.push(LINKS.LOGIN)}>Back to Login</a>
        </Card>

        <Dialog
          open={this.state.open}
          contentStyle={{maxWidth: 350}}
          onRequestClose={()=>this.setState({open:false})}
          actions={actions1}
          modal={true}
        >
          {this.state.message}
        </Dialog>

        <Dialog
          open={this.state.loading}
          contentStyle={{maxWidth: 350}}
          modal={true}
        >
        <div style={{textAlign: 'center'}}>
          <LoadingDialog/>
        </div>
        </Dialog>
      </div>
    )
  }
}