import PropTypes from 'prop-types';
import Modal from '../shared/modal';
import Button from '../shared/buttons/button';
import NavLink from '../shared/buttons/nav-link';

function ChapterModal(props) {
  const { chapter, priority, rateType } = props;
  if (!chapter) return null;

  const noCards =
    chapter.reviewCardCount === 0 && chapter.newCardCount === 0 && chapter.archivedCardCount === 0;

  function getURL(cardType) {
    const url = `/cards/ch-${chapter.id}/${cardType}`;
    const urlSearchParams = new URLSearchParams();
    if (priority) urlSearchParams.set('priority', priority);
    if (cardType !== 'new' && rateType) urlSearchParams.set('rate-type', rateType);
    const urlSearchParamsSTR = urlSearchParams.toString();
    if (!urlSearchParamsSTR) return url;
    return url + `?${urlSearchParamsSTR}`;
  }

  return (
    <Modal
      showModal
      onClose={props.onClose}
      header='دسترسی به فلش کارت‌ها'
      body={
        <div className='text-base'>
          <p>
            <span>شما فصل </span>
            <span className='font-medium'>{chapter.name}</span>
            <span> از درس </span>
            <span className='font-medium'>{props.lessonName}</span>
            <span> را انتخاب کرده اید.</span>
          </p>
          {noCards ? (
            <div>
              <p>تمام فلش کارت های جدید و مروری این درس را مطالعه کرده اید.</p>
              <p>مرورهای بعدی این درس در روزهای آینده فعال خواهد شد.</p>
            </div>
          ) : (
            <p>
              با استفاده از دکمه‌های زیر می‌توانید به فلش کارت‌های مورد نظر خود دسترسی داشته باشید.
            </p>
          )}
        </div>
      }
      footer={
        <div className='flex flex-wrap justify-end gap-2'>
          {chapter.reviewCardCount > 0 && (
            <NavLink to={getURL('review')} size='sm' color='red'>
              <span className='m-1 text-xs font-medium'>مروری</span>
              <span className='m-1 rounded-xl bg-white py-0.5 px-1 text-xs text-red-800'>
                {chapter.reviewCardCount}
              </span>
            </NavLink>
          )}
          {chapter.newCardCount > 0 && (
            <NavLink to={getURL('new')} size='sm' color='yellow'>
              <span className='align-middle text-xs font-medium'>جدید</span>
              <span className='m-1 rounded-xl bg-white py-0.5 px-1 text-xs text-yellow-800'>
                {chapter.newCardCount}
              </span>
            </NavLink>
          )}
          {chapter.archivedCardCount > 0 && (
            <NavLink to={getURL('archived')} size='sm' color='blue'>
              <span className='text-xs font-medium'>آرشیو شده</span>
              <span className='m-1 rounded-xl bg-white py-0.5 px-1 text-xs text-blue-800'>
                {chapter.archivedCardCount}
              </span>
            </NavLink>
          )}
          {noCards && <Button color='red' content='بازگشت' onClick={props.onClose} />}
        </div>
      }
    />
  );
}

ChapterModal.propTypes = {
  chapter: PropTypes.object,
  lessonName: PropTypes.string,
  priority: PropTypes.string,
  rateType: PropTypes.string,
  onClose: PropTypes.func.isRequired
};

export default ChapterModal;
