device.view.tsx

import { useRef } from 'react';
import { Button, Col, Container, Form, Nav, NavLink, Row } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import { useDeviceViewModel } from '../view_model/device.viewmodel';
import './device.scss';
import { DeviceViewTable } from './device.view.table';
import { DeviceViewTabs, DeviceViewTabValues } from './device.view.tabs';

function DeviceView() {
    const { t } = useTranslation('common');
    const searchRef = useRef<HTMLInputElement>(null);
    const { activeTab, setActiveTab, handleActiveTabLink } = useDeviceViewModel();

    return (
        <div className='m-4 pt-4'>
            <Container className="bg-white rounded c-box" fluid>
                <Row>
                    <Col sm={7} className='border-right mt-4'><h3 className='text-black-50'>{t('device.title')}</h3></Col>
                    <Col sm={5} className='mt-4'>
                        <Nav className='justify-content-around'>
                            <NavLink className={handleActiveTabLink(DeviceViewTabValues.METADATA) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.METADATA)}>{t('device.tabs.metadata.title')}</NavLink>
                            <NavLink className={handleActiveTabLink(DeviceViewTabValues.YANGMODEL) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.YANGMODEL)}>{t('device.tabs.yang_model.title')}</NavLink>
                        </Nav>
                    </Col>
                </Row>

                <Row className='align-items-center'>
                    <Col sm={3}>
                        <Form.Group controlId='device.search' className='p-0 mx-1 pt-2'>
                            <Form.Control type="text" placeholder={t('device.search.placeholder')} ref={searchRef} />
                        </Form.Group>
                    </Col>
                    <Col sm={{ span: 2, offset: 2 }} className='border-right pt-2'>
                        <Button variant='primary' className='w-100 my-auto'>{t('device.add_device_button')}</Button>
                    </Col>
                </Row>

                <Row className='align-items-start'>
                    <Col sm={7} className='pt-2 border-right'>
                        {DeviceViewTable(searchRef)}
                    </Col>
                    <Col sm={5} className='pt-2'>
                        {DeviceViewTabs(activeTab)}
                    </Col>
                </Row>
            </Container>
        </div>
    )
}

export default DeviceView