import React, { useState, useEffect } from 'react';
import { useHoseParts } from '../../../lib/hooks';
import { Panel, Tabs, Box } from '@bigcommerce/big-design';
import Loading from '../../../components/loading';
import ErrorMessage from '../../../components/error';
import HosePartsTable from '../../../components/hosePartsTable';

const Index = () => {
    const { parts, isLoading, error } = useHoseParts();
    const [activeTab, setActiveTab] = useState<string | undefined>(undefined);

    useEffect(() => {
        if (parts && parts.length > 0 && !activeTab) {
            setActiveTab(parts[0].id);
        }
    }, [parts, activeTab]);

    if (isLoading) return <Loading />;
    if (error) return <ErrorMessage error={error} />;    

    return (
      <Panel>
        <Tabs
          activeTab={activeTab}
          aria-label="Hose Parts Tab Content"
          id="hose-parts-tabs"
          items={parts}
          onTabClick={setActiveTab}
        />
        <Box marginTop="large">
          {parts.map(({ id, ariaControls, title, items }) =>
            activeTab === id ? (
              <Box key={id} id={ariaControls}>
                <HosePartsTable tableItems={items} itemName={title} PartID={id} />
              </Box>
            ) : null
          )}
        </Box>
      </Panel>
    );
};

export default Index;