import React from 'react';
import browserAPI, { Tab } from '../../lib/browser-api';

export default function TabDropdown({
    setPickedTab,
    pickedTab,
}: {
    setPickedTab: (tab_id: number) => void;
    pickedTab: number;
}) {
    const [tabs, setTabs] = React.useState<Tab[]>([]);
    React.useEffect(() => {
        browserAPI.tabs.query({ currentWindow: true }).then(setTabs);
    }, []);
    return (
        <select
            id="tab_dropdown"
            value={pickedTab}
            onChange={async (e) => {
                setPickedTab(parseInt(e.target.value));
            }}
        >
            {tabs.map((tab) => (
                <option value={tab.id} key={tab.id}>
                    {tab.title}
                </option>
            ))}
        </select>
    );
}