import React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { Button } from '../Button/Button';
import { Divider } from '../Divider/Divider';
import { IconButton } from '../IconButton/IconButton';

import { Toolbar } from './Toolbar';

const meta: Meta<typeof Toolbar> = {
  title: 'UI kit/Toolbar',
  component: Toolbar,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof Toolbar>;

export const Horizontal: Story = {
  args: {
    label: 'Text formatting',
    orientation: 'horizontal',
  },
  render: props => (
    <Toolbar {...props}>
      <Button variant='secondary' size='sm' iconRight='shp-arrow-down-2'>
        Label
      </Button>
      <Divider orientation='vertical' />
      <Toolbar.Group label='Text style'>
        <IconButton icon='shp-edit-icon' label='Bold' ghost />
        <IconButton icon='shp-edit-icon' label='Italic' ghost />
      </Toolbar.Group>
      <Divider orientation='vertical' />
      <IconButton icon='shp-move' label='Align left' ghost />
      <IconButton icon='shp-move' label='Align center' ghost />
      <IconButton icon='shp-move' label='Align right' ghost />
    </Toolbar>
  ),
};

export const Vertical: Story = {
  args: {
    label: 'Editor tools',
    orientation: 'vertical',
  },
  render: props => (
    <Toolbar {...props}>
      <IconButton icon='shp-move' label='Select' ghost />
      <IconButton icon='shp-move' label='Pan' ghost />
      <IconButton icon='shp-search' label='Zoom' ghost />
      <IconButton icon='shp-edit-icon' label='Crop' ghost />
      <IconButton icon='shp-undo' label='Undo' ghost />
    </Toolbar>
  ),
};

export const HorizontalScrolling: Story = {
  args: {
    label: 'Text formatting overflow',
    orientation: 'horizontal',
  },
  render: props => (
    <div style={{ width: '200px' }}>
      <Toolbar {...props}>
        <Button variant='secondary' size='sm' iconRight='shp-arrow-down-2'>
          Label
        </Button>
        <Divider orientation='vertical' />
        <Toolbar.Group label='Text style'>
          <IconButton icon='shp-edit-icon' label='Bold' ghost />
          <IconButton icon='shp-edit-icon' label='Italic' ghost />
          <IconButton icon='shp-edit-icon' label='Underline' ghost />
        </Toolbar.Group>
        <Divider orientation='vertical' />
        <IconButton icon='shp-move' label='Align left' ghost />
        <IconButton icon='shp-move' label='Align center' ghost />
        <IconButton icon='shp-move' label='Align right' ghost />
        <Divider orientation='vertical' />
        <IconButton icon='shp-undo' label='Undo' ghost />
        <IconButton icon='shp-delete' label='Delete' variant='destructive' ghost />
      </Toolbar>
    </div>
  ),
};

export const WithGroup: Story = {
  args: {
    label: 'Document actions',
    orientation: 'horizontal',
  },
  render: props => (
    <Toolbar {...props}>
      <Toolbar.Group label='Move'>
        <IconButton icon='shp-arrow-up' label='Move up' ghost />
        <IconButton icon='shp-arrow-down' label='Move down' ghost />
      </Toolbar.Group>
      <Divider orientation='vertical' />
      <Toolbar.Group label='Formatting'>
        <IconButton icon='shp-edit-icon' label='Bold' ghost />
        <IconButton icon='shp-edit-icon' label='Italic' ghost />
        <IconButton icon='shp-edit-icon' label='Underline' ghost />
      </Toolbar.Group>
      <Divider orientation='vertical' />
      <IconButton icon='shp-delete' label='Delete' variant='destructive' ghost />
    </Toolbar>
  ),
};