import { Fragment } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { ArrowSmLeftIcon, ArrowSmRightIcon } from '@heroicons/react/outline';
import Button from '../shared/buttons/button';
import { archiveStudentCard } from '../../redux/actions/student-card';
import NavLink from '../shared/buttons/nav-link';
import { DEFAULT_DECKS_ROUTE } from '../utils/index';

function Footer(props) {
  const history = useHistory();
  const { chapterId, type } = useParams();
  let nextURL = `/cards/ch-${chapterId}/${type}`;
  const urlSearchParamsSTR = new URLSearchParams(location.search).toString();
  if (urlSearchParamsSTR) {
    nextURL += `?${urlSearchParamsSTR}`;
  }
  const { disabledNext } = props;

  return (
    <Fragment>
      <div
        className={
          'align-center fixed bottom-0 left-0 flex w-full flex-row-reverse justify-between bg-black bg-opacity-60'
        }
      >
        <Button color='red' onClick={() => history.push(DEFAULT_DECKS_ROUTE)} className='m-2'>
          بازگشت
          <ArrowSmLeftIcon width={20} height={20} className='stroke-current text-white' />
        </Button>
        <NavLink
          to={nextURL}
          color='green'
          textColor='white'
          disabled={disabledNext}
          className='m-2'
        >
          <ArrowSmRightIcon width={20} height={20} className='stroke-current text-white' />
          بعدی
        </NavLink>
      </div>
    </Fragment>
  );
}

Footer.propTypes = {
  disabledNext: PropTypes.bool.isRequired,
  showArchive: PropTypes.bool.isRequired,
  archiveStudentCard: PropTypes.func.isRequired,
  isPermanentArchive: PropTypes.bool.isRequired
};

function mapStateToProps({ review }) {
  return { isPermanentArchive: !!review.data.studentCard && !!review.data.studentCard.status };
}

export default connect(mapStateToProps, { archiveStudentCard })(Footer);
