import { Fragment, useState } 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 ConfirmModal from '../shared/confirm-modal';
import NavLink from '../shared/buttons/nav-link';
import { DEFAULT_DECKS_ROUTE } from '../utils/index';

function Footer(props) {
  const history = useHistory();
  const { chapterId, cardType } = useParams();
  const [showConfirmModal, setShowConfirmModal] = useState(false);
  let previousURL = `/reviews/last/ch-${chapterId}/${cardType}`;
  let nextURL = `/cards/ch-${chapterId}/${cardType}`;
  const urlSearchParamsSTR = new URLSearchParams(location.search).toString();
  if (urlSearchParamsSTR) {
    previousURL += `?${urlSearchParamsSTR}`;
    nextURL += `?${urlSearchParamsSTR}`;
  }

  const archiveText = props.isPermanentArchive ? 'آرشیو' : 'آرشیو موقت';

  return (
    <Fragment>
      <ConfirmModal
        showModal={showConfirmModal}
        content={
          <p>
            <span>آیا از </span>
            <span className='font-medium'>{archiveText}</span>
            <span> این فلش کارت مطمئن هستید؟</span>
          </p>
        }
        onConfirm={async () => {
          await props.archiveStudentCard();
          history.push(nextURL);
        }}
        onCancel={() => setShowConfirmModal(false)}
      />
      <div
        className={
          'align-center fixed bottom-0 left-0 flex w-full flex-row-reverse justify-between bg-black bg-opacity-60'
        }
      >
        {props.isAnyOptionSelected ? (
          <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={previousURL} color='red' className='m-2'>
            قبلی
            <ArrowSmLeftIcon width={20} height={20} className='stroke-current text-white' />
          </NavLink>
        )}
        {props.showArchive && (
          <Button
            color={props.isPermanentArchive ? 'indigo' : 'blue'}
            onClick={() => setShowConfirmModal(true)}
            className='m-2'
          >
            {props.isPermanentArchive ? 'آرشیو' : 'آرشیو موقت'}
          </Button>
        )}
        <NavLink
          replace
          to={nextURL}
          color='green'
          textColor='white'
          disabled={!props.isAnyOptionSelected}
          className='m-2'
        >
          <ArrowSmRightIcon width={20} height={20} className='stroke-current text-white' />
          بعدی
        </NavLink>
      </div>
    </Fragment>
  );
}

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

function mapStateToProps({ review }, { showArchive }) {
  return {
    isPermanentArchive: !!review.data.studentCard && review.data.studentCard.status === 1,
    showArchive: showArchive && !!review.data.studentCard && review.data.studentCard.status !== 2
  };
}

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