import React from 'react';
import {inject, observer} from 'mobx-react';
import {
  Paper,
  SelectField,
  CardMedia,
  Card,
  CardText,
  CardTitle,
  Divider,
  MenuItem,
  RaisedButton,
  Toolbar,
  ToolbarGroup,
  ToolbarTitle,
  FlatButton,
  Dialog,
  TextField,
  DatePicker
} from 'material-ui';
import AddIcon from 'material-ui/svg-icons/image/edit';
import moment from "moment";
import {Link} from 'react-router-dom';
import {LINKS} from "../../../routes";
import {DIALOG} from "../../../stores/global_ui";
import UpdateDialog from './UpdateDialog';
import IdentificationPassport from './../../Customers/CustomerDialog/IdentificationPassport';

// import './style.scss';

@inject('appstate')
@observer
export default class GeneralInformation extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.customer = props.appstate.customer;
    this.state = {
      value: 1,
      searchText: '',
      slideIndex: 0,
      openedDialog:false,
      gender:this.customer.CustomerData.gender,
      marital:this.customer.CustomerData.martial_status,
      openedDialogPhoto:false
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.globalUI = props.appstate.globalUI;
  }

  componentDidMount() {
    console.log('Profile loaded!');

  }
  editData = (id) => {
    this.customer.update(id);
    this.setState({openedDialog: false});
    this.setState({openedDialogPhoto: false});
  };

  handleOpenDialog = () => {
      this.setState({
          openedDialog:true
      });
  };

  handleCloseDialog = () =>{
      this.setState({
          openedDialog:false
      });
  }

  handleOpenPhoto = () => {
    this.setState({
        openedDialogPhoto:true,
        oldPassportPhoto : this.customer.CustomerData.passport_photo,
        oldIdPhoto : this.customer.CustomerData.id_photo,
    });
    console.log
    
}

  handleClosePhoto = () =>{
    this.setState({
        openedDialogPhoto:false
    });
    this.customer.CustomerData.passport_photo = this.state.oldPassportPhoto;
    this.customer.CustomerData.id_photo = this.state.oldIdPhoto;
}

  handleUpdateInput = (searchText) => {
    this.setState({
      searchText: searchText,
    });
  };

  handleNewRequest = () => {
    this.setState({
      searchText: '',
    });
  };

  tabsHandleChange = (value) => {
    this.setState({
      slideIndex: value,
    });
  };

  handleChange = (event, index, value) => this.setState({value});

  handleChangeName = (event) =>{
    this.customer.CustomerData.name = event.target.value;
  };

  handleChangeEmail = (event) =>{
    this.customer.CustomerData.email = event.target.value;
  };

  handleChangeDate = (event, value) =>{
    this.customer.CustomerData.date_of_birth = value;
  };

  handleChangeGender = (event, index, value) =>{
    this.customer.CustomerData.gender = value;
  };

  handleChangePassport = (event) =>{
    this.customer.CustomerData.passport_number = event.target.value;
  };

  handleChangeOccupation = (event) =>{
    this.customer.CustomerData.occupation = event.target.value;
  };

  handleChangeAddress = (event) =>{
    this.customer.CustomerData.address = event.target.value;
  };

  handleChangeBirthPlace = (event) =>{
    this.customer.CustomerData.birth_place = event.target.value;
  };

  handleChangePhone = (event) =>{
    this.customer.CustomerData.phone = event.target.value;
  };

  handleChangeHandphone = (event) =>{
    this.customer.CustomerData.handphone = event.target.value;
  };

  handleChangeMarital = (event, index, value) =>{
    this.customer.CustomerData.martial_status = value;
  };

  handleChangeTaxNumber = (event) =>{
    this.customer.CustomerData.id_tax_number = event.target.value;
  };

  handleChangeType = (event) =>{
    this.customer.CustomerData.id_type = event.target.value;
  };

  handleChangeNumber= (event) =>{
    this.customer.CustomerData.id_number = event.target.value;
  };

  render() {
    const styles = {

      radioButton: {
        marginBottom: 16,
      },
    };

    const gender = [
  	  <MenuItem key={0} value={0} primaryText="Choose Gender"/>,
  	  <MenuItem key={1} value={"Man"} primaryText="Man"/>,
  	  <MenuItem key={2} value={"Woman"} primaryText="Woman"/>,
      ];
      
    const marital_status = [
    <MenuItem key={0} value={0} primaryText="Choose Marital Status"/>,
    <MenuItem key={1} value={"Married"} primaryText="Married"/>,
    <MenuItem key={2} value={"Single"} primaryText="Single"/>,
    <MenuItem key={2} value={"Divorced"} primaryText="Divorced"/>,
    <MenuItem key={2} value={"Widowed"} primaryText="Widowed"/>,
    ];

    const actions = [
      <FlatButton
          label="Cancel"
          primary={true}
          onClick={this.handleCloseDialog} 
      />,
      <FlatButton
          label="Submit"
          primary={true}
          onClick={() => this.editData(this.customer.CustomerData.id)}
      />,
      ];

      const actionsPhoto = [
        <FlatButton
            label="Cancel"
            primary={true}
            onClick={this.handleClosePhoto}
        />,
        <FlatButton
            label="Submit"
            primary={true}
            onClick={() => this.editData(this.customer.CustomerData.id)}
        />,
        ];

    return (
      <div className="animated fadeIn">
        <UpdateDialog/>
        <Card className="row" style={{marginBottom: 10}}>
          <div className="flexSpaceBetween" style={{padding: 16}}>
            <CardTitle style={{padding: 0, fontSize: 22}} titleStyle={{fontSize: 22}}
                       title={this.customer.CustomerData.name}
                       subtitle={<code>{this.customer.CustomerData.id}</code>}/>
            <ToolbarGroup>
              <RaisedButton
                icon={<AddIcon/>}
                label="Edit"
                onClick={this.handleOpenDialog}
                primary={true}/>
            </ToolbarGroup>

          </div>
        </Card>
        <Card style={{marginBottom: 10}}>
          <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
            <ToolbarGroup>
              <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d', textTransform: 'capitalize'}}
                            text={'Details'}/>
            </ToolbarGroup>

          </Toolbar>
          <Divider/>
          <CardTitle style={{paddingBottom: 0}}
                     subtitle={<p style={{color: '#32325d', fontSize: 12, paddingLeft: 10}}>ACCOUNT INFORMATION</p>}/>
          <CardText>
            <div className="row">
              <div className="col s12 m12 l12">
                <div className="listCustDetail">
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">ID</p>
                    <code className="listCustomerDetailItemValue">{this.customer.CustomerData.id}</code>
                  </div>
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">Created</p>
                    <p
                      className="listCustomerDetailItemValue">{moment(this.customer.CustomerData.created_at).format('DD MMMM YYYY, HH:mm:ss')}</p>
                  </div>
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">Email</p>
                    <p className="listCustomerDetailItemValue">{this.customer.CustomerData.email}</p>
                  </div>
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">Birth Place</p>
                    <p className="listCustomerDetailItemValue">{this.customer.CustomerData.birth_place}</p>
                  </div>
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">Date of Birth</p>
                    <p
                      className="listCustomerDetailItemValue">{moment(this.customer.CustomerData.date_of_birth).format('DD MMMM YYYY')}</p>
                  </div>
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">Gender</p>
                    <p className="listCustomerDetailItemValue">{this.customer.CustomerData.gender}</p>
                  </div>
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">Address</p>
                    <p className="listCustomerDetailItemValue">{this.customer.CustomerData.address}</p>
                  </div>
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">Occupation</p>
                    <p className="listCustomerDetailItemValue">{this.customer.CustomerData.occupation}</p>
                  </div>
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">Phone</p>
                    <p className="listCustomerDetailItemValue">{this.customer.CustomerData.phone}</p>
                  </div>
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">Handphone</p>
                    <p className="listCustomerDetailItemValue">{this.customer.CustomerData.handphone}</p>
                  </div>
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">Marital Status</p>
                    <p className="listCustomerDetailItemValue">{this.customer.CustomerData.martial_status}</p>
                  </div>
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">ID Tax Number</p>
                    <p className="listCustomerDetailItemValue">{this.customer.CustomerData.id_tax_number}</p>
                  </div>
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">ID Type</p>
                    <p className="listCustomerDetailItemValue">{this.customer.CustomerData.id_type}</p>
                  </div>
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">ID Number</p>
                    <p className="listCustomerDetailItemValue">{this.customer.CustomerData.id_number}</p>
                  </div>
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">Passport Number</p>
                    <p className="listCustomerDetailItemValue">{this.customer.CustomerData.passport_number}</p>
                  </div>
                  <div className="listCustDetailItem flex">
                    <p className="listCustomerDetailItemKey">Agent</p>
                    <p className="listCustomerDetailItemValue"><Link to={`${LINKS.MEMBER}/${this.customer.CustomerData.agent_id}`}
                                                                     key={this.customer.CustomerData.agent_id}>{this.customer.CustomerData.agent}</Link> - <code
                      style={{color: '#424770'}}>{this.customer.CustomerData.agent_id}</code></p>
                  </div>
                </div>
              </div>
            </div>
          </CardText>
        </Card>
        <Card className="row" style={{marginBottom: 10}}>
          <ToolbarGroup className="flexSpaceBetween" style={{padding: "0px 16px 0px 16px"}}>
            <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d', textTransform: 'capitalize'}}
                          text={'Identification & Passport'}/>
            <RaisedButton
              icon={<AddIcon/>}
              label="Edit"
              onClick={this.handleOpenPhoto}
              primary={true}/>
          </ToolbarGroup>
          <Divider/>
          <div className="row">
            <div className="col s12 m6 l6">
              <CardTitle style={{paddingBottom: 0}}
                         subtitle={<p style={{color: '#32325d', fontSize: 12}}>IDENTIFICATION</p>}/>
              <CardText>
                <Paper zDepth={1} style={{padding: 8}}>
                  <CardMedia style={{minHeight: '222px'}}>
                    <img src={this.http.appendImagePath(this.customer.CustomerData.id_photo)}/>
                  </CardMedia>
                </Paper>
              </CardText>
            </div>
            <div className="col s12 m6 l6">
              <CardTitle style={{paddingBottom: 0}}
                         subtitle={<p style={{color: '#32325d', fontSize: 12}}>PASSPORT</p>}/>
              <CardText>
                <Paper zDepth={1} style={{padding: 8}}>
                  <CardMedia style={{minHeight: '222px'}}>
                    <img src={this.http.appendImagePath(this.customer.CustomerData.passport_photo)}/>
                  </CardMedia>
                </Paper>
              </CardText>
            </div>
          </div>
        </Card>
        <Dialog
            title="Update Customer Data"
            actions={actions}
            modal={true}
            open={this.state.openedDialog}
            onRequestClose={() => this.handleCloseDialog()}
        >
            <div className="row">
            <div className="col s12 m6 l6">
              <div>
                <p className="label-form">Name</p>
                <TextField
                  fullWidth={true}
                  onChange={this.handleChangeName}
                  hintText="E.g. Michael Jordan"
                  value={this.customer.CustomerData.name}
                />
              </div>
            </div>
  
            <div className="col s12 m6 l6">
              <div>
                <p className="label-form">Email</p>
                <TextField
                  fullWidth={true}
                  onChange={this.handleChangeEmail}
                  hintText="E.g. Michael.Jordan@domain.com"
                  value={this.customer.CustomerData.email}
                />
              </div>
            </div>
          </div>
  
          <div className="row">
            <div className="col s12 m6 l6">
              <div>
                <p className="label-form">Date of Birth</p>
                <DatePicker
                  fullWidth={true}
                  mode="landscape"
                  onChange={this.handleChangeDate}
                  hintText="2017-08-17"
                  openToYearSelection={true}
                  value={this.customer.CustomerData.date_of_birth}
                />
              </div>
            </div>
            <div className="col s12 m6 l6">
              <div>
                <p className="label-form">Gender</p>
                <SelectField
                  value={this.customer.CustomerData.gender}
                  onChange={this.handleChangeGender}
                  fullWidth={true}
                >
                  {gender}
                </SelectField>
              </div>
            </div>
          </div>
  
          <div className="row">
            <div className="col s12 m6 l6">
              <div>
                <p className="label-form">Passport Number</p>
                <TextField
                  hintText="E.g. X000000"
                  onChange={this.handleChangePassport}
                  fullWidth={true}
                  value={this.customer.CustomerData.passport_number}
                />
              </div>
            </div>
            <div className="col s12 m6 l6">
              <div>
                <p className="label-form">Occupation</p>
                <TextField
                  hintText="E.g. PNS"
                  onChange={this.handleChangeOccupation}
                  fullWidth={true}
                  value={this.customer.CustomerData.occupation}
                />
              </div>
            </div>
          </div>
  
          <div className="row">
            <div className="col s12 m6 l6">
              <div>
                <p className="label-form">Address</p>
                <TextField
                  hintText="E.g. Jl. Kemanggisan No.25 Jakarta Barat"
                  multiLine={true}
                  fullWidth={true}
                  rows={1}
                  rowsMax={4}
                  onChange={this.handleChangeAddress}
                  value={this.customer.CustomerData.address}
                />
              </div>
            </div>
            <div className="col s12 m6 l6">
              <div>
                <p className="label-form">Birth Place</p>
                <TextField
                  hintText="E.g. Bandung"
                  fullWidth={true}
                  onChange={this.handleChangeBirthPlace}
                  value={this.customer.CustomerData.birth_place}
                />
              </div>
            </div>
          </div>
  
          <div className="row">
            <div className="col s12 m6 l6">
              <div>
                <p className="label-form">Phone</p>
                <TextField
                  hintText="E.g. 88954361"
                  onChange={this.handleChangePhone}
                  fullWidth={true}
                  value={this.customer.CustomerData.phone}
                />
              </div>
            </div>
            <div className="col s12 m6 l6">
              <div>
                <p className="label-form">Handphone</p>
                <TextField
                  hintText="E.g. 0899976487"
                  onChange={this.handleChangeHandphone}
                  fullWidth={true}
                  value={this.customer.CustomerData.handphone}
                />
              </div>
            </div>
          </div>
  
          <div className="row">
            <div className="col s12 m6 l6">
              <div>
                <p className="label-form">Marital Status</p>
                <SelectField
                  value={this.customer.CustomerData.martial_status}
                  onChange={this.handleChangeMarital}
                  fullWidth={true}
                >
                  {marital_status}
                </SelectField>
              </div>
            </div>
            <div className="col s12 m6 l6">
              <div>
                <p className="label-form">ID Tax Number</p>
                <TextField
                  hintText="E.g. 00000000000000000"
                  onChange={this.handleChangeTaxNumber}
                  fullWidth={true}
                  value={this.customer.CustomerData.id_tax_number}
                />
              </div>
            </div>
          </div>
  
          <div className="row">
            <div className="col s12 m6 l6">
              <div>
                <p className="label-form">ID Type</p>
                <TextField
                  hintText="E.g. KTP"
                  onChange={this.handleChangeType}
                  fullWidth={true}
                  value={this.customer.CustomerData.id_type}
                />
              </div>
            </div>
            <div className="col s12 m6 l6">
              <div>
                <p className="label-form">ID Number</p>
                <TextField
                  hintText="E.g. 00000000000000"
                  onChange={this.handleChangeNumber}
                  fullWidth={true}
                  value={this.customer.CustomerData.id_number}
                />
              </div>
            </div>
          </div>
        </Dialog>
        <Dialog
            title="Update Agent"
            actions={actionsPhoto}
            modal={true}
            open={this.state.openedDialogPhoto}
            onRequestClose={() => this.handleClosePhoto()}
        >
          <IdentificationPassport/>
        </Dialog>
      </div>
    )
  }
}