import { component$, useComputed$ } from '@builder.io/qwik';
import { Breakpoints, useBreakpointSignal } from 'qwik-breakpoints';

export default component$(() => {
  const bpSignal = useBreakpointSignal([
    Breakpoints.XSmall,
    Breakpoints.Small,
    Breakpoints.Medium,
    Breakpoints.Large,
    Breakpoints.XLarge,
  ]);

  const currentScreenSize = useComputed$(() => {
    const displayNameMap = new Map([
      [Breakpoints.XSmall, 'XSmall'],
      [Breakpoints.Small, 'Small'],
      [Breakpoints.Medium, 'Medium'],
      [Breakpoints.Large, 'Large'],
      [Breakpoints.XLarge, 'XLarge'],
    ]);
    for (const query of Object.keys(bpSignal.value.breakpoints)) {
      if (bpSignal.value.breakpoints[query]) {
        return displayNameMap.get(query) ?? 'Unknown';
      }
    }
  });

  return (
    <>
      <p>Resize your browser window to see the current screen size change.</p>
      <p>
        The current screen size is <strong>{currentScreenSize.value}</strong>
      </p>
    </>
  );
});

const result = useBreakpointSignal([
  Breakpoints.HandsetLandscape,
  Breakpoints.HandsetPortrait
]);

return {
  result.value.matches
  ? <div>Handset</div>
  : <div>Not Handset</div>
}