import React from 'react';
import {inject, observer} from 'mobx-react';
import {
  Card,
  Divider,
  MenuItem,
  RaisedButton,
  FlatButton,
  IconButton,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  TextField,
  Toolbar,
  ToolbarGroup,
  Dialog,
  ToolbarSeparator
} from 'material-ui';
import SearchIcon from 'material-ui/svg-icons/action/search';
import AddIcon from 'material-ui/svg-icons/content/add';
import moment from "moment";
import {Link} from 'react-router-dom';
import {LINKS} from "../../routes";
import CustomerDialog from './CustomerDialog';
import {DIALOG} from "../../stores/global_ui";
import EmptyComponent from "../EmptyComponent/index";
import LoadingDialog from "../LoadingDialog";
import Loader from 'react-loader-advanced';
// import './style.scss';

@inject('appstate')
@observer
export default class CustomerComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      open: false,
      value: 1,
      searchText: '',
      slideIndex: 0,
      customers: [
        {
          id: 'cus_461a1df1',
          name: 'Ridwan Abadi',
          email: 'welove6215@einrot.com',
          registered: moment(),
          agent: 'active'
        },
        {
          id: 'cus_461a1df2',
          name: 'Hasta Ragil',
          email: 'welove6215@einrot.com',
          registered: moment(),
          agent: 'blocked'
        },
        {
          id: 'cus_461a1df3',
          name: 'Tsabit',
          email: 'welove6215@einrot.com',
          registered: moment(),
          agent: 'pending'
        },
        {
          id: 'cus_461a1df4',
          name: 'Nugroho',
          email: 'welove6215@einrot.com',
          registered: moment(),
          agent: 'active'
        },
      ]
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.customer = props.appstate.customer;
    this.globalUI = props.appstate.globalUI;
  }

  componentDidMount() {
    console.log('Profile loaded!');
    // this.customer.getAll();
    this.globalUI.openLoading();
    this.customer.getAll().then(res => {
      this.globalUI.closeLoading();
    });
  }

  handleOpen = () => {
    this.globalUI.showDialog(DIALOG.CUSTOMER.CREATE);
  };

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

  handleSubmit = () => {
    console.log("Customer Submitted");
  };

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

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

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

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

  render() {
    const actions = [
      <FlatButton
        label="Cancel"
        onClick={this.handleClose}
        style={{marginRight: 12}}
      />,
      <RaisedButton
        label='Save'
        primary={true}
        onClick={this.handleSubmit}
      />
    ];

    const title =
      <div>
        <h4 style={{
          fontSize: 26,
          marginBottom: 0,
          marginTop: 0,
          fontWeight: 500,
          color: "white"
        }}>Register New Customer</h4>
        <p style={{fontSize: 13}}>
          Remember to put every detail of the customer, check their personal identification and make sure it's not fake.
        </p>
        <IconButton
          iconClassName="material-icons"
          tooltip="Close"
          iconStyle={{
            color: '#fff',
          }}
          style={{
            position: 'absolute',
            right: 0,
            top: 0
          }}
          onClick={this.handleClose}
        >
          close
        </IconButton>
      </div>
    ;

    const styles = {

      radioButton: {
        marginBottom: 16,
      },
    };

    const colors = [
      'Jakarta - Soekarno - Hatta (CGK)',
      'Bali',
      'Surabaya',
      'Yogyakarta',
      'Aceh',
      'Kalimantan',
      'Medan',
      'Papua',
    ];

    const items = [
      <MenuItem key={1} value={1} primaryText="All Maskapai"/>,
      <MenuItem key={2} value={2} primaryText="Air Asia"/>,
      <MenuItem key={3} value={3} primaryText="Weeknights"/>,
      <MenuItem key={4} value={4} primaryText="Weekends"/>,
      <MenuItem key={5} value={5} primaryText="Weekly"/>,
    ];

    const count = [
      <MenuItem key={1} value={1} primaryText="1"/>,
      <MenuItem key={2} value={2} primaryText="2"/>,
      <MenuItem key={3} value={3} primaryText="3"/>,
      <MenuItem key={4} value={4} primaryText="4"/>,
      <MenuItem key={5} value={5} primaryText="5"/>,
    ];

    return (
      <div className="member containerMiddle animated fadeIn">
        <CustomerDialog/>
        <div style={{marginBottom: '16px'}}>
          <h3 className="headerMenu">Customers</h3>
        </div>
        <Card className="cardLite" style={{paddingBottom: 5}}>
          <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
            <ToolbarGroup>
              <SearchIcon style={{marginRight: 8, color: "#999"}}/>
              <TextField
                hintText="Search customer"
                style={{fontSize: 14}}
                hintStyle={{fontSize: 14}}
                underlineShow={false}
              />
            </ToolbarGroup>
            <ToolbarGroup className="ToolbarGroupLast">
              <ToolbarSeparator/>
              <RaisedButton onClick={this.handleOpen} className="ToolbarGroupLastButton" icon={<AddIcon/>}
                            label="New Customer" primary={true}/>
            </ToolbarGroup>
          </Toolbar>
          <Divider/>
          <div>
          <Loader show={this.globalUI.loadingVisibility} message={<LoadingDialog />} messageStyle={{textAlign:'center'}} backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
            <Table selectable={false}>
              <TableHeader displaySelectAll={false}
                           adjustForCheckbox={false}
                           enableSelectAll={false}>
                <TableRow style={{height: 38, background: '#f6f9fc'}}>
                  <TableHeaderColumn
                    className="TableHeaderColumnAkun"
                    style={{height: 'auto'}}>ID</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Name</TableHeaderColumn>
                  <TableHeaderColumn
                    className="TableHeaderColumnAkun"
                    style={{height: 'auto'}}>Email</TableHeaderColumn>
                  <TableHeaderColumn
                    className="TableHeaderColumnAkun"
                    style={{height: 'auto'}}>Registered</TableHeaderColumn>
                  <TableHeaderColumn
                    className="TableHeaderColumnAkun"
                    style={{height: 'auto'}}>Agent</TableHeaderColumn>
                </TableRow>
              </TableHeader>
              <TableBody displayRowCheckbox={false}>
                {
                  (this.customer.customers.length > 0) ?
                    this.customer.customers.map(cust => {
                      return (
                        <TableRow key={cust.id}>
                          <TableRowColumn>
                            <Link
                              to={`${LINKS.CUSTOMER}/${cust.id}`}
                              key={cust.id}>{cust.name}</Link> -
                            <code style={{color: '#424770'}}>{cust.id}</code>
                          </TableRowColumn>
                          <TableRowColumn>{cust.name}</TableRowColumn>
                          <TableRowColumn>{cust.email}</TableRowColumn>
                          <TableRowColumn>{moment(cust.registered).format("DD MMMM YYYY, HH:mm:ss")}</TableRowColumn>
                            {(cust.agent == null)? <TableRowColumn>admin</TableRowColumn>
                              :
                              <TableRowColumn>
                              <Link to={`${LINKS.MEMBER}/mem_84d0b93a`} key={'mem_84d0b93a'}>{(cust.agent == null)? 'admin' : cust.agent.name}</Link>
                              - <code style={{color: '#424770'}}>{cust.agent_id}</code> 
                              </TableRowColumn>
                          }
                        </TableRow>
                      )
                    }) : <EmptyComponent type="empty" header="" content="There is no data in sight"/>
                }
              </TableBody>
            </Table>
            </Loader>
          </div>
        </Card>
      </div>
    )
  }
}
