import propTypes from 'prop-types';

const levelMappings = {
    'N': 'Nice to have',
    'B': 'Podstawowy',
    'M': 'Średnio zaawansowany',
    'A': 'Zaawansowany',
    'E': 'Ekspert',
};
const skillLevels = ['N', 'B', 'M', 'A', 'E'];

function renderCircles(letter, handleCircleClick) {
    const level = levelMappings[letter];
    const numberOfFilledCircles = Object.keys(levelMappings).indexOf(letter) + 1;

    return (
        <>
            {[...Array(5)].map((_, index) => (
                <div 
                    key={index} 
                    onClick={() => handleCircleClick(skillLevels[index])}
                    className={`justify-self-center w-3.5 h-3.5 rounded-full 
                    ${index < numberOfFilledCircles ? 'bg-red-300 hover:bg-red-700' : 'bg-gray-500 hover:bg-gray-600'}`} 
                />
            ))}
        </>
    );
};


const SelectedSkill = ({ skill_name, skillId ,letter, onLevelChange, removeSkillFromList }) => {
    const handleCircleClick = (newLetter) => {
        // const letter = Object.keys(levelMappings)[levelIndex]; 
        console.log(`Circle clicked: ${newLetter}`);
        onLevelChange(skillId, newLetter);
      };
  return (
    <div className="mr-12">
        <div key={skillId} className="relative selected-skill bg-slate-200 rounded-2xl h-min w-full p-2 mb-5 m-2 ">
          <div className='flex justify-center items-center'>
          <span className='text-slate-700 font-semibold text-[12px] text-center w-48 '>{skill_name}</span>
          </div>
          <button onClick={(e) => {e.preventDefault(); removeSkillFromList(skill_name)}} className="absolute top-1 right-5 text-black">
            &times;
          </button>
          <div className='h-0.5 w-full bg-dimWhite opacity-60 mt-1'></div>
          <div className='grid grid-cols-5 mt-2'>
          {renderCircles(letter, handleCircleClick)}
          </div>
          <p className='font-poppins font-semibold text-slate-700 text-center text-[12px] mt-1'>{levelMappings[letter]}</p>
        </div>
    </div>
  );
};

SelectedSkill.propTypes = {
    skill_name: propTypes.string,
    skillId: propTypes.number,
    letter: propTypes.string,
    onLevelChange: propTypes.func,
    removeSkillFromList: propTypes.func,
    };

export default SelectedSkill;