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

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

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

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

<Heading
  title="Advanced Toolbox"
  componentRelativePath="AdvancedToolbox/AdvancedToolbox.tsx"
/>

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

## Overview

OHIF advanced toolbox which can host set of tools that require more space for customization.

<Canvas>
  <Story
    name="Overview"
    args={{
      title: 'Segmentation Tools',
      items: [
        {
          name: 'Brush',
          icon: 'icon-tool-brush',
          active: false,
          onClick: () => console.log('Brush clicked'),
          options: [
            {
              name: 'Radius (mm)',
              type: 'range',
              min: 1,
              max: 10,
              value: 5,
              step: 1,
              onChange: value => console.log('Brush size changed', value),
            },
            {
              name: 'Mode',
              type: 'radio',
              value: 'Circle',
              values: [
                { value: 'Circle', label: 'Circle' },
                { value: 'Sphere', label: 'Sphere' },
                { value: 'Rectangle', label: 'Rectangle' },
              ],
              onChange: value => console.log('Brush mode changed', value),
            },
          ],
        },
        {
          name: 'Eraser',
          icon: 'icon-tool-eraser',
          onClick: () => console.log('eraser clicked'),
          options: [
            {
              name: 'Mode',
              type: 'radio',
              value: 'EraserSphere',
              values: [
                { value: 'EraserCircle', label: 'Circle' },
                { value: 'EraserSphere', label: 'Sphere' },
              ],
              onChange: value => console.log('Brush mode changed', value),
            },
          ],
        },
        {
          name: 'Threshold',
          icon: 'icon-tool-threshold',
          active: true,
          onClick: () => console.log('eraser clicked'),
          options: [
            {
              name: 'Radius (mm)',
              type: 'range',
              min: 1,
              max: 10,
              value: 5,
              step: 1,
              onChange: value => console.log('Brush size changed', value),
            },
            {
              name: 'Mode',
              type: 'radio',
              value: 'Circle',
              values: [
                { value: 'Circle', label: 'Circle' },
                { value: 'Sphere', label: 'Sphere' },
                { value: 'Rectangle', label: 'Rectangle' },
              ],
              onChange: value => console.log('Brush mode changed', value),
            },
            {
              name: 'custom',
              type: 'custom',
              children: () => {
                return (
                  <div>
                    <div>Custom</div>
                    <input type="text" />
                  </div>
                );
              },
            },
          ],
        },
      ],
    }}
  >
    {advancedToolboxTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={AdvancedToolbox} />

## Usage

## Contribute

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