import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { fn } from 'storybook/test';

import { SplitPanel, VerticalSplitGroup } from '@/components/layout/SplitPanel';
import { FeedbackIcon } from '@/icons';
import { SkullIcon } from '@/icons';

import Banner from './Banner';
import MaintenanceBar, { MaintenanceBarProps } from './MaintenanceBar';

type PagePropsAndCustomArgs = React.ComponentProps<typeof Banner>;

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'components/Banner',
  component: Banner,
};

export default meta;
type Story = StoryObj<PagePropsAndCustomArgs>;

export const Default: Story = {
  render(args) {
    return (
      <VerticalSplitGroup className='fixed inset-0'>
        <SplitPanel style={{ width: 600 }}>
          <Banner {...args} />
        </SplitPanel>
        <SplitPanel className='flex-1 bg-black' />
      </VerticalSplitGroup>
    );
  },
  args: {
    title: 'Banner title',
    subtitle:
      'Lorem ipsum sub ipsum whatever ipsum blah blah blah, and a little more for good measure.',
    onClick: fn(() => {
      console.log('click');
    }),
    onCloseClick: fn(() => {
      console.log('close');
    }),
  },
};

export const Icon: Story = {
  render(args) {
    return (
      <VerticalSplitGroup className='fixed inset-0'>
        <SplitPanel style={{ width: 600 }}>
          <Banner {...args} />
        </SplitPanel>
        <SplitPanel className='flex-1 bg-black' />
      </VerticalSplitGroup>
    );
  },
  args: {
    title: 'Happy Halloween',
    subtitle:
      'I am a very spooky ghost. Wait, no, I am a skeleton. Yes. My bones are RATTLING, pal!!',
    image: SkullIcon,
    className: 'bg-[#f90] text-[#000]',
    imageContainerClassName: 'bg-[#000] text-[#f90] rounded-md',
    closeButtonClassName: 'text-current',
    onClick: fn(() => {
      console.log('click');
    }),
    onCloseClick: fn(() => {
      console.log('close');
    }),
  },
};

export const BackgroundImage: Story = {
  render(args) {
    return (
      <VerticalSplitGroup className='fixed inset-0'>
        <SplitPanel style={{ width: 600 }}>
          <Banner {...args} />
        </SplitPanel>
        <SplitPanel className='flex-1 bg-black' />
      </VerticalSplitGroup>
    );
  },
  args: {
    title: 'So, uhhh... v4? THAT happened.',
    subtitle: 'I am gooped and gagged in equal measure.',
    image: FeedbackIcon,
    backgroundImage: '/campaign/v4/v4-banner-bg.jpg',
    className: 'text-[#c3e734]',
    onClick: fn(() => {
      console.log('click');
    }),
    onCloseClick: fn(() => {
      console.log('close');
    }),
  },
};

export const Maintenance: StoryObj<MaintenanceBarProps> = {
  render: (args) => (
    <VerticalSplitGroup className='fixed inset-0'>
      <SplitPanel style={{ width: 600 }}>
        <MaintenanceBar {...args} />
      </SplitPanel>
      <SplitPanel className='flex-1 bg-black' />
    </VerticalSplitGroup>
  ),
  args: {
    isMaintenance: true,
    isScheduledMaintenance: true,
    message: 'Have a hot dog!',
  },
};