import React from 'react';
import styled from 'styled-components';
import { spacing } from '@lendi-ui/commons/utils';
import { useFlexGap, useFlexGapPolyfill } from './polyfill';

declare module 'react' {
  interface CSSProperties {
    '--gap'?: string; // TODO: change to template literal px type once we update TS
  }
}

// reset margin between direct children
// add extra space before headings
const VerticalRhythmWrapper = styled.div<{ align?: 'start' | 'stretch' }>`
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: ${(props) => (props.align === `start` ? `flex-start` : props.align)};

  & > * {
    margin-top: 0;
    margin-bottom: 0;
  }

  & > .lui-title1:not(:first-child),
  & > .lui-title2:not(:first-child),
  & > .lui-subtitle1:not(:first-child),
  & > .lui-subtitle2:not(:first-child) {
    margin-top: ${spacing.xs}px;
  }

  .no-flexbox-gap & {
    gap: initial;
    margin-top: calc(var(--gap) / -2);
    margin-bottom: calc(var(--gap) / -2);

    > * {
      margin-top: calc(var(--gap) / 2);
      margin-bottom: calc(var(--gap) / 2);
    }

    & > .lui-title1:not(:first-child),
    & > .lui-title2:not(:first-child),
    & > .lui-subtitle1:not(:first-child),
    & > .lui-subtitle2:not(:first-child) {
      margin-top: calc(calc(var(--gap) / 2) + ${spacing.xs}px);
    }
  }
`;

// Direct children have margin removed and are spaced out xs
export const VerticalRhythm = ({
  density = 'md',
  align = 'stretch',
  children,
}: {
  density?: 'lg' | 'md' | 'sm';
  align?: 'start' | 'stretch';
  children: any;
}) => {
  useFlexGapPolyfill();
  const isFlexGapSupported = useFlexGap();
  let gap = `${spacing.md}px`;

  if (density === 'sm') {
    gap = `${spacing.sm}px`;
  } else if (density === 'lg') {
    gap = `${spacing.lg}px`;
  }

  const Markup = (
    <VerticalRhythmWrapper className="vertical-rhythm" align={align} style={{ '--gap': gap }}>
      {children}
    </VerticalRhythmWrapper>
  );

  return !isFlexGapSupported ? <div className="flex-gap-polyfill-wrapper">{Markup}</div> : Markup;
};