import React from 'react';
import PropTypes from 'prop-types';
import { autobind } from 'core-decorators';
import Guide from '../src/components/Guide';

const propTypes = {
    guideCloseCondition: PropTypes.number,
    guideData: PropTypes.array,
};

const defaultProps = {
    guideCloseCondition: 1,
    guideData: [],
};

@autobind
class GuideWrapper extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
        <div style={{marginLeft: '100px'}}>
            <div className="step-guide-1" style={{margin: '10px'}}>step1</div>
            <div className="step-guide-3" style={{margin: '10px'}}>step3</div>
            <div className="step-guide-2" style={{margin: '10px', float: 'left'}}>step2</div>
            <div className="step-guide-5" style={{margin: '10px', float: 'left'}}>step5</div>
            <div className="step-guide-4" style={{margin: '10px', float: 'left'}}>step4</div>
            <div className="step-guide-7" style={{margin: '10px', float: 'left'}}>step7</div>
            <div className="step-guide-6" style={{marginTop: '1000px', marginBotton: '400px'}}>step6</div>
            <Guide 
                guideCloseCondition={2000}
                guideData={[
                    {
                        selector: '.step-guide-1',
                        guideContent: '<div><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div><div>2</div><div>3</div></div>',
                    },
                    {
                        selector: '.step-guide-2',
                        guideContent: 'Content',
                    },
                    {
                        selector: '.step-guide-3',
                        guideContent: 'Content',
                    },
                    {
                        selector: '.step-guide-4',
                        guideContent: 'Content',
                    },
                    {
                        selector: '.step-guide-5',
                        guideContent: 'Content',
                    },
                    {
                        selector: '.step-guide-6',
                        guideContent: 'Content',
                    },
                    {
                        selector: '.step-guide-7',
                        guideContent: 'Content',
                    }
                ]}/>
        </div>
    );
  }
}

GuideWrapper.propTypes = propTypes;
GuideWrapper.defaultProps = defaultProps;

export default GuideWrapper;