import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useResponsive, useIsMobile } from '@farfetch/react-context-responsive';

const JKPersonInstrumentsList = ({ instruments, showAll, toggleMoreDetails }) => {
  const proficiencies = {
    '1': 'Beginner',
    '2': 'Intermediate',
    '3': 'Expert'
  };

  const LIMIT = 4;

  const [instrumentsToShow, setInstrumentsToShow] = useState([]);

  const { greaterThan } = useResponsive();
  const { isMobile } = useIsMobile();

  useEffect(() => {
    showAll || !greaterThan.xs ? setInstrumentsToShow(instruments) : setInstrumentsToShow(instruments.slice(0, LIMIT));
  }, [showAll]);

  return (
    <div data-testid="instrumentList">
      {instrumentsToShow &&
        instrumentsToShow.map(instrument => (
          <div key={instrument.instrument_id} className="text-nowrap">
            <strong>{instrument.description}:</strong> {proficiencies[instrument.proficiency_level]}
          </div>
        ))}
      {((!showAll && greaterThan.xs) || (showAll && !greaterThan.xs)) && instruments.length > LIMIT && (
        <a href="#/" onClick={e => toggleMoreDetails(e)}>
          More »
        </a>
      )}
    </div>
  );
};

JKPersonInstrumentsList.propTypes = {
  instruments: PropTypes.arrayOf(PropTypes.object).isRequired,
  showAll: PropTypes.bool,
  toggleMoreDetails: PropTypes.func
};

JKPersonInstrumentsList.defaltProps = {
  showAll: false
};

export default JKPersonInstrumentsList;
