import * as React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import MobileStepper from '@material-ui/core/MobileStepper';
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';

import { ImageRendererProps } from '../types/renderer';
import { iconStyle } from './../common/styles';
import ImageIcon from '@material-ui/icons/Landscape';

const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

const styles = theme => ({
  root: {
    maxWidth: 400,
    flexGrow: 1,
  },
  header: {
    display: 'flex', 
    alignItems: 'center',
    height: 50,
    paddingLeft: theme.spacing.unit * 4,
    backgroundColor: theme.palette.background.default,
  },
  img: {
    height: 255,
    display: 'block',
    maxWidth: 400,
    overflow: 'hidden',
    width: '100%',
    objectFit:'scale-down',
    margin:'auto'
  }
});
const customControl = {
  background : 'none',
  padding : '12px 0 0 0',
  justifyContent : 'center'
}

class ImageHtmlRenderer extends React.Component<ImageRendererProps> {
  constructor(props:ImageRendererProps) {
    super(props);
    this.state = {
      activeStep: 0
    }
  }
  handleNext = () => {
    this.setState(prevState => ({
      activeStep: prevState.activeStep + 1,
    }));
  };

  handleBack = () => {
    this.setState(prevState => ({
      activeStep: prevState.activeStep - 1,
    }));
  };

  handleStepChange = activeStep => {
    this.setState({ activeStep });
  };

  renderImageForCarousel = (stateData) => {
    return stateData.map((step) => {
      return (
        <div>
          <a href={step.href}>
            <img src={step.src}/>
          </a>         
        </div>
        
      )
    })
  }

  render() {
    const { isEditMode, state, imagePreview, classes, theme } = this.props;
    const { activeStep } = this.state;
    // console.log("[Carousel : imagehtmlrenderer image state value ",state);

    let stateTempVal = [];
    let maxSteps = 0;
    if(state.carouselData) {
      maxSteps = state.carouselData.length;
      stateTempVal = state.carouselData;
    } 
    
    if(stateTempVal.length > 0) {
      return (
        <>
          <div className={classes.root+' materialCarousel'} id="materialCarouselId">
            <AutoPlaySwipeableViews
              axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
              index={activeStep}
              onChangeIndex={this.handleStepChange}
              enableMouseEvents
            >
              {stateTempVal.map((step, index) =>  (
                <div key={step.id} style={{position:'relative', top:'50%', left:'50%',transform:'translate(-50%,-50%)'}}> 
                  {Math.abs(activeStep - index) <= 2 ? (
                    step.href && !isEditMode ? (
                      <a href={step.href} target="_blank" >
                        <img className={classes.img} src={step.src} alt="Image"  />
                      </a>)
                      :(
                        <img className={classes.img} src={step.src} alt="Image" />
                      )
                  ) : null}
                </div>
              ))}
            </AutoPlaySwipeableViews>
            <MobileStepper
              steps={maxSteps}
              position="static"
              activeStep={activeStep}
              className={classes.mobileStepper}
              style = {customControl}
            />
          </div>
          {/* Adding one more extra section for slick slider and used while publishing page */}
          <section className="regular2 slider" style={{display:'none'}}>
            {this.renderImageForCarousel(stateTempVal) }
          </section>
        </>
      );
    } else {
      return (
        <div>
          <div className="ory-plugins-content-image-placeholder">
            <ImageIcon style={iconStyle} />
          </div>
        </div>
      )
    }
  }
};
ImageHtmlRenderer.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

// export default ImageHtmlRenderer;
export default withStyles(styles, { withTheme: true })(ImageHtmlRenderer);