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/ProjectButton';
import { pushRoute } from 'store/utils/routes';
import Logo from 'components/items/Logo';
import styleIdentifiers from './OrderSuccess.module.scss';

const styles = classNames.bind(styleIdentifiers);

export interface OrderSuccessProps {}

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

  const goHistory = () => {
    history.push(pushRoute('myBookings', lg));
  };

  const goSearch = () => {
    history.push(pushRoute('search', lg));
  };

  return (
    <div className={styles('order-success')}>
      <div className={styles('container')}>
        <Logo small />
        <TextItem tag="h1" path="pages.orderSuccess.title" />
        <TextItem tag="div" className={styles('message')} path="pages.orderSuccess.message" />
        <div className={styles('buttons')}>
          <ProjectButton
            color="primary"
            action={goHistory}
            label="pages.orderSuccess.buttonHistory"
          />
          <ProjectButton
            color="border-primary"
            action={goSearch}
            label="pages.orderSuccess.buttonSearch"
          />
        </div>
      </div>
    </div>
  );
};

export default OrderSuccess;
