import React from 'react';
import { Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import styled from 'styled-components';

import { DrawerMainTabs } from 'components';
import InventoryAdjustmentDetailTab from './InventoryAdjustmentDetailTab';
import InventoryAdjustmentDetailActionsBar from './InventoryAdjustmentDetailActionsBar';
import InventoryAdjustmentDetailGLEntriesPanel from './InventoryAdjustmentDetailGLEntriesPanel';

/**
 * Inventory adjustment detail
 * @returns {React.JSX}
 */
export default function InventoryAdjustmentDetail() {
  return (
    <InventoryAdjustmentDetailsRoot>
      <InventoryAdjustmentDetailActionsBar />
      <InventoryAdjustmentDetailTabs />
    </InventoryAdjustmentDetailsRoot>
  );
}

/**
 * Invenoty adjusment details tabs.
 * @returns {React.JSX}
 */
function InventoryAdjustmentDetailTabs() {
  return (
    <DrawerMainTabs
      renderActiveTabPanelOnly={true}
      defaultSelectedTabId="details"
    >
      <Tab
        title={intl.get('details')}
        id={'details'}
        panel={<InventoryAdjustmentDetailTab />}
      />
      <Tab
        title={intl.get('journal_entries')}
        id={'journal_entries'}
        panel={<InventoryAdjustmentDetailGLEntriesPanel />}
      />
    </DrawerMainTabs>
  );
}

const InventoryAdjustmentDetailsRoot = styled.div``;