import React from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { HTTPClientView } from '../client-views/HTTPClientView';
import { TCPClientView } from '../client-views/TCPClientView';
import { HTTPFlatClientView } from '../client-views/HTTPFlatClientView';
import { X } from 'lucide-react';
import {Button} from '@/components/ui/button.jsx';

const APITabs = ({
  apiRequests,
  currentIndex,
  onTabChange,
  onCloseTab
}) => {
  const renderTabContent = (api, index) => {
    const commonProps = {
      model: api,
      index
    };

    switch (api.type) {
      case 'HTTP':
        return <HTTPClientView {...commonProps} />;
      case 'TCP':
        return <TCPClientView {...commonProps} />;
      case 'HTTPFlat':
        return <HTTPFlatClientView {...commonProps} />;
      default:
        return null;
    }
  };

  return (
      <Tabs
          value={currentIndex.toString()}
          onValueChange={onTabChange}
          className="flex flex-col h-full w-full"
      >
        <div className="border-b bg-background w-full">
          <TabsList className="h-auto justify-start w-full">
            {apiRequests.map((request, index) => (
                <div key={`${request.id}-${index}`} className="flex items-center">
                  <TabsTrigger
                      value={String(index)}
                      className="flex items-center gap-2 data-[state=active]:bg-background"
                  >
                    <span className="truncate max-w-[150px]">{request.name}</span>
                    <Button
                        variant="ghost"
                        size="sm"
                        className="h-auto p-0 hover:bg-transparent"
                        onClick={(e) => {
                          e.stopPropagation();
                          onCloseTab(index);
                        }}
                    >
                      <X className="h-4 w-4"/>
                    </Button>
                  </TabsTrigger>
                </div>
            ))}
          </TabsList>
        </div>
        <div className="flex-1 w-full overflow-hidden">
          {apiRequests.map((request, index) => (
              <TabsContent
                  key={request.id}
                  value={index.toString()}
                  className="flex-1 h-full m-0 border-none p-0 outline-none data-[state=active]:flex-1"
              >
                {renderTabContent(request, index)}
              </TabsContent>
          ))}
        </div>
      </Tabs>
);
};

export default APITabs;
