import { useState } from 'react';
import PropTypes from 'prop-types';
import Modal from '../../shared/modal';
import Button from '../../shared/buttons/button';
import { InformationCircleIcon } from '@heroicons/react/outline';
import Audio from '../../shared/audio';

function ResetModalStepOne(props) {
  const [showGuide, setShowGuide] = useState(false);

  function toggleShowGuide() {
    setShowGuide(showGuide => !showGuide);
  }

  return (
    <Modal
      showModal
      onClose={props.onClose}
      header={<span className='text-red-400'>بازنشانی فلش کارت‌ها</span>}
      body={
        <div className='text-base'>
          <p>
            <span>شما در حال </span>
            <span className='font-semibold text-red-500'>بازنشانی </span>
            <span>فلش کارت های </span>
            <span className='font-semibold'>{props.itemLabel}</span>
            <span> هستید.</span>
          </p>
          <p>در صورت تایید تمام سوابق مرور فلش کارت های این مبحث حذف خواهد شد.</p>
          <p>
            همچنین امتیازاتی که از مطالعه فلش کارت های این بخش کسب شده از بین خواهد رفت و ممکن از
            رتبه شما در رتبه بندی هفتگی و ماهانه تغییر کند.
          </p>
          <p className='font-medium'>آیا مطمئن هستید؟</p>
          {showGuide && (
            <>
              <hr className='my-4' />
              <div id='guide'>
                <Audio src='/voices/reset-guide.mp3' caption='فایل صوتی توضیحات بازنشانی (ریست):' />
              </div>
            </>
          )}
        </div>
      }
      footer={
        <div className='flex justify-between'>
          <Button circular color='gray' colorWeight={400} onClick={toggleShowGuide}>
            <InformationCircleIcon width={20} height={20} />
          </Button>
          <div className='flex gap-1'>
            <Button color='green' content='بلی' onClick={props.onNext} />
            <Button color='red' content='خیر' onClick={props.onClose} />
          </div>
        </div>
      }
    />
  );
}

ResetModalStepOne.propTypes = {
  itemLabel: PropTypes.string.isRequired,
  onClose: PropTypes.func.isRequired,
  onNext: PropTypes.func.isRequired
};

export default ResetModalStepOne;
