import React from 'react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Plus } from 'lucide-react'
import { Button } from '@/components/ui/button'
import MockRouteResponse from './MockRouteResponse.jsx'

const MockRouteResponses = ({
  responses,
  onAddResponse,
  onRemoveResponse,
  onAddCondition,
  onRemoveCondition,
  onUpdateConditionField,
  onUpdateResponseField,
  onAddHeader,
  onRemoveHeader,
  onUpdateHeaderField
}) => {
  return (
      <Tabs defaultValue="0">
        <TabsList className="space-x-2">
          {responses.map((resp, idx) => {
            const tabValue = idx.toString()
            return (
                <TabsTrigger key={idx} value={tabValue}>
                  {resp.defaultResponse === 'true'
                      ? '기본 응답'
                      : `조건 ${idx + 1}`}
                </TabsTrigger>
            )
          })}

          <Button variant="secondary" type="button" onClick={onAddResponse}>
            <Plus className="w-4 h-4 mr-1" />
            케이스 추가
          </Button>
        </TabsList>
        {responses.map((resp, idx) => {
          const tabValue = idx.toString()
          return (
              <TabsContent key={idx} value={tabValue} className="mt-2">
                {/* Render a single response with all its fields and actions */}
                <MockRouteResponse
                    resp={resp}
                    idx={idx}
                    onRemoveResponse={onRemoveResponse}
                    onAddCondition={onAddCondition}
                    onRemoveCondition={onRemoveCondition}
                    onUpdateConditionField={onUpdateConditionField}
                    onUpdateResponseField={onUpdateResponseField}
                    onAddHeader={onAddHeader}
                    onRemoveHeader={onRemoveHeader}
                    onUpdateHeaderField={onUpdateHeaderField}
                />
              </TabsContent>
          )
        })}
      </Tabs>
  )
}

export default MockRouteResponses
