import { useState } from 'react';

import Drawer from '@design-system/Drawer';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import DataContainer from '.';

const meta: Meta<typeof DataContainer> = {
  component: DataContainer,
  title: 'Composed Components/Profile/DataContainer',
  tags: ['autodocs'],
  args: {
    title: 'Section title',
    sections: [
      <Typography key="1">Section 1 content</Typography>,
      <Typography key="2">Section 2 content</Typography>,
      <Typography key="3">Section 3 content</Typography>,
    ],
  },
};

export default meta;

type Story = StoryObj<typeof DataContainer>;

export const Default: Story = {
  args: {},
};

export const SingleSection: Story = {
  args: {
    title: 'Single section',
    sections: [<Typography key="1">Only one section</Typography>],
  },
};

export const ManySections: Story = {
  args: {
    title: 'Multiple sections',
    sections: [
      <Typography key="1">Item 1</Typography>,
      <Typography key="2">Item 2</Typography>,
      <Typography key="3">Item 3</Typography>,
      <Typography key="4">Item 4</Typography>,
      <Typography key="5">Item 5</Typography>,
      <Typography key="6">Item 6</Typography>,
    ],
  },
};

export const WithFooter: Story = {
  args: {
    footer: (
      <div
        style={{
          width: '100%',
          height: 40,
          backgroundColor: 'red',
          borderRadius: 4,
        }}
      />
    ),
  },
};

export const WithEdit: Story = {
  args: {
    title: 'Personal information',
    sections: [
      <Typography key="1">John Doe</Typography>,
      <Typography key="2">john.doe@email.com</Typography>,
      <Typography key="3">+54 11 1234-5678</Typography>,
    ],
  },
  render: args => {
    const [isOpen, setIsOpen] = useState(false);

    return (
      <>
        <DataContainer
          {...args}
          onEdit={() => setIsOpen(true)}
        />
        <Drawer
          title="Edit personal information"
          size="small"
          open={isOpen}
          onClose={() => setIsOpen(false)}
          primaryButtonProps={{ children: 'Save' }}
          secondaryButtonProps={{
            children: 'Cancel',
            onClick: () => setIsOpen(false),
          }}
        >
          <Stack spacing={2}>
            <Typography>Edit form placeholder content.</Typography>
          </Stack>
        </Drawer>
      </>
    );
  },
};