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="row">
        <div className="col s12 m12 l9">
          <Card className="animated fadeIn cardLite" style={{minHeight: 500}}>
          <Loader show={this.globalUI.loadingVisibility} message={<LoadingDialog />} messageStyle={{left: '45%', top: '15%', position: 'absolute'}} backgroundStyle={{backgroundColor: 'rgba(255, 255, 255, 0.8)'}}>
            {
              (this.packageStore.packagesListByStatus.length > 0) ?
                <div className="row" style={styles.root}>
                  <div className="col l12 s12" style={{padding: 0, margin: 0}}>
                    <GridList
                      cols={2}
                      cellHeight="auto"
                      padding={1}
                    >
                      {this.packageStore.packagesListByStatus.map((tile, index) => (
                        <GridTile
                          key={tile.id}
                          title={tile.name}
                          titleStyle={{fontSize: 14}}
                          subtitleStyle={{fontSize: 12}}
                          subtitle={<span><b><NumberFormat value={tile.price} displayType={'text'} thousandSeparator={true} prefix={'IDR '}/></b></span>} titlePosition="bottom"
                          containerElement={<Link
                            to={{pathname: `${LINKS.SERVICE_PACKAGES}/${tile.id}`, query: {data: tile}}}/>}
                          // onClick={() => this.props.onClickView(tile)}
                          titleBackground="linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)"
                          cols={(index % 3) ? 1 : 2}
                          rows={1}
                          className="tile-package"
                        >
                          <img src={this.http.appendImagePath(tile.banner)} width="100%"/>
                        </GridTile>
                      ))}
                    </GridList>
                  </div>
                </div> : <div className="row"><EmptyComponent imageStyle={{marginTop: '15%'}} type="empty" header=""
                                                              content="Whoa.. Nothing here yet, move along.."/></div>}
            </Loader>
          </Card>
        </div>
        <ListPackageSearch/>
      </div>
    )
  }
}
