import React from 'react';
import {observer, inject} from 'mobx-react';
import bind from 'bind-decorator';
import {
  Avatar,
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  AutoComplete,
  CardText,
  FlatButton,
  List,
  ListItem,
  Divider,
  Snackbar,
  Tabs, Tab,
  RaisedButton,
  Toolbar,
  DatePicker,
  FontIcon,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  MenuItem,
  Toggle,
  ToolbarGroup,
  FloatingActionButton,
  ToolbarSeparator,
  IconButton,
  ToolbarTitle,
  RadioButton,
  TextField,
  Paper,
  RadioButtonGroup,
  Dialog,
  Checkbox,
} from 'material-ui';
import {Icon, Button, Tag, Cascader,} from 'antd';
import {yellow500} from 'material-ui/styles/colors';
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
import SwipeableViews from 'react-swipeable-views';
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/action/delete';
import ImageEdit from 'material-ui/svg-icons/image/edit';
import EmptyComponent from '../../EmptyComponent';
import {Link} from 'react-router-dom';
import {LINKS} from "../../../routes";
import './style.scss';
import {appConfig} from "../../../config/app";
import NumberFormat from 'react-number-format';
import LoadingDialog from "../../LoadingDialog";
import Loader from 'react-loader-advanced';
import AddressAdd from './Dialog/AddAddress';
import {DIALOG} from "../../../stores/global_ui";

@inject('appstate')
@observer
export default class AddressComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      open: false,
      mode: 'create',
      defaultValue: {}
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.globalUI = props.appstate.globalUI;
    this.userAddress = props.appstate.userAddress;
    this.userData = props.appstate.userData;
  }

  componentDidMount() {
    if(this.userData.role == 'store') {
      this.userAddress.getAllAddress();
      console.log(this.userAddress.address[0])

    }
    else if(this.userData.role == 'administrator') {
      console.log(this.props.id, 'ini address id');
      this.userAddress.getAllAddressAdmin(this.props.id);
    }


  }

  handleOpen = () => {
    this.setState({open: true});
  };

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

  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() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={this.handleClose}
      />,
      <RaisedButton
        label="Create"
        primary={true}
        onClick={this.handleClose}
      />,
    ];

    return (
      <div className="row">
        <AddressAdd id={this.props.id} mode={this.state.mode} defaultValue={this.state.defaultValue}/>
        <div className="col l12 m12 s12">
          <Card className="animated fadeIn cardLite">
            <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
              <ToolbarGroup>
                <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Store Address'}/>
              </ToolbarGroup>
              {/*<ToolbarGroup className="ToolbarGroupLast">*/}
              {/*<ToolbarSeparator/>*/}
              {/*<RaisedButton onClick={() => this.handleOpenDialog()} className="ToolbarGroupLastButton"*/}
              {/*icon={<AddIcon/>} label="New Address" primary={true}/>*/}
              {/*</ToolbarGroup>*/}
            </Toolbar>
            <Divider/>
            <div style={{padding: 15}}>
              <Loader show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
                      messageStyle={{textAlign: 'center'}} backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
                <div className='row no-margin'>
                  <div className="col l4 m3 s12" onClick={() => this.handleOpenDialog()}>
                    <div className="flex add-new"
                         style={{
                           flexDirection: 'column',
                           alignItems: 'center',
                           justifyContent: 'center',
                           height: "172.5px"
                         }}>
                      <div>
                        <FontIcon className="material-icons icon-add ">add</FontIcon>
                      </div>
                      Add new address
                    </div>
                  </div>
                  {this.userAddress.address.map((data, index) => (
                    <a onClick={() => this.updateAddress(index)}>
                    <div style={{marginBottom: 10}} className='col l4 m4 s12 marketplace-container-address'>
                      <List className='no-padding'>
                        <ListItem
                          disabled={true}
                          className='marketplace-list-threeLines'
                          style={{height: 170, }}
                          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 style={{display: 'inline-block'}} onClick={() => this.updateAddress(index)} className="address-name btnFlatUnderline">{_.capitalize(data.name)}</a>
                              <div style={{marginLeft: 10, display: 'inline-block'}} className="address-status">
                                {(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" style={{overflow:'visible',whiteSpace: 'normal !important'}}>
                              <p className="no-margin font-12 address-phone">{data.phone_number}</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> <br/><span className="address text-capitalize font-12">
                      {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>
                    </a>
                  ))}
                </div>
              </Loader>
            </div>
          </Card>
        </div>

      </div>
    )
  }
}
