import { action } from '@storybook/addon-actions';
import { Meta, StoryObj } from '@storybook/react';
import { IconName } from '../Icons';
import { PageHeader } from './PageHeader';
import { PageHeaderActionItemProps } from './PageHeader.model';
import {
  PageHeaderActionProps,
  PageHeaderActionType,
} from './PageHeaderAction';
import {} from './PageHeaderAction/PageHeaderAction';

const headerActions: PageHeaderActionItemProps[] = [
  {
    label: 'Undo',
    icon: IconName.Undo,
    kind: 'action',
    onClick: action('onActionSelected'),
  },
  {
    label: 'Cancel',
    icon: IconName.X,
    kind: 'action',
    onClick: action('onActionSelected'),
  },
];

const bulkHeaderActions: PageHeaderActionProps[] = [
  {
    label: 'Bulk Edit',
    actionType: PageHeaderActionType.Context,
    icon: IconName.BulkEdit,
    tag: 'BETA',
    onClick: action('onActionSelected'),
  },
  {
    label: 'Bulk Delete',
    actionType: PageHeaderActionType.Context,
    icon: IconName.Delete,
    confirmationMode: 'Advanced',
    onClick: action('onActionSelected'),
  },
  {
    actionType: PageHeaderActionType.Context,
    label: 'Bulk Unpublish',
    icon: IconName.Unpublish,
    confirmationMode: 'Simple',
    onClick: action('onActionSelected'),
  },
  {
    label: 'Bulk Action 1',
    icon: IconName.ChevronRight,
    onClick: action('onActionSelected'),
  },
  {
    label: 'Bulk Action 2',
    icon: IconName.ChevronRight,
    disabled: true,
    onClick: action('onActionSelected'),
  },
  {
    label: 'Bulk Action 3',
    icon: './images/default_image.svg',
    imgAlt: 'Bulk Action 3',
    confirmationMode: 'Advanced',
    confirmationConfig: {
      body: 'Custom Body',
      cancelButtonText: 'Custom',
      confirmButtonText: 'Custom',
      title: 'Custom Title',
    },
    onClick: action('onActionSelected'),
  },
  {
    label: 'Bulk Action 4',
    confirmationMode: 'Simple',
    onClick: action('onActionSelected'),
    tag: 'BETA',
  },
];

const meta: Meta<typeof PageHeader> = {
  component: PageHeader,
  title: 'Other Components/PageHeader',
};
export default meta;

export const Default: StoryObj<typeof PageHeader> = {};

export const Titles: StoryObj<typeof PageHeader> = {
  parameters: {
    docs: {
      description: {
        story: 'The page header can be used to display a title and subtitle.',
      },
    },
  },
  args: { title: 'Title', subtitle: 'Subtitle' },
};

export const Actions: StoryObj<typeof PageHeader> = {
  parameters: {
    docs: {
      description: {
        story: 'An array of standard page header actions can be passed in.',
      },
    },
  },
  args: {
    title: 'Title',
    subtitle: 'Subtitle',
    actions: headerActions,
  },
};

export const ActionsGroup: StoryObj<typeof PageHeader> = {
  parameters: {
    docs: {
      description: {
        story: `Bulk actions is available when an array of actions is passed in as a prop. The actions themselves will try to fit into any available space.
        Those that cannot fit, will be rendered under the 'More' action as a child of the drop down list.`,
      },
    },
  },
  args: {
    title: 'Title',
    subtitle: 'Subtitle',
    actions: [
      {
        label: 'Bulk Actions',
        icon: IconName.Bulk,
        kind: 'group',
        actions: bulkHeaderActions,
      },
    ],
  },
};

export const All: StoryObj<typeof PageHeader> = {
  name: 'Titles, Actions, & Actions Groups',
  parameters: {
    docs: {
      description: {
        story:
          'When actions and bulk actions are present, a spacer will be created in-between to help differentiate them.',
      },
    },
  },
  args: {
    title: 'Title',
    subtitle: 'Subtitle',
    actions: [
      ...headerActions,
      { kind: 'spacer' },
      {
        label: 'Bulk Actions',
        icon: IconName.Bulk,
        kind: 'group',
        actions: bulkHeaderActions,
        onActionsGroupToggled: async (): Promise<void> => {
          action('onBulkActions1Toggled');
        },
      },
      {
        label: 'Bulk Actions 2',
        icon: IconName.Bulk,
        kind: 'group',
        actions: [bulkHeaderActions[0]],
        onActionsGroupToggled: async (): Promise<void> => {
          action('onBulkActions2Toggled');
        },
      },
    ],
  },
};
