import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ProjectButton from 'components/items/ProjectButton';
import { pushRoute } from 'store/utils/routes';
import styleIdentifiers from './introduction.scss';

// assets
import logo from './assets/logo-wf.svg';
import introImg1 from './assets/intro1.jpg';
import introImg2 from './assets/intro2.jpg';
import introImg3 from './assets/intro3.jpg';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type IntroductionProps = StateProps & DispatchProps & OwnProps;

const Introduction = (props: IntroductionProps) => {
  const { history } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  const [currentStep, setCurrentStep] = useState(0);

  const images = [introImg1, introImg2, introImg3];

  const texts = [
    `pages.introduction.pages.step1`,
    `pages.introduction.pages.step2`,
    `pages.introduction.pages.step3`,
  ];
  const goStep = step => {
    if (currentStep === step) return;

    setCurrentStep(step);
  };

  return (
    <div className={styles('introduction')}>
      <div className={styles('introduction-wrapper')}>
        <div className={styles('left-wrapper')}>
          <div className={styles('logo-wrapper')}>
            <img src={logo} alt="logo" />
          </div>
          <div className={styles('content')}>
            <div className={styles('medium-text', 'dark-blue', 'text-center')}>
              <TextItem path={texts[currentStep]} isHtml />
            </div>
            <div className={styles('dots-wrapper')}>
              <div
                className={styles('dot', currentStep === 0 && 'active')}
                onClick={() => goStep(0)}
              />
              <div
                className={styles('dot', currentStep === 1 && 'active')}
                onClick={() => goStep(1)}
              />
              <div
                className={styles('dot', currentStep === 2 && 'active')}
                onClick={() => goStep(2)}
              />
            </div>
            {currentStep < 2 && (
              <ProjectButton
                label="pages.introduction.actions.continue"
                color={styles('button-green')}
                action={() => goStep((currentStep + 1) % 3)}
              />
            )}

            <ProjectButton
              label={
                currentStep === 2
                  ? 'pages.introduction.actions.go'
                  : 'pages.introduction.actions.pass'
              }
              customClassName={styles('button-outline-green')}
              action={() => history.push(pushRoute('home'))}
            />
          </div>
        </div>
        <div className={styles('right-wrapper')}>
          <img src={images[currentStep]} alt="intro" />
        </div>
      </div>
    </div>
  );
};

export default Introduction;
