import React from 'react';
import {observer, inject} from 'mobx-react';
import {Form, Input, Button, Select, Upload, Icon, Modal, Spin, message, Tag, Cascader} from 'antd'
import bind from 'bind-decorator';
import {
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  CardText,
  FlatButton,
  GridList,
  Paper,
  FloatingActionButton,
  GridTile,
  IconButton, ToolbarGroup, Toolbar, TextField, Divider, ToolbarTitle, TableBody, TableRow, TableRowColumn,
  TableHeaderColumn, Table, TableHeader, RaisedButton, Dialog, SelectField, MenuItem, List,
  ListItem,
} from 'material-ui';
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
import ContentAdd from 'material-ui/svg-icons/content/add';
import AddIcon from 'material-ui/svg-icons/content/add';
import ModeEdit from 'material-ui/svg-icons/editor/mode-edit';

const {Option, OptGroup} = Select;
const FormItem = Form.Item;
import EmptyComponent from '../../EmptyComponent';
import {appConfig} from "../../../config/app";
import AddressAdd from '../../Stores/Address/Dialog/AddAddress';
import {DIALOG} from "../../../stores/global_ui";

@inject('appstate')
@observer
class Address extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.bankStore = props.appstate.bank;
    this.state = {
      open: false,
      mode: 'create',
      defaultValue: {}
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.globalUI = props.appstate.globalUI;
    this.currency = props.appstate.currencyStore;
    this.appstate = props.appstate;
    this.profileStore = props.appstate.profile;
    this.userAddress = props.appstate.userAddress;
    this.globalUI = props.appstate.globalUI;
  }

  componentDidMount() {
    this.userAddress.getAllAddress();
    this.bankStore.getByUserID('tesss');
    this.currency.getAll();
    this.profileStore.getProfile();
  }

  handleOpenDialog = () => {
    this.setState({mode: 'create', defaultValue: {is_shipment: true, is_default: true}});
    this.globalUI.showDialog(DIALOG.ADDRESS.CREATE);
  };

  updateAddress = (index) => {
    this.setState({
      mode: 'update',
      defaultValue: this.userAddress.address[index]
    });
    this.globalUI.showDialog(DIALOG.ADDRESS.CREATE);
  }



  render() {

    console.log(this.appstate.userData);

    const {userData} = this.appstate;

    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        style={{marginRight: 10}}
        onClick={this.handleClose}
      />,
      <RaisedButton
        label="Submit"
        primary={true}
        onClick={() => this.postDataBank()}
      />,
    ];

    const styles = {
      root: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
      },
      gridList: {
        width: 500,
        height: 450,
        overflowY: 'auto',
      },
    };

    const {previewVisible, previewImage, fileList} = this.state;

    const {getFieldDecorator} = this.props.form;

    const uploadButton = (
      <div>
        <Icon type="cloud-upload-o" style={{fontSize: "36px", color: "#c3c3c3"}}/>
      </div>
    );

    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 6
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 14
        }
      }
    };

    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0
        },
        sm: {
          span: 14,
          offset: 6
        }
      }
    };

    const nameRule = getFieldDecorator('fullname', {
      rules: [
        {
          required: true,
          message: 'name cannot be empty'
        }
      ],
      initialValue: this.authStore.userProfile.fullname
    });

    const mailRule = getFieldDecorator('username', {
      rules: [
        {
          required: true,
          message: 'mail cannot be empty'
        }
      ],
      initialValue: this.authStore.userProfile.username
    });

    const oldPasswordRule = getFieldDecorator('old_password', {
      rules: [
        {
          type: 'string',
          validator: (rule, value, cb) => {
            const {form} = this.props;
            const passwordValue = form.getFieldValue('password');

            if (value && !passwordValue) {
              form.setFields({
                password: {
                  errors: [
                    {
                      message: 'New password cannot be empty!'
                    }
                  ]
                }
              });

              return cb()
            }

            cb();
          }
        }
      ]
    });

    const passwordRule = getFieldDecorator('password', {
      rules: [
        {
          type: 'string',
          validator: (rule, value, cb) => {
            const {form} = this.props;
            const oldPasswordValue = form.getFieldValue('old_password');

            if (value && !oldPasswordValue) {
              form.setFields({
                old_password: {
                  errors: [
                    {
                      message: 'Old password cannot be empty!'
                    }
                  ]
                }
              });

              return cb()
            }

            cb();
          }
        }
      ]
    });

    return (

      <div className="containerMiddle">
        <AddressAdd mode={this.state.mode} defaultValue={this.state.defaultValue}/>
          <div>
            <div className="">
              <div className="col s12" style={{transition: "opacity .2s ease-in-out"}}>
                <Card className="row" style={{marginBottom: 10}}>
                  <div className="flexSpaceBetween" style={{padding: 16}}>
                    <CardTitle style={{padding: 0, fontSize: 22}} titleStyle={{fontSize: 22}}
                               title="Address"
                               subtitle={"Your Addresses"}/>
                    <ToolbarGroup>
                      <RaisedButton
                        icon={<ModeEdit/>}
                        label="Add Address"
                        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/>
                  <CardText>
                    <div className='row no-margin'>
                  {this.userAddress.address.map((data, index) => (
                    <div style={{margin: 5}} className='col l4 m12 s12 marketplace-container-address'>
                      <List className='no-padding'>
                        <ListItem
                          disabled={true}
                          className='marketplace-list-threeLines'
                          hoverColor={'transparent'}
                          // leftIcon={<i className="material-icons">location_on</i>}
                          // leftAvatar={<Avatar
                          //   icon={<i className="material-icons" style={{fontSize: 25}}>location_on</i>}/>}
                          primaryText={
                            <div className="first-row" style={{marginTop: (data.is_default || data.is_shipment) ? -13 : 0}}>
                              <a onClick={() => this.updateAddress(index)} style={{display: 'inline-block'}} className="address-name btnFlatUnderline">{_.capitalize(data.name)}</a>
                              <div className="address-status" style={{marginLeft: 10, display: 'inline-block'}}>
                                {(data.is_default) && <Tag color="green" className="marketplace-tag-small">Main Address</Tag>}
                                {(data.is_shipment) && <Tag color="geekblue" className="marketplace-tag-small">Store Address</Tag>}
                              </div>
                            </div>}
                          secondaryText={
                            <div className="second-row">
                              <p className="no-margin font-12 address-phone">{data.address}</p>
                              <span>{data.address}</span><br/>
                              <span className="address text-capitalize font-12">
                            {_.capitalize(data.city.type + ' ' + data.city.name)}
                          </span> - <span className="address text-capitalize font-12">
                      {_.capitalize(data.province.name)}
                      </span> - <span className="address text-capitalize font-12">
                      17827{data.postal_code}
                      </span>

                            </div>
                          }
                        />

                      </List>
                      {/*<div className="row" style={{paddingTop: 10}}>*/}
                      {/*<div className="col s1">*/}
                      {/*<i className="material-icons" style={{fontSize: 25}}>location_on</i>*/}
                      {/*</div>*/}
                      {/*<div className=" col s10">*/}
                      {/*<div className="address-section">*/}
                      {/*<div className="first-row">*/}
                      {/*<span className="address-name">*/}
                      {/*{_.capitalize(data.name)}*/}
                      {/*</span>*/}
                      {/*<span className="address-status">*/}
                      {/*{(data.is_default) ? <Tag color="#87d068">Main Address</Tag> : ""}*/}
                      {/*{(data.is_shipment) ? <Tag color="#108ee9">Store Address</Tag> : ""}*/}
                      {/*</span>*/}
                      {/*</div>*/}

                      {/*<div className="second-row">*/}
                      {/*<span className="phone-number">*/}
                      {/*{data.phone_number}*/}
                      {/*</span>*/}
                      {/*</div>*/}

                      {/*<div className="third-row">*/}
                      {/*<span className="address">*/}
                      {/*{data.address}*/}
                      {/*</span>*/}
                      {/*</div>*/}

                      {/*<div className="fourth-row">*/}
                      {/*<span className="address text-capitalize">*/}
                      {/*{_.capitalize(data.city.type + ' ' + data.city.name)}*/}
                      {/*</span>*/}
                      {/*</div>*/}

                      {/*<div className="fifth-row">*/}
                      {/*<span className="address text-capitalize">*/}
                      {/*{_.capitalize(data.province.name)}*/}
                      {/*</span>*/}
                      {/*</div>*/}

                      {/*<div className="sixth-row">*/}
                      {/*<span className="address">*/}
                      {/*Post Code {data.postal_code}*/}
                      {/*</span>*/}
                      {/*</div>*/}
                      {/*</div>*/}
                      {/*</div>*/}
                      {/*<div className="col s1" style={{textAlign: 'right'}}>*/}
                      {/*<Button shape="circle" icon="edit" size={20} onClick={() => this.updateAddress(index)}/>*/}
                      {/*</div>*/}
                      {/*</div>*/}
                    </div>
                  ))}
                </div>
                  </CardText>
                </Card>
              </div>
            </div>
          </div>
      </div>
    )
  }
}

export default Form.create()(Address);
