import styled from '@emotion/styled';
import { useCallback, useId, useMemo } from 'react';

export const Container = styled.div`
  container-type: size;
`;

export const useContainer = (name?: string) => {
  const id = useId();
  const containerName = name ?? id;
  const containerRef = useCallback(
    (element: HTMLElement | null) => {
      if (element) {
        element.style.containerType = 'size';
        element.style.containerName = containerName;
      }
    },
    [containerName]
  );
  return useMemo(
    () => ({
      containerRef,
      containerName,
    }),
    [containerName, containerRef]
  );
};

export const ResponsiveChild = styled.div<{
  containerName: string;
  hideBelowWidth?: number;
  hideBelowHeight?: number;
  showBelowWidth?: number;
  showBelowHeight?: number;
}>`
  display: contents;

  ${({ hideBelowWidth, containerName }) => {
    if (hideBelowWidth) {
      return `@container ${containerName} (max-width: ${hideBelowWidth - 1}px) {
        display: none;
      }`;
    }
    return '';
  }}

  ${({ hideBelowHeight, containerName }) => {
    if (hideBelowHeight) {
      return `@container ${containerName} (max-height: ${hideBelowHeight - 1}px) {
        display: none;
      }`;
    }
    return '';
  }}

  ${({ showBelowWidth, containerName }) => {
    if (showBelowWidth) {
      return `@container ${containerName} (min-width: ${showBelowWidth}px) {
        display: none;
      }`;
    }
    return '';
  }}

  ${({ showBelowHeight, containerName }) => {
    if (showBelowHeight) {
      return `@container ${containerName} (min-height: ${showBelowHeight}px) {
        display: none;
      }`;
    }
    return '';
  }}
`;