import { useEffect, useState } from "react";
import BorderButton from "@/Component/Common/Forms/BorderButton";
import PrimaryButton from "@/Component/Common/Forms/PrimaryButton";
import { BlueDropdownSVG } from "@/Component/Common/SVGs/CommonSVG";
import useOutsideDropdown from "@/Utils/Hooks/useOutsideDropdown";

const CampaignSelection = (props) => {
    const { state, setState, CampaignListData, translations } = props;
    const [selectedCampaigns, setSelectedCampaigns] = useState<any>([]);
    const { ref, isComponentVisible, setIsComponentVisible } = useOutsideDropdown();

    const handleCheckboxChange = (campaign) => {
        setSelectedCampaigns((prevSelected) =>
            prevSelected.includes(campaign)
                ? prevSelected.filter((item) => item !== campaign)
                : [...prevSelected, campaign]
        );
    };

    const handleApplyNow = () => {
        setIsComponentVisible((prev) => prev !== true)
        setState((prev) => ({ ...prev, campaign_ids: selectedCampaigns }))
    };

    useEffect(() => {
        if (isComponentVisible) {
            setSelectedCampaigns(state.campaign_ids);
        }
    }, [isComponentVisible, state.campaign_ids]);

    return (
        <div className='relative min-w-80' ref={ref}>
            <div className='flex items-center justify-between gap-2 rounded-full bg-primary/10 px-5 py-2.5 border border-lightGray cursor-pointer text-sm'
                onClick={() => setIsComponentVisible((prev) => prev !== true)}>
                <span className="font-semibold">
                    {state?.campaign_ids?.length > 0
                        ? `${state?.campaign_ids?.length} ${translations?.campaignsSelected}`
                        : translations?.allCampaigns}
                </span>
                <BlueDropdownSVG customClass={`${isComponentVisible ? 'rotate-180' : ''} transition-all origin-center`} />
            </div>
            {(isComponentVisible && CampaignListData?.length > 0) && (
                <div className="absolute top-12 w-full bg-white border border-lightGray rounded-lg z-10 p-4">
                    <h5 className="text-base font-bold">{translations?.campaign}</h5>
                    <span className="text-gray font-medium text-xs block mb-5">{translations?.campaignSelectedMessage}</span>
                    <div className="max-h-40 overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray/10 [&::-webkit-scrollbar-thumb]:bg-tertiary/50 pr-1">
                        {CampaignListData?.map((item, index) => (
                            <label key={index} className="flex items-center gap-2 py-1 cursor-pointer justify-between">
                                <span className="text-sm">{item.campaign_name}</span>
                                <input type="checkbox" checked={selectedCampaigns.includes(item.id)} onChange={() => handleCheckboxChange(item.id)} className="cursor-pointer" />
                            </label>
                        ))}
                    </div>
                    <div className="flex items-center gap-3 *:flex-1 mt-5">
                        <PrimaryButton customClass="!py-1.5" onClick={handleApplyNow}>{translations?.applyNow}</PrimaryButton>
                        <BorderButton title={translations?.cancel} customClass="!py-1.5" onClick={() => setIsComponentVisible((prev) => prev !== true)} />
                    </div>
                </div>
            )}
        </div>
    )
}

export default CampaignSelection