import { Meta, StoryObj } from '@storybook/react-webpack5';
import {
  ThemeProvider as ThemeProviderComp,
  type ThemeProviderProps,
  useTheme,
} from '@wise/components-theming';

import Button from '../../button';
import { lorem100 } from '../../test-utils';
import Display from '../../display';
import Body from '../../body';
import FlowNavigation from '../../flowNavigation/FlowNavigation';
import AvatarView from '../../avatarView';
import SegmentedControl from '../../segmentedControl';
import Sticky from '../../sticky';
import { Field } from '../../field/Field';

// ThemeProvider external component, this mock makes Storybook generate Props Table
function ThemeProvider(props: ThemeProviderProps) {
  return <ThemeProviderComp {...props} />;
}

export default {
  component: ThemeProvider,
  title: 'Foundations/ThemeProvider',
  tags: ['!manifest'],
  parameters: {
    docs: {
      description: {
        component:
          'Components require `ThemeProvider` from `@wise/components-theming` to be wrapped around your application for theming support. Available themes include: `personal`, `business`, `platform`, and variants with different color schemes.',
      },
    },
  },
} satisfies Meta<typeof ThemeProvider>;

type Story = StoryObj<typeof ThemeProvider>;

export const PlatformTheme: Story = {
  render: () => (
    <ThemeProvider theme="platform">
      <Button>Button</Button>
    </ThemeProvider>
  ),
};

export const BusinessLandingPage: Story = {
  render: () => (
    <ThemeProvider theme="business">
      <Display type="display-large">Wise Business</Display>
      <Body type="body-large-bold">{lorem100}</Body>
      <ThemeProvider theme="business--forest-green">
        <Body type="body-large">{lorem100}</Body>
      </ThemeProvider>
      <Body type="body-large">{lorem100}</Body>
    </ThemeProvider>
  ),
};

/**
 * Story demonstrating the theme switching functionality using the `useTheme` hook.
 */
export const SetThemeHook: Story = {
  name: 'setTheme',
  tags: ['new'],
  parameters: {
    padding: '0',
  },
  render: () => {
    const ThemeSwitcher = () => {
      const { theme, setTheme } = useTheme();

      return (
        <>
          <FlowNavigation
            steps={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
            activeStep={1}
            avatar={<AvatarView profileName="Test Test" />}
          />
          <div className="row">
            <div className="col-md-2" />
            <div className="col-md-8 p-x-4">
              <Display type="display-large" className="m-y-3">
                Title
              </Display>
              <Body type="body-large">{lorem100}</Body>
              <Body type="body-large">{lorem100}</Body>
              <Body type="body-large">{lorem100}</Body>
            </div>
            <div className="col-md-2" />
          </div>
          <Sticky>
            <div className="m-a-2">
              <Field label="Example of Switcher">
                <SegmentedControl
                  name="theme"
                  mode="input"
                  value={theme}
                  segments={[
                    { id: 'platform', label: 'Platform', value: 'platform' },
                    { id: 'forest-green', label: 'Forest Green', value: 'business--forest-green' },
                  ]}
                  onChange={(value) => setTheme(value as typeof theme)}
                />
              </Field>
            </div>
          </Sticky>
        </>
      );
    };

    return (
      <ThemeProvider theme="platform">
        <ThemeSwitcher />
      </ThemeProvider>
    );
  },
};
