import { Fragment, useState } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Button from '../shared/buttons/button';
import { addDeckToCart, removeDeckFromCart } from '../../redux/actions/cart';
import { BLANK_TEXT } from '../utils';

function Deck(props) {
  const { deck, selected } = props;
  const onClick = () => (selected ? props.removeDeckFromCart(deck.id) : props.addDeckToCart(deck));

  const [showMore, setShowMore] = useState(false);
  return (
    <div
      className={classNames(
        'm-4 flex flex-col rounded-2xl border-2 shadow-sm',
        { 'border-green-200 bg-green-50': selected },
        { 'border-yellow-200 bg-yellow-50': !selected && !deck.status },
        { 'border-rose-200 bg-rose-50': !selected && deck.status && deck.price === 0 },
        { 'bg-gray-50': !selected && deck.status && deck.price !== 0 },
        'transition delay-150 duration-300 ease-in-out',
        { '-translate-y-1 scale-105 transform-gpu': selected }
      )}
    >
      <div
        className={classNames(
          'border-b-2 p-3',
          { 'border-green-200': selected },
          { 'border-yellow-200': !selected && !deck.status },
          { 'border-rose-200': !selected && deck.status && deck.price === 0 }
        )}
      >
        <p className='text-center font-medium'>{deck.name}</p>
      </div>
      <div
        className={classNames(
          'grow border-b-2 p-3',
          { 'border-green-200': selected },
          { 'border-yellow-200': !selected && !deck.status },
          { 'border-rose-200': !selected && deck.status && deck.price === 0 }
        )}
      >
        <p className='p-1'>
          <span className='font-medium'>نام درس: </span>
          {deck.lesson.name}
        </p>
        <p className='p-1'>
          <span className='font-medium'>فصل‌ها: </span>
          {deck.allChapters && <span>همه</span>}
        </p>
        {!deck.allChapters && (
          <Fragment>
            {deck.chapters.map(
              (chapter, index) =>
                (showMore || index < 3) && (
                  <p key={chapter.id} className='p-1'>{`${index + 1}. ${chapter.name}`}</p>
                )
            )}

            {deck.chapters.length > 3 && (
              <button onClick={setShowMore.bind(null, !showMore)} className='py-1 px-4'>
                ...
              </button>
            )}
          </Fragment>
        )}
      </div>
      <div
        className={classNames(
          'border-b-2 p-3',
          { 'border-green-200': selected },
          { 'border-yellow-200': !selected && !deck.status },
          { 'border-rose-200': !selected && deck.status && deck.price === 0 }
        )}
      >
        <span className='font-medium'>توضیحات: </span>
        {deck.description || BLANK_TEXT}
      </div>
      <div
        className={classNames(
          'border-b-2 p-3 text-center',
          { 'border-green-200': selected },
          { 'border-yellow-200': !selected && !deck.status },
          { 'border-rose-200': !selected && deck.status && deck.price === 0 }
        )}
      >
        <span className='font-medium'>قیمت: </span>
        <span>{deck.price ? `${deck.price.toLocaleString()} ریال` : 'رایگان'}</span>
      </div>
      <div className='p-3'>
        <Button
          color={selected ? 'red' : 'green'}
          colorWeight={400}
          onClick={onClick}
          className='m-auto'
          content={selected ? 'حذف از سبد خرید' : 'افزودن به سبد خرید'}
        />
      </div>
    </div>
  );
}

Deck.propTypes = {
  deck: PropTypes.object.isRequired,
  selected: PropTypes.bool.isRequired,
  addDeckToCart: PropTypes.func.isRequired,
  removeDeckFromCart: PropTypes.func.isRequired
};

function mapStateToProps({ cart }, { deck }) {
  return { selected: cart.findIndex(({ id }) => deck.id === id) >= 0 };
}

export default connect(mapStateToProps, { addDeckToCart, removeDeckFromCart })(Deck);
