import { Meta, StoryObj } from '@storybook/react';
import React, { useState } from 'react';
import classes from '../../../.storybook/static/css/confirm-dialog.scss';
import { useExpand } from '../../hooks/useExpand/useExpand';
import { Icons } from '../Icons/Icons';
import { IconName } from '../Icons/Icons.models';
import { ConfirmDialog } from './ConfirmDialog';

const meta: Meta<typeof ConfirmDialog> = {
  title: 'Other Components/ConfirmDialog',
  component: ConfirmDialog,
  argTypes: {
    onCancel: {
      control: false,
    },
    onConfirm: {
      control: false,
    },
    referenceElement: {
      control: false,
    },
    children: {
      mapping: {
        undefined: undefined,
        'Custom Text': 'This message will be wrapped in <p></p> tags.',
        'Custom Element': (
          <>
            <ul style={{ margin: 0 }}>
              <li>Nested elements can also be rendered.</li>
            </ul>
            <br />
            <br />
            <span>Dialog will grow as needed.</span>
          </>
        ),
      },
      options: ['undefined', 'Custom Text', 'Custom Element'],
      control: 'select',
      defaultValue: undefined,
    },
  },
};
export default meta;

export const Default: StoryObj<typeof ConfirmDialog> = {
  render: (args) =>
    React.createElement(() => {
      const [referenceElement, setReferenceElement] = useState<HTMLElement>();
      const { isExpanded, toggleExpanded } = useExpand(true);

      return (
        <div className={classes.container}>
          <div
            className={classes.refElement}
            ref={setReferenceElement as React.LegacyRef<HTMLDivElement>}
            onClick={toggleExpanded}
          >
            <Icons icon={IconName.Ellipsis} className={classes.icon} />
          </div>
          {isExpanded && (
            <ConfirmDialog {...args} referenceElement={referenceElement} />
          )}
        </div>
      );
    }),
};
