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

import { type HumandLogoProps } from './types';
import HumandLogo from '.';

const meta: Meta<typeof HumandLogo> = {
  component: HumandLogo,
  title: 'Design System/HumandLogo',
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component:
          'Humand brand logo as an inline SVG. Defaults to a theme-aware brand color (navy in light mode, white in dark mode). Override via `style.color`. Pass `title` for an accessible label; otherwise it is rendered as decorative.',
      },
    },
  },
  argTypes: {
    title: {
      control: 'text',
      description: 'Accessible label. When omitted, the SVG is decorative.',
    },
  },
  args: {
    title: 'Humand',
    style: { width: 240 },
  },
};

export default meta;

type Story = StoryObj<typeof HumandLogo>;

export const Default: Story = {};

/**
 * Exercises the component's built-in dark-mode logic by switching the
 * Storybook global `themeMode` to `dark`. The logo should render white
 * automatically — no `style.color` override needed.
 */
export const DarkMode: Story = {
  globals: {
    themeMode: 'dark',
  },
};

const WhiteOnDarkBackgroundRenderer = (args: HumandLogoProps) => {
  const theme = useTheme();
  return (
    <Stack
      sx={{
        p: 4,
        backgroundColor: theme.palette.newBase?.brand?.[950],
        alignItems: 'flex-start',
      }}
    >
      <HumandLogo
        {...args}
        style={{ ...args.style, color: theme.palette.newBase?.white }}
      />
    </Stack>
  );
};

/**
 * Demonstrates manually overriding the color via `style.color` while the
 * surrounding theme stays in light mode. Useful when placing the logo on a
 * locally-dark surface inside an otherwise light page.
 */
export const WhiteOnDarkBackground: Story = {
  render: args => <WhiteOnDarkBackgroundRenderer {...args} />,
};

export const CustomColor: Story = {
  args: {
    style: { width: 240, color: '#E74444' },
  },
};