'use client';

import classnames from 'classnames';
import { useState } from 'react';
import EmployerMemberSelect from './EmployerMemberSelect';
import IdCardViewer from './IdCardViewer';
import IdCardDownloader from './IdCardDownloader';

interface IdCardSelectorProps {
  role: string;
  roleId: string;
  name: string;
}

const IdCardSelector: React.FC<IdCardSelectorProps> = ({ role, roleId, name }) => {
  const [selectedEmployer, setSelectedEmployer] = useState<string | null>(null);
  const [selectedMember, setSelectedMember] = useState<string | null>(null);

  const handleSelectedEmployer = (plPlanKey: string): void => {
    setSelectedMember(null);
    setSelectedEmployer(null);
    setSelectedEmployer(plPlanKey);
  };

  const handleSelectedMember = (pbEntityKey: string): void => {
    setSelectedEmployer(null);
    setSelectedMember(null);
    setSelectedMember(pbEntityKey);
  };

  return (
    <div className={classnames("w-full flex flex-col px-2 text-lg")}>
        <EmployerMemberSelect
            onSelectionCompleteEmployer={handleSelectedEmployer}
            onSelectionCompleteMember={handleSelectedMember}
            userRole={role}
            roleId={roleId}
            employerName={name}
            employerAllButtonText={"Generate All"}
        />
        {selectedMember && (
          <IdCardViewer 
            cardLaout='FullPageCard'
            pbEntityKey={selectedMember}
            autoFetchCard
          />
        )}
        {selectedEmployer && (
          <IdCardDownloader 
            plPlanKey={selectedEmployer}
            autoFetchCard
          />
        )}
    </div>
  );
}

export default IdCardSelector;