import Table from 'react-bootstrap/Table';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Tooltip from 'react-bootstrap/Tooltip';
import Button from 'react-bootstrap/Button';
import PropTypes from 'prop-types';

function Cards(props) {
  return (
    <Table striped bordered hover className='text-center'>
      <thead>
        <tr>
          <th className='align-middle'>شناسه</th>
          <th className='align-middle'>
            <p>درس</p>
            <p>فصل</p>
          </th>
          <th className='align-middle'>سوال</th>
          <th className='align-middle'>پیش نمایش</th>
        </tr>
      </thead>
      <tbody>
        {props.cards.map(card => (
          <tr key={card.id}>
            <td className='align-middle'>{card.id}</td>
            <td className='align-middle'>
              <p>{card.lesson.name}</p>
              <p>{card.chapter.name}</p>
            </td>
            <td className='align-middle'>
              <div
                dangerouslySetInnerHTML={{ __html: card.question }}
                style={{ maxWidth: '62vw', overflowX: 'auto' }}
              />
            </td>
            <td className='align-middle'>
              <OverlayTrigger
                placement='right'
                overlay={
                  <Tooltip id='tooltip-top'>
                    <div dangerouslySetInnerHTML={{ __html: card.question }} />
                    <div>
                      {card.options.map((option, index) => (
                        <p key={option.id}>
                          <span>{`گزینه ${index + 1}: `}</span>
                          <span dangerouslySetInnerHTML={{ __html: option.text }} />
                          <span>{option.isCorrect ? ' ✓ ' : ' ✗ '}</span>
                        </p>
                      ))}
                    </div>
                    <div dangerouslySetInnerHTML={{ __html: card.answer }} />
                  </Tooltip>
                }
              >
                <Button>پیش نمایش</Button>
              </OverlayTrigger>{' '}
            </td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}

Cards.propTypes = {
  cards: PropTypes.arrayOf(PropTypes.object).isRequired
};

export default Cards;
