import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import { SegmentationGroupTable } from '../../../components';

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

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

export const SegmentationGroupTableTemplate = args => (
  <div className="bg-primary-dark h-96 w-64">
    <SegmentationGroupTable {...args} />
  </div>
);

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

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

## Overview

SegmentationGroupTable is a component that renders the SegmentationGroupTables.

<Canvas>
  <Story
    name="Overview"
    args={{
      activeSegmentationId: 'ed8d6f8d-4035-438d-9032-36d5912aaa3a',
      showAddSegmentation: true,
      isMinimized: { '4be5-b9b2-ed33-fa86970568e7': false },
      showAddSegment: true,
      showDeleteSegment: true,
      segmentations: [
        {
          id: '4be5-b9b2-ed33-fa86970568e7',
          volumeId: 'a3b0f15f-4be5-b9b2-ed33-fa86970568e7',
          activeSegmentIndex: 2,
          cachedStats: {},
          label: 'Segmentation 1',
          segmentsLocked: {},
          type: 'LABELMAP',
          displayText: [],
          hydrated: true,
          segmentCount: 3,
          segments: [
            null,
            {
              label: 'This is a very long segment label',
              segmentIndex: 1,
              color: [128, 174, 128],
              opacity: 255,
              isVisible: true,
              isLocked: false,
            },
            {
              label: 'Segment 2',
              segmentIndex: 2,
              color: [241, 214, 145],
              opacity: 255,
              isVisible: true,
              isLocked: false,
            },
            {
              label: 'Segment 3',
              segmentIndex: 3,
              color: [141, 114, 145],
              opacity: 255,
              isVisible: false,
              isLocked: false,
            },
          ],
          isActive: false,
          colorLUTIndex: 1,
          isVisible: true,
        },
        {
          id: 'a3b0f15f-4be5-b9b2-ed33-fa86970568e7',
          volumeId: 'a3b0f15f-4be5-b9b2-ed33-fa86970568e7',
          activeSegmentIndex: 1,
          cachedStats: {},
          label: '2 Segmentation',
          segmentsLocked: {},
          type: 'LABELMAP',
          displayText: [],
          hydrated: true,
          segmentCount: 2,
          segments: [
            null,
            {
              label: 'Segment 1',
              segmentIndex: 1,
              color: [228, 174, 128],
              opacity: 255,
              isVisible: true,
              isLocked: false,
            },
          ],
          isActive: true,
          colorLUTIndex: 1,
          isVisible: true,
        },
      ],
    }}
  >
    {SegmentationGroupTableTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={SegmentationGroupTable} />

## Contribute

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