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

import { SplitPanel, VerticalSplitGroup } from '@/components/layout/SplitPanel';
import useBreakpoint, {
  useBreakpointLg,
  useBreakpointMd,
  useBreakpointSm,
  useBreakpointXl,
  useBreakpointXxl,
} from '@/hooks/useBreakpoint';

const meta: Meta = {
  title: 'Responsive Docs',
  tags: ['!dev'], // Hide from sidebar
};

export default meta;
type Story = StoryObj;

// Classnames for the size indicators
function classNames(className: string) {
  return twMerge(
    'w-8 h-8',
    'flex justify-center items-center',
    'rounded-full border border-2',
    'uppercase text-xs',
    'border-current text-current',
    className
  );
}

export const TailwindMediaQuery: Story = {
  render: () => (
    <div className='flex flex-row flex-wrap gap-1'>
      <span className={classNames('opacity-25 sm:opacity-100')}>sm</span>
      <span className={classNames('opacity-25 md:opacity-100')}>md</span>
      <span className={classNames('opacity-25 lg:opacity-100')}>lg</span>
      <span className={classNames('opacity-25 xl:opacity-100')}>xl</span>
      <span className={classNames('opacity-25 2xl:opacity-100')}>2xl</span>
    </div>
  ),
};

export const TailwindContainerQuery: Story = {
  render: () => (
    <VerticalSplitGroup>
      <SplitPanel className='flex-1'>
        <div className='@container flex flex-1 flex-row flex-wrap gap-1 border-2 border-dashed border-accent-pink/50 p-2'>
          <span className={classNames('opacity-25 @4xs:opacity-100')}>4xs</span>
          <span className={classNames('opacity-25 @3xs:opacity-100')}>3xs</span>
          <span className={classNames('opacity-25 @2xs:opacity-100')}>2xs</span>
          <span className={classNames('opacity-25 @xs:opacity-100')}>xs</span>
          <span className={classNames('opacity-25 @sm:opacity-100')}>sm</span>
          <span className={classNames('opacity-25 @md:opacity-100')}>md</span>
          <span className={classNames('opacity-25 @lg:opacity-100')}>lg</span>
          <span className={classNames('opacity-25 @xl:opacity-100')}>xl</span>
          <span className={classNames('opacity-25 @2xl:opacity-100')}>2xl</span>
          <span className={classNames('opacity-25 @3xl:opacity-100')}>3xl</span>
          <span className={classNames('opacity-25 @4xl:opacity-100')}>4xl</span>
          <span className={classNames('opacity-25 @5xl:opacity-100')}>5xl</span>
          <span className={classNames('opacity-25 @6xl:opacity-100')}>6xl</span>
          <span className={classNames('opacity-25 @7xl:opacity-100')}>7xl</span>
        </div>
      </SplitPanel>
      <SplitPanel />
    </VerticalSplitGroup>
  ),
};

function UseBreakpointHookDemo() {
  const [breakpoint, setBreakpoint] = useState(480);
  // `useBreakpoint` accepts a number
  const isArbitraryBreakpoint = useBreakpoint(breakpoint);
  const handleInput = useCallback<React.FormEventHandler<HTMLInputElement>>(
    (e) => {
      setBreakpoint(parseInt(e.currentTarget.value, 10) || 0);
    },
    []
  );
  return (
    <div>
      <div className={isArbitraryBreakpoint ? 'opacity-100' : 'opacity-25'}>
        {`${breakpoint}px breakpoint ${isArbitraryBreakpoint ? 'is satisfied' : 'not satisfied'}`}
      </div>
      <input
        className='mt-2 block w-full'
        type='range'
        defaultValue={breakpoint}
        min={1}
        max={1600}
        onInput={handleInput}
      />
    </div>
  );
}

export const UseBreakpointHook: Story = {
  render: () => <UseBreakpointHookDemo />,
};

function UseBreakpointSizeHookDemo() {
  const isBreakpointSm = useBreakpointSm();
  const isBreakpointMd = useBreakpointMd();
  const isBreakpointLg = useBreakpointLg();
  const isBreakpointXl = useBreakpointXl();
  const isBreakpointXxl = useBreakpointXxl();
  const opacityClassNames = (isBreakpoint: boolean) =>
    classNames(isBreakpoint ? 'opacity-100' : 'opacity-25');
  return (
    <div className='flex flex-row flex-wrap gap-1'>
      <span className={opacityClassNames(isBreakpointSm)}>sm</span>
      <span className={opacityClassNames(isBreakpointMd)}>md</span>
      <span className={opacityClassNames(isBreakpointLg)}>lg</span>
      <span className={opacityClassNames(isBreakpointXl)}>xl</span>
      <span className={opacityClassNames(isBreakpointXxl)}>2xl</span>
    </div>
  );
}

export const UseBreakpointSizeHook: Story = {
  render: () => <UseBreakpointSizeHookDemo />,
};