import type { Meta, StoryObj } from '@storybook/react';
import { useEffect, useState } from 'react';
import { deepCamelKeys, deepSnakeKeys } from 'string-ts';

import HOMEPAGE_BANNERS_RESPONSE_JSON from '@/__fixtures__/homepage_banners.json';
import { BannerSection, BannerWebItem } from '@/types/bannerTypes';

import { BannerContent, BannerContentProps } from './BannerContent';
import DynamicBanner, { DynamicBannerProps } from './DynamicBanner';

const meta: Meta = {
  title: 'components/Promo',
};

export default meta;

export const PromoDynamicBannerCarousel: StoryObj<
  Pick<DynamicBannerProps, 'className'>
> = {
  name: 'Dynamic Banner Carousel (CMS)',
  render(args) {
    return (
      <DynamicBanner
        section={
          deepCamelKeys(
            HOMEPAGE_BANNERS_RESPONSE_JSON.sections[0]
          ) as BannerSection
        }
        {...args}
      />
    );
  },
  args: {
    className: '',
  },
};

function BannerContentDemo(props: { className?: string; configJson?: string }) {
  const { configJson = '{}', ...restProps } = props;
  const [bannerItem, setBannerItem] = useState({});
  const [error, setError] = useState<string | boolean>(false);
  useEffect(() => {
    try {
      setBannerItem(deepCamelKeys(JSON.parse(configJson || '{}')));
      setError(false);
    } catch (e) {
      // JSON parse failed
      setError((e as any).message || true);
    }
  }, [configJson]);
  return (
    <div className='relative'>
      <BannerContent bannerItem={bannerItem as BannerWebItem} {...restProps} />
      {error && (
        <div className='absolute inset-0 z-10 border-2 border-current bg-background-primary/75 p-2 font-mono font-bold text-accent-error-on-primary'>
          {error === true ? 'JSON parse error' : error}
        </div>
      )}
    </div>
  );
}

export const PromoDynamicBanner: StoryObj<
  Pick<BannerContentProps, 'className'> & { configJson?: string }
> = {
  name: 'Dynamic Banner (CMS)',
  render: (args) => <BannerContentDemo {...args} />,
  args: {
    className: '',
    configJson: JSON.stringify(
      deepSnakeKeys({
        id: 'storybook_test',
        visible: true,
        tag: {
          text: {
            text: 'New Feature',
            color: '#101012',
          },
          color: '#fd429c',
        },
        titleText: {
          text: 'Your sound,\nyour stage',
          color: '#ffffffe6',
        },
        subtitleText: {
          text: 'Meet Hooks — kind of sounds like "meathooks."\nQuality USDA choice cuts? You know we got em.',
          color: '#ffffff80',
        },
        primaryCta: {
          text: {
            text: 'Primary Button',
          },
        },
        secondaryCta: {
          text: {
            text: 'The Other One',
          },
          iconName: 'share',
          iconSize: 'Medium',
        },
        heroBackgroundColor: '#f8441b',
        heroBackgroundImgUrl:
          'https://cdn-o.suno.com/Hooks_StaticBanner_v1.jpg',
        heroBackgroundOverlay: 'minimal_gradient',
        heroBackgroundAlignment: 'center_repeat_x',
        heroBackgroundImgUrlMobile:
          'https://cdn-o.suno.com/Hooks_StaticBannerMobile_v1.jpg',
        heroBackgroundOverlayMobile: 'gradient',
      }),
      null,
      2
    ),
  },
};