import { useSelector } from "react-redux";
import { Link, useLocation } from "react-router-dom";
import { RootState } from "../../app/store";

export default function ProgressBar(){
    const {profileFor} = useSelector((state: RootState) => state.registrationstep1);
    const location = useLocation();
    const currentPath = location.pathname;
    const locationLastChar = parseInt(currentPath.charAt(currentPath.length - 1));
    return (
        <div className="mb-0 bg-white p-4 rounded-lg">
            <div className={profileFor != 'others' ? 'relative flex items-center justify-between z-0' : 'relative flex items-center justify-between z-0 w-[50%] m-auto'}>
            {/* Line connecting all circles */}
            <div className="absolute h-0.5 bg-gray-200 w-full"></div>
            
            {/* Active line */}
            {
                locationLastChar === 1 ? (
                    <div className="absolute h-0.5 bg-primary w-0/3"></div>
                ) : locationLastChar === 2 ? (
                    <div className="absolute h-0.5 bg-primary w-1/3"></div>
                ) : locationLastChar === 3 ? (
                    <div className="absolute h-0.5 bg-primary w-2/3"></div>
                ) : (
                    <div className="absolute h-0.5 bg-primary w-full"></div>
                )
            }
            
            
            {/* Step circles */}
            <Link to="/registration/step-1">
                <div className={`relative z-10 flex items-center justify-center w-[24px] h-[25px] rounded-full ${locationLastChar >= 1 ? 'bg-primary text-white border-2 border-primary' : 'bg-white text-gray-500 border-2 border-gray-200'}`}>
                    <span className="text-xs">1</span>
                </div>
            </Link>
            <Link to={profileFor != 'others' ? '/registration/step-2' : '/registration/candidate-info' } >
                <div className={`relative cursor-pointer z-10 flex items-center justify-center w-[24px] h-[25px] rounded-full ${locationLastChar >= 2 ? 'bg-primary text-white border-2 border-primary' : 'bg-white text-gray-500 border-2 border-gray-200'}`}>
                <span className="text-xs">2</span>
                </div>
            </Link>
            {profileFor != 'others' ? 
                (
                    <>
                    <Link to="/registration/step-3">
                        <div className={`relative cursor-pointer z-10 flex items-center justify-center w-[24px] h-[25px] rounded-full ${locationLastChar >= 3 ? 'bg-primary text-white border-2 border-primary' : 'bg-white text-gray-500 border-2 border-gray-200'}`}>
                        <span className="text-xs">3</span>
                        </div>
                    </Link>
                    <Link to="/registration/step-4">
                        <div className={`relative cursor-pointer z-10 flex items-center justify-center w-[24px] h-[25px] rounded-full ${locationLastChar >= 4 ? 'bg-primary text-white border-2 border-primary' : 'bg-white text-gray-500 border-2 border-gray-200'}`}>
                        <span className="text-xs font-medium">F</span>
                        </div>
                    </Link>
                    </>
                )
                : ''}
            </div>
            
            {/* Step labels */}
            {/* <div className="flex justify-between mt-2 text-xs z-5">
            <span className="text-primary font-medium"></span>
            <span className="text-gray-500"></span>
            <span className="text-gray-500"></span>
            <span className="text-gray-500"></span>
            </div> */}
        </div>
    )
}