import React from 'react';
import {observer, inject} from 'mobx-react';
import bind from 'bind-decorator';
import {
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  AutoComplete,
  CardText,
  FlatButton,
  Divider,
  RaisedButton,
  Toolbar,
  DatePicker,
  FontIcon,
  SelectField,
  MenuItem,
  ToolbarGroup,
  FloatingActionButton,
  ToolbarSeparator,
  IconButton,
  ToolbarTitle,
  RadioButton, RadioButtonGroup, DropDownMenu,
  Tabs, Tab,
  GridList, GridTile, CircularProgress
} from 'material-ui';
import {withRouter} from 'react-router';
import {BrowserRouter as Router, Link, Route} from 'react-router-dom';
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
import ContentAdd from 'material-ui/svg-icons/content/add';
import EmptyComponent from '../../EmptyComponent';
import ListPackageSearch from './ListPackageSearch';
import {LINKS} from './../../../routes'
import NumberFormat from 'react-number-format';
import '../style.scss';
import {appConfig} from "../../../config/app";
import LoadingDialog from "../../LoadingDialog";
import Loader from 'react-loader-advanced';

@inject('appstate')
@observer
export default class ListPackage extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {};
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.packageStore = props.appstate.packages;
    this.airlinesDomestic = props.appstate.airlinesDomestic;
    this.airports = props.appstate.airports;
    this.globalUI = props.appstate.globalUI;
  }

  componentWillMount() {
    this.globalUI.openLoading();
    this.packageStore.getAllPackagesbyStatus().then(res => {
      this.airlinesDomestic.getAllAirlines().then(res => {
        this.airports.getAllAirports().then(res => {
          this.globalUI.closeLoading();
        })
      })
    })
  }

  componentDidMount() {

  }

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

    //const loading =  <ReactLoading type={type} color={color} height='667' width='375' />
    return (
      <div className="">
        <div className="row">
          <div className="col l12 m12 s12">
            <Divider style={{}}/>
            <ListPackageSearch/>
            <Divider style={{marginTop: 10}}/>
          </div>
        </div>
        <Loader style={{minHeight: 300}} show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
                messageStyle={{left: '45%', top: '25%', position: 'absolute', padding: 16}}
                backgroundStyle={{backgroundColor: 'rgba(255, 255, 255, 0.9)'}}>
          {(!this.packageStore.getAllPackagesLoading && this.packageStore.packagesListByStatus.length > 0) ?
            <div className="row">
              {this.packageStore.packagesListByStatus.map((tile, index) => (
                <div key={tile.id} className="col l4 m4 s12">
                  <Link
                    to={{pathname: `${LINKS.SERVICE_PACKAGES}/${tile.id}`, query: {data: tile}}}>
                    <Card className="cardLite" style={{height: 300, marginBottom: 20}}
                          onClick={() => this.props.onClickView(tile)}>
                      <CardMedia
                        overlay={<CardTitle titleStyle={{fontSize: 18}} subtitleStyle={{color: "white"}}
                                            title={tile.name}
                                            subtitle={<NumberFormat value={tile.price} displayType={'text'}
                                                                    thousandSeparator={true}
                                                                    prefix={'IDR '}/>}/>}>
                        <img src={this.http.appendImagePath(tile.banner)} alt=""
                             style={{height: 300, width: "auto", objectFit: "cover"}}/>
                      </CardMedia>
                    </Card>
                  </Link>
                </div>
              ))}
            </div> :
            <div className="row"><Card><EmptyComponent imageStyle={{marginTop: '5%', marginBottom: '5%'}} type="empty"
                                                       header=""
                                                       content="Whoa.. Nothing here yet, move along.."/></Card></div>}
        </Loader>
      </div>
    )
  }
}
