import Viewport from '../Viewport';

import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';

export const argTypes = {
  component: Viewport,
  title: 'Components/Viewport',
};

<Meta
  title="Components/Viewport"
  component={Viewport}
/>

export const ViewportTemplate = args => (
  <div className="bg-primary-dark h-40">
    <Viewport {...args} />
  </div>
);

<Heading
  title="Viewport"
  componentRelativePath="Viewport/Viewport.tsx"
/>

- [Overview](#overview)
- [Props](#props)
- [Contribute](#contribute)

## Overview

Viewport is a component that renders the Viewport action bar.

<Canvas>
  <Story
    name="Overview"
    args={{
      viewportIndex: 0,
      onArrowsClick: direction => alert(`Annotation ${direction}`),
      studyData: {
        label: 'A',
        isTracked: true,
        isLocked: false,
        isRehydratable: false,
        studyDate: '07-Sep-2011',
        currentSeries: 1,
        seriesDescription:
          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
        modality: 'CT',
        patientInformation: {
          patientName: 'Smith, Jane',
          patientSex: 'F',
          patientAge: '59',
          MRN: '10000001',
          thickness: '5.0mm',
          spacing: '1.25mm',
          scanner: 'Aquilion',
        },
      },
    }}
  >
    {ViewportTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={Viewport} />

## Contribute

<Footer componentRelativePath="Viewport/__stories__/Viewport.stories.mdx" />
