import { useParams } from 'react-router-dom';
import PropTypes from 'prop-types';
import Segment from '../shared/segment';
import NavLink from '../shared/buttons/nav-link';
import ErrorComponent from '../shared/error';

function Error(props) {
  const { cardType } = useParams();

  const urlSearchParams = new URLSearchParams(location.search);
  const priority = urlSearchParams.get('priority');
  const rateType = urlSearchParams.get('rate-type');

  const { error } = props;
  const backURL = `/decks?${urlSearchParams.toString()}`;

  if (error.card && error.card.status === 404) {
    switch (cardType) {
      case 'review':
        return (
          <Segment>
            <p className='my-4 text-center text-xl'>
              <span>فلش کارت </span>
              <span className='font-bold'>{'مروری '}</span>
              {_(priority) && <span className='font-bold'>{_(priority) + ' '}</span>}
              {_(rateType) && <span className='font-bold'>{_(rateType) + ' '}</span>}
              <span> دیگری یافت نشد.</span>
            </p>
            <div className='my-3 flex flex-row justify-center'>
              <NavLink to={backURL} color='red' content='بازگشت' />
            </div>
          </Segment>
        );

      case 'new':
        return (
          <Segment>
            <p className='text-center'>
              <span>فلش کارت </span>
              <span className='font-bold'>{'جدید '}</span>
              {_(priority) && <span className='font-bold'>{_(priority) + ' '}</span>}
              <span> دیگری یافت نشد.</span>
            </p>
            <div className='my-3 flex flex-col items-center'>
              <NavLink to={backURL} color='red' content='بازگشت' />
            </div>
          </Segment>
        );

      case 'archived':
        return (
          <Segment>
            <p className='text-center'>
              <span>فلش کارت </span>
              <span className='font-bold'>{'آرشیو شده '}</span>
              {_(priority) && <span className='font-bold'>{_(priority) + ' '}</span>}
              {_(rateType) && <span className='font-bold'>{_(rateType) + ' '}</span>}
              <span> دیگری یافت نشد.</span>
            </p>
            <div className='my-3 flex flex-col items-center gap-3'>
              <NavLink to={backURL} color='red' content='بازگشت' />
            </div>
          </Segment>
        );
      default:
        return null;
    }
  }
  return <ErrorComponent />;
}

function _(text) {
  return !text ? '' : { starred: 'ستاره دار', active: 'فعال', high: 'ضروری ' }[text];
}

Error.propTypes = {
  error: PropTypes.object.isRequired
};

export default Error;
