import { useState } from "react";
import Radio from "./ui/Radio";
import Tabs from "./ui/Tabs";
import FilesUploader from "./ui/FilesUploader";


interface SidebarProps {
  onImageFolderUpload: (files: File[]) => void;
}

export default function Sidebar({ onImageFolderUpload }: SidebarProps) {
  const tabs = ["Data", "Model", "Train"] as const;
  const [activeTab, setActiveTab] = useState<(typeof tabs)[number]>('Data');

  const dataOptions = ["Upload", "Presets"] as const;
  const [activeDataOption, setActiveDataOption] = useState<(typeof dataOptions)[number]>('Upload');

  return (
    <div className="bg-white flex flex-col border-l border-gray-200 p-4 gap-4">
      <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
      
      { activeTab === 'Data' && (
        <>
          <Radio 
            label="Data Input"
            options={dataOptions}
            activeOption={activeDataOption}
            onChange={setActiveDataOption}
          />
          { activeDataOption === 'Upload' && (
            <>
              <FilesUploader label="Upload imagefolder" onFilesUpload={onImageFolderUpload}/>
            </>
          )}
        </>
      )}

    </div>
  );
}