import { Stack, Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react';

import TaskFocusLayout from './index';

const meta: Meta<typeof TaskFocusLayout> = {
  title: 'Composed Components/TaskFocusLayout',
  component: TaskFocusLayout,
  parameters: {
    layout: 'fullscreen',
  },
  argTypes: {
    slotProps: {
      control: 'object',
      description:
        'Slot props for customizing layout and header, e.g. root (StackProps) and header (TaskFocusHeaderProps).',
      table: {
        type: {
          summary: '{ root?: StackProps; header: TaskFocusHeaderProps }',
        },
      },
    },
    children: {
      control: false,
      description: 'Content of the layout to display under the header.',
      table: {
        type: { summary: 'React.ReactNode' },
      },
    },
  },
};

export default meta;

type Story = StoryObj<typeof TaskFocusLayout>;

export const Default: Story = {
  args: {
    slotProps: {
      root: {
        sx: { background: '#fafbfc', minHeight: 400, minWidth: 300, p: 0 },
      },
      header: {
        title: 'Task Focus Title',
        onClose: () => alert('Close clicked!'),
      },
    },
    children: (
      <Stack sx={{ p: 3 }}>
        <Typography>
          This is the body content of the <b>TaskFocusLayout</b>. Use this
          layout to keep your users focused on a single important task.
        </Typography>
      </Stack>
    ),
  },
};

export const WithCustomHeader: Story = {
  args: {
    slotProps: {
      root: {
        sx: { background: '#e3f2fd', minHeight: 400, minWidth: 300, p: 0 },
      },
      header: {
        title: 'Custom Task',
        onClose: () => alert('Custom close clicked!'),
        pillProps: {
          label: 'In Progress',
          type: 'warning',
        },
        mainActions: [
          {
            key: 'action1',
            children: 'Action 1',
            onClick: () => alert('action1 clicked'),
          },
        ],
      },
    },
    children: (
      <Stack sx={{ p: 3 }}>
        <Typography variant="body1">
          Try customizing the <em>TaskFocusHeader</em> using{' '}
          <code>slotProps.header</code>.
        </Typography>
      </Stack>
    ),
  },
};