import type { Meta, StoryObj } from '@storybook/react'
import { Typography } from '../../components'
import { viewports } from '../../utils/viewports'
import { useIsMobile } from './useIsMobile'
import { useIsTablet } from './useIsTablet'
import { useViewport } from './useViewport'

const meta: Meta = {
  title: 'Hooks/MediaQueries',
}

export default meta

const ViewportVisualTest = () => {
  const viewport = useViewport()
  return (
    <div className="p-8 text-center">
      <Typography variant="h3">Current Viewport: {viewport}</Typography>
      <Typography variant="body-s" className="mt-2 text-muted-foreground">
        Resize the window or use Storybook viewport toolbar to change.
      </Typography>
    </div>
  )
}

const IsMobileVisualTest = () => {
  const isMobile = useIsMobile()
  return (
    <div className="p-8 text-center">
      <Typography variant="h3">
        Is Mobile: {isMobile ? 'TRUE (Mobile)' : 'FALSE (Tablet and Desktop)'}
      </Typography>
      <Typography variant="body-s" className="mt-2 text-muted-foreground">
        This should be TRUE only below 768px.
      </Typography>
    </div>
  )
}

const IsTabletVisualTest = () => {
  const isTablet = useIsTablet()
  return (
    <div className="p-8 text-center">
      <Typography variant="h3">
        Is Tablet: {isTablet ? 'TRUE (Tablet/Mobile)' : 'FALSE (Desktop)'}
      </Typography>
      <Typography variant="body-s" className="mt-2 text-muted-foreground">
        This should be TRUE below 996px (includes tablets and mobile).
      </Typography>
    </div>
  )
}

export const UseViewport: StoryObj = {
  render: () => <ViewportVisualTest />,
  parameters: {
    chromatic: { ...viewports.all },
  },
}

export const UseIsMobile: StoryObj = {
  render: () => <IsMobileVisualTest />,
  parameters: {
    chromatic: { viewports: [viewports.XS, viewports.M] },
  },
}

export const UseIsTablet: StoryObj = {
  render: () => <IsTabletVisualTest />,
  parameters: {
    chromatic: { viewports: [viewports.XS, viewports.M, viewports.XL] },
  },
}