import React from 'react';
import {inject, observer} from 'mobx-react';
import Lightbox from 'react-images';
import ReactMarkdown from 'react-markdown';
import {
  Card,
  CardTitle,
  Dialog,
  Divider,
  FlatButton,
  GridList,
  GridTile,
  IconButton,
  RaisedButton,
  Snackbar,
  Step,
  StepLabel,
  Stepper,
  Toolbar,
  ToolbarGroup,
  ToolbarTitle,
} from 'material-ui';
import ArrowForwardIcon from 'material-ui/svg-icons/navigation/arrow-forward';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import SnackbarMessage from '../../Service/SnackbarMessage';
import '../style.scss';
import ScheduleForm from "./ScheduleForm";
import PaymentForm from "./PaymentForm";
import CustomerForm from "./CustomerForm";
import NumberFormat from 'react-number-format';
import LoadingDialog from "../../LoadingDialog";
import Loader from 'react-loader-advanced';

@inject('appstate')
@observer
export default class DetailPackage extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      images: [],
      lightboxIsOpen: false,
      snackbarVisibility: false,
      currentImage: 0,
      stepIndex: 0,
      open: false
    };
    this.userData = props.appstate.userData;
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.packageStore = props.appstate.packages;
    this.packageService = props.appstate.packageServiceStore;
    this.categories = props.appstate.category;
    this.globalUI = props.appstate.globalUI;
  }

  componentDidMount() {
    window.scrollTo(0, 0);
    this.packageStore.getPackageById(this.props.match.params.id).then(() => {
      let array = []
      this.packageStore.packageData.galleries.image.map(row => {
        let data = {src: this.http.appendImagePath(row)};
        array.push(data);
      })
      this.packageStore.imageGallerySource = array;
      this.categories.getCategoryDetail(this.packageStore.packageData.category_id);
    });
  }

  componentDidCatch(error, info) {
    console.error(error, info);
  }

  openLightbox = (index) => {
    console.log(index, "ahaaay")
    this.setState({
      currentImage: index,
      lightboxIsOpen: true,
    })
  };

  closeLightbox = () => {
    this.setState({
      lightboxIsOpen: false
    })
  };

  gotoPrevLightBoxImage = () => {
    this.setState({
      currentImage: this.state.currentImage - 1
    })
  };

  gotoNextLightboxImage = () => {
    this.setState({
      currentImage: this.state.currentImage + 1
    })
  };

  closeSnackbar = () => {
    this.setState({snackbarVisibility: false});
  };

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

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

  getStepContent(stepIndex) {
    switch (stepIndex) {
      case 0:
        return <CustomerForm/>;

      case 1:
        return <ScheduleForm/>;

      case 2:
        return <PaymentForm/>;

    }
  }

  handleNext = () => {
    const {stepIndex} = this.state;
    console.log(stepIndex);
    if (stepIndex === 2) {
      this.packageService.postPackages(this.packageService.postData).then(() => {
        this.setState({open: false, stepIndex: 0, snackbarVisibility: true});
      })
    }
    else if (stepIndex < 2) {
      this.setState({stepIndex: stepIndex + 1});
    }
  }

  handlePrev = () => {
    const {stepIndex} = this.state;

    if (stepIndex > 0) {
      this.setState({stepIndex: stepIndex - 1});
    }
  }

  render() {

    const {stepIndex} = this.state;

    const actions = [
      <FlatButton
        label="Previous"
        disabled={stepIndex === 0}
        onClick={this.handlePrev}
        style={{marginRight: 12}}
      />,
      <RaisedButton
        label={stepIndex === 2 ? 'Finish' : 'Next'}
        primary={true}
        onClick={this.handleNext}
      />
    ];

    const title =
      <div>
        <h4 style={{
          fontSize: 26,
          marginBottom: 0,
          marginTop: 0,
          fontWeight: 500,
          color: "white"
        }}>Order Package</h4>
        <IconButton
          iconClassName="material-icons"
          tooltip="Close"
          iconStyle={{
            color: '#fff',
          }}
          style={{
            position: 'absolute',
            right: 0,
            top: 0
          }}
          onClick={this.handleClose}
        >
          close
        </IconButton>
      </div>
    ;

    const styles = {
      root: {
        // display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
      },
      gridList: {
        display: 'flex',
        flexWrap: 'nowrap',
        overflowX: 'auto',
        scrollDirection: 'horizontal'
      },
      titleStyle: {
        color: 'rgb(0, 188, 212)',
      },
    };

    return (
      <div style={{marginTop: 0}} className="animated fadeIn">
        <div className="col l12 m12 s12">
          <Divider style={{marginLeft: '10px', marginRight: '10px'}}/>
          <div style={{marginBottom: '10px', marginTop: '10px', marginLeft: '0px'}}>
            <FlatButton
              className="headerMenu"
              inkbarstyle={{background: 'transparent'}}
              hoverColor="#f1f5f9"
              style={{background: '#ffffff00'}}
              onClick={() => this.props.history.goBack()}
              label="Back"
              primary={true}
              icon={<NavigationArrowBack/>}
            />
          </div>
          {/*<Card className="animated fadeIn cardLite" style={{background: 'rgb(43, 57, 145)', marginBottom: 10}}>*/}
            {/*<div style={{width: '100%', margin: 'auto'}}>*/}
              {/*<Stepper activeStep={0}>*/}
                {/*<Step>*/}
                  {/*<StepLabel style={{color: "white"}}>Select Package</StepLabel>*/}
                {/*</Step>*/}
                {/*<Step>*/}
                  {/*<StepLabel style={{color: "white"}}>Participant Details</StepLabel>*/}
                {/*</Step>*/}
                {/*<Step>*/}
                  {/*<StepLabel style={{color: "white"}}>Review & Booking</StepLabel>*/}
                {/*</Step>*/}
              {/*</Stepper>*/}
            {/*</div>*/}
          {/*</Card>*/}
        </div>
        <div className="row" style={{marginBottom: 5}}>
          <div className="col l8 m8 s8">
            <Card>
              <Loader show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
                      messageStyle={{left: 300, top: 100, position: 'absolute'}}
                      backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
                <CardTitle title={
                  <p className="package-name">{this.packageStore.packageData.name}</p>
                } subtitle={
                  <p className='justify'><ReactMarkdown source={this.packageStore.packageData.description} /></p>
                }/>

                <img src={this.http.appendImagePath(this.packageStore.packageData.banner)} width="100%"
                     style={{marginBottom: '10px'}}/>
                <div style={{padding: '24px'}}>

                  <Lightbox
                    currentImage={this.state.currentImage}
                    images={this.packageStore.imageGallerySource}
                    isOpen={this.state.lightboxIsOpen}
                    onClickPrev={this.gotoPrevLightBoxImage}
                    onClickNext={this.gotoNextLightboxImage}
                    onClose={this.closeLightbox}
                    preloadNextImage={false}
                  />

                  <div className="row">
                    <div style={styles.root}>
                      <GridList style={styles.gridList} cols={2.2} padding={15}>
                        {this.packageStore.packageData.galleries.image.map((tile, index) => (
                          <GridTile
                            key={index}
                            style={{
                              boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
                              borderRadius: '4px'
                            }}
                          >
                            <img src={this.http.appendImagePath(tile)}
                                 onClick={() => this.openLightbox(index)}
                                 className="tile-package"/>
                          </GridTile>
                        ))}
                      </GridList>

                    </div>
                  </div>

                  <div className="row" style={{marginTop: '30px'}}>
                    <div className="header-text-mini" style={{fontSize: '1.23em', marginBottom: '20px'}}>Itenerary</div>
                    <div className="itenaryBody">
                      <div className="row itenary ">
                        <ul>
                          {this.packageStore.packageData.itinerary.data.map((itenerary, index) => {
                            return (

                              <li key={index}><span></span>
                                <div>
                                  <div className="title">{itenerary.place}</div>
                                  <div className="info">{itenerary.activities}</div>
                                  <div className="type"></div>
                                </div>
                                <span
                                  className="number"><span>Day {itenerary.day}</span><span> </span></span>
                              </li>
                            )
                          })
                          }
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </Loader>
            </Card>
          </div>

          <div className="col l4 m4 s4" style={{position: 'sticky', top: 90}}>
            <Card>
              <div style={{padding: '14px'}}>
                <div className="col l12">
                  <div className="header-text-mini" style={{fontSize: '1.23em', marginBottom: '20px'}}>Detail Tour</div>
                </div>
                <div className="row">
                  <div className="col l4 passive">Categories</div>
                  <div className="col l8"><p>{this.categories.categoryData.name}</p></div>
                </div>
                <div className="row">
                  <div className="col l4 passive">Destination</div>
                  <div className="col l8"><p>{this.packageStore.packageData.destination.place}</p></div>
                </div>
                <div className="row">
                  <div className="col l4 passive">Price</div>
                  <div className="col l8"><p><NumberFormat value={this.packageStore.packageData.price}
                                                           displayType={'text'} thousandSeparator={true}
                                                           prefix={'IDR '}/></p></div>
                </div>
                {/*<div className="row">
                  <div className="col l4 passive">Pax</div>

                  <div className="col l8"><p>{this.packageStore.packageData.pax}</p></div>
                </div>*/}
                <div className="row">
                  <div className="col l4 passive">Hotels</div>

                  <div className="col l8">
                    {this.packageStore.packageData.hotels.hotels.map((item, index) => {
                              return(
                                <div>
                                  <p className="listCustomerDetailItemValue">
                                    {item.name}
                                  </p>
                                  {/*<div style={styles.root}>
                                    <GridList style={styles.gridList} cols={2.2}>
                                      {this.packageStore.packageData.hotels.hotels[index].image.map((tile, index) => (
                                        <GridTile
                                          key={index}
                                          style={{
                                            boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
                                            borderRadius: '4px'
                                          }}
                                        >
                                          <img src={this.http.appendImagePath(tile)} className="tile-package"/>
                                        </GridTile>
                                      ))}
                                    </GridList>
                                  </div>*/}
                                </div>
                              );
                            })}
                  </div>
                </div>
                <div className="row">
                  <div className="col l4 passive">Transport</div>

                  <div className="col l8"><p>{this.packageStore.packageData.transportation}</p></div>
                </div>
                <div className="row">
                  <div className="col l4 passive">Duration</div>

                  <div className="col l8"><p>{this.packageStore.packageData.duration.duration}</p></div>
                </div>
                <div className="row">
                  {this.userData.role === 'admin' ? "" : <RaisedButton primary={true} fullWidth={true} label="Choose Package" onClick={this.handleOpen}/>}
                </div>
              </div>
            </Card>
          </div>

        </div>

        <Dialog
          title={title}
          actions={actions}
          modal={true}
          open={this.state.open}
          onRequestClose={this.handleClose}
          titleStyle={{
            backgroundColor: 'rgb(66, 71, 112)',
            color: '#fff'
          }}
          contentStyle={{
            marginTop: "-110px"
          }}
          bodyStyle={{
            marginTop: 20
          }}
          autoScrollBodyContent={true}
        >
          <div style={{width: '100%', maxWidth: 700, margin: 'auto'}}>
            <Stepper activeStep={stepIndex} connector={<ArrowForwardIcon/>}>
              <Step>
                <StepLabel>Fill the Customer Data</StepLabel>
              </Step>
              <Step>
                <StepLabel>Choose your schedule</StepLabel>
              </Step>
              <Step>
                <StepLabel>Choose your payment Method</StepLabel>
              </Step>
            </Stepper>
            {this.getStepContent(stepIndex)}
          </div>
        </Dialog>
        <SnackbarMessage open={this.state.snackbarVisibility} message="Success Order Package"
                         closeSnackbar={this.closeSnackbar}/>
      </div>


    )
  }
}
