import React from 'react';
import styled, { css } from 'styled-components';
import { BreakpointMedia } from '../../../tokens';
import type { GlobalProps } from '@lendi-ui/commons/utils';

// Might need to consider adding 'auto' as a width option
type FourColumns = '1' | '2' | '3' | '4' | 'auto';
type TwelveColumns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';

export interface GridItemProps extends GlobalProps {
  children: React.ReactNode;
  /**
   * With mobile first approach, each grid item defaults to 100% width. Only need to use xs prop to change this for screens less than 576px
   */
  xs?: FourColumns;
  /**
   * Column size at small and up
   */
  sm?: TwelveColumns;
  /**
   * Column size at medium and up
   */
  md?: TwelveColumns;
  /**
   * Column size at large and up
   */
  lg?: TwelveColumns;
  /**
   * Column size at extra large and up
   */
  xl?: TwelveColumns;
  className?: string;
}

const SmallScreenGrid = '4';
const LargeScreenGrid = '12';

const calculatePercentage = (partial: Omit<TwelveColumns, 'auto'>, total: Omit<TwelveColumns, 'auto'>) =>
  `${(Number(partial) / Number(total)) * 100}%`;

const getWidth = (size: TwelveColumns | undefined, totalColumns: TwelveColumns) => {
  if (!size) return;

  if (size === 'auto') {
    return 'auto';
  } else {
    return calculatePercentage(size, totalColumns);
  }
};

const StyledGridItem = styled.div<GridItemProps>`
  max-width: 100%;
  width: ${({ xs }) => (xs ? getWidth(xs, SmallScreenGrid) : '100%')};
  ${({ xs }) =>
    xs
      ? css`
          flex: 0 0 auto;
        `
      : css`
          flex-shrink: 0;
        `}

  ${BreakpointMedia.sm} {
    flex: 0 0 auto;
    width: ${({ sm }) => getWidth(sm, LargeScreenGrid)};
  }

  ${BreakpointMedia.md} {
    flex: 0 0 auto;
    width: ${({ md }) => getWidth(md, LargeScreenGrid)};
  }

  ${BreakpointMedia.lg} {
    flex: 0 0 auto;
    width: ${({ lg }) => getWidth(lg, LargeScreenGrid)};
  }

  ${BreakpointMedia.xl} {
    flex: 0 0 auto;
    width: ${({ xl }) => getWidth(xl, LargeScreenGrid)};
  }
`;

export const GridItem = ({ children, ...props }: GridItemProps) => {
  return <StyledGridItem {...props}>{children}</StyledGridItem>;
};