import type { Meta, StoryObj } from '@storybook/react';
import { twMerge } from 'tailwind-merge';

import { SkeletonBone, SkeletonText } from './Skeleton';

type PagePropsAndCustomArgs = React.ComponentProps<typeof SkeletonBone>;

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

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

export const Default: Story = {
  args: {
    className: 'w-100 h-40',
  },
};

export const CustomColors: Story = {
  args: {
    className: 'w-100 h-40 bg-[#f0f] text-[#ff0]',
  },
};

export const Text: StoryObj<{ className?: string }> = {
  render: ({ className }) => {
    return (
      <div className='flex flex-col gap-2'>
        <div className='text-4xl'>
          <SkeletonText className={twMerge('w-40', className)} />
          <span className='ml-2 inline-block'>4XL text</span>
        </div>
        <div className='text-3xl'>
          <SkeletonText className={twMerge('w-40', className)} />
          <span className='ml-2 inline-block'>3XL text</span>
        </div>
        <div className='text-2xl'>
          <SkeletonText className={twMerge('w-40', className)} />
          <span className='ml-2 inline-block'>2XL text</span>
        </div>
        <div className='text-xl'>
          <SkeletonText className={twMerge('w-40', className)} />
          <span className='ml-2 inline-block'>XL text</span>
        </div>
        <div className='text-lg'>
          <SkeletonText className={twMerge('w-40', className)} />
          <span className='ml-2 inline-block'>Large text</span>
        </div>
        <div className='text-base'>
          <SkeletonText className={twMerge('w-40', className)} />
          <span className='ml-2 inline-block'>Medium text</span>
        </div>
        <div className='text-sm'>
          <SkeletonText className={twMerge('w-40', className)} />
          <span className='ml-2 inline-block'>Small text</span>
        </div>
      </div>
    );
  },
  args: {
    className: 'bg-background-fog-thick text-background-fog-thin',
  },
};

export const SkeletonGroup: StoryObj<{
  foregroundColor?: string;
  backgroundColor?: string;
}> = {
  render: (args) => {
    const { foregroundColor, backgroundColor } = args;
    const style = {
      '--skeleton-fg': foregroundColor,
      '--skeleton-bg': backgroundColor,
    } as React.CSSProperties;
    return (
      <div
        className='flex flex-row items-center gap-2 bg-background-primary'
        style={style}
      >
        <SkeletonBone className='size-20 rounded-full' />
        <div className='flex flex-1 flex-col gap-2'>
          <SkeletonText className='w-full max-w-100 text-2xl' />
          <SkeletonText className='w-full text-sm' />
        </div>
      </div>
    );
  },
  args: {
    foregroundColor: 'var(--color-background-secondary)',
    backgroundColor: 'var(--color-background-tertiary)',
  },
  argTypes: {
    foregroundColor: {
      control: { type: 'color' },
    },
    backgroundColor: {
      control: { type: 'color' },
    },
  },
};