import React from 'react';
import './yearnavigator.scss'
import {UserDeltia} from "../../../models/HrSupport/PersonalFolder";


type YearNavigatorProps = {
    canEditPeriod?:boolean
    years: UserDeltia
    active: string
    setActive: (year: string) => void
    isLocked: boolean
    onEdit: (year:string) =>void
}

const YearNavigator = ({years, canEditPeriod, active, setActive, isLocked, onEdit}: YearNavigatorProps) => {

    return (
        <div className={'year-navigator'}>
            {
                years.map(year =>
                    <div
                        key={year.year}
                        onClick={() => {

                            if(active === year.year && !isLocked){
                                onEdit(active)
                            }
                            if(active !== year.year){
                                setActive(year.year)
                            }

                        }}
                        className={`year ${!canEditPeriod && 'isLocked'} ${year.year === active && 'active'} ${isLocked && 'isLocked'}`}>
                        {year.year}
                    </div>
                )
            }
        </div>
    );
}

export default YearNavigator;