import React from 'react';
import {observer, inject} from 'mobx-react';
import {
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  AutoComplete,
  CardText,
  FlatButton,
  Divider,
  RaisedButton,
  Toolbar,
  DatePicker,
  FontIcon,
  SelectField,
  MenuItem,
  ToolbarGroup,
  FloatingActionButton,
  ToolbarSeparator,
  IconButton,
  ToolbarTitle,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  TextField,
  Paper,
  RadioButton,
  RadioButtonGroup,
  DropDownMenu,
  Dialog
} from 'material-ui';

import SearchIcon from 'material-ui/svg-icons/action/search';
import AddIcon from 'material-ui/svg-icons/content/add';
import DeleteIcon from 'material-ui/svg-icons/content/delete-sweep';
import EditIcon from 'material-ui/svg-icons/editor/mode-edit';
import moment from "moment";
import EmptyComponent from '../../EmptyComponent';
import {Link} from 'react-router-dom';
import {LINKS} from "../../../routes";


@inject('appstate')
@observer
export default class ProfileEditDialog extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {

    };
    this.defaultState = Object.assign({}, this.state);
    this.globalUI = props.appstate.globalUI;
    this.profile = props.appstate.profile;
    this.authStore = props.appstate.auth;
  }

  componentDidMount(){
  	
  }

  handleName = (event) => {
  	this.authStore.userProfile.contact.name = event.target.value;
  };

  handlePhone = (event) => {
  	this.authStore.userProfile.contact.handphone  = event.target.value;
  };

  handleCity = (event) => {
  	this.authStore.userProfile.contact.city = event.target.value;
  };

  handleFacebook = (event) => {
  	this.authStore.userProfile.contact.facebook_account  = event.target.value;
  };

  componentDidMount() {

  }

  render() {

    return (
      <Dialog
        modal={true}
        open={this.props.open}
        actions={this.props.actions}
      >
        <div style={{padding: 20}}>
        	<div className="row">
        	  <div className="col s12 m6 l6">
        	    <p className="label-form">Place</p>
        	    <TextField
        	      fullWidth={true}
        	      onChange={this.handleName}
        	    />
        	  </div>
        	  <div className="col s12 m6 l6">
        	    <p className="label-form">Birhday</p>
        	    <TextField
        	      fullWidth={true}
        	      onChange={this.handlePhone}
        	      type="number"
        	    />
        	  </div>
        	</div>

          <div className="row">
        	  <div className="col s12 m6 l6">
        	    <p className="label-form">Phone</p>
        	    <TextField
        	      fullWidth={true}
        	      onChange={this.handleCity}
        	    />
        	  </div>
        	  <div className="col s12 m6 l6">
        	    <p className="label-form">Gender</p>
        	    <TextField
        	      fullWidth={true}
        	      onChange={this.handleFacebook}
        	    />
        	  </div>
        	</div>

        	<div className="row">
        	  <div className="col s12 m6 l6">
        	    <p className="label-form">Phone</p>
        	    <TextField
        	      fullWidth={true}
        	      onChange={this.handleCity}
        	    />
        	  </div>
        	  <div className="col s12 m6 l6">
        	    <p className="label-form">Gender</p>
        	    <TextField
        	      fullWidth={true}
        	      onChange={this.handleFacebook}
        	    />
        	  </div>
        	</div>
        </div>
      </Dialog>
    )
  }
}
