import React from 'react';
import { Request } from '../../api/Requests';
import { useAuth } from '../../auth/AuthProvider';

type Props = {
  selectedKey: keyof Request;
  setSelectedKey: (key: keyof Request) => void;
  setAllRequestsChart: (key: keyof Request) => void;
};

const ChartDropdown: React.FC<Props> = ({
  selectedKey,
  setSelectedKey,
  setAllRequestsChart,
}) => {
  const { user } = useAuth();

  const options: (keyof Request)[] = [
    'status',
    'supplier_id',
    ...(user?.type === 'instructor' || user?.type === 'ta'
      ? ['student_id' as keyof Request, 'team_id' as keyof Request]
      : []),
  ];

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const selected = e.target.value as keyof Request;
    setSelectedKey(selected);
    setAllRequestsChart(selected);
  };

  return (
    <select
      className='form-select w-auto'
      value={selectedKey}
      onChange={handleChange}
    >
      {options.map((key) => (
        <option key={key} value={key}>
          {key}
        </option>
      ))}
    </select>
  );
};

export default ChartDropdown;