// @ts-nocheck
/* eslint-disable */

import { IColumnSC, IRowSC } from './FlexGrid.interface';
import config, { CONTAINER_NAMES, DIMENSION_NAMES } from '@/styles/grid';
import { grid_conf, gutter, responsiveMedia, spaces } from '@/styles/variables';
import styled, { css } from 'styled-components';

export const StyledContainer = styled.div<IRowSC>`
  position: relative;
  width: 100%;
  margin-right: auto;
  margin-left: auto;

  padding-right: ${props => props.$fluid ? "0" : `1rem`};
  padding-left: ${props => props.$fluid ? "0" : `1rem`};
  z-index: 1;


  ${Object.keys(CONTAINER_NAMES)
    .sort((k1, k2) => CONTAINER_NAMES.indexOf(k1) - CONTAINER_NAMES.indexOf(k2))
    .map(k => config(CONTAINER_NAMES).mediaContainer[CONTAINER_NAMES[k]]`
        max-width: ${grid_conf.container[CONTAINER_NAMES[k]]};
    `)}

`

export const StyledRow = styled.div<IRowSC>`
  display: flex;
  flex-direction: ${props => props.$direction ? props.$direction : "row"};
  align-items: ${props => props.$align ? props.$align : "stretch"};
  justify-content: ${props => props.$justify ? props.$justify : "flex-start"};
  flex-wrap: ${props => props.$wrap ? props.$wrap : "wrap"};

  margin-right: -${gutter};
  margin-left: -${gutter};

  height: 100%;

  @media only screen and (max-width: ${responsiveMedia}) {
     ${({ $mobileSpace }) => $mobileSpace && `
      gap: 1.6rem;
    `}
  }
`;

export const StyledColumn = styled.div<IColumnSC>`
  width: 100%;
  padding-right: ${gutter};
  padding-left: ${gutter};

  ${({ $xs }) => $xs && `
    flex-basis: ${100 / grid_conf.gridSize * $xs}%;
    max-width: ${100 / grid_conf.gridSize * $xs}%;
  `}

  ${props => Object.keys(props)
    .filter(k => ~DIMENSION_NAMES.indexOf(k))
    .sort((k1, k2) => DIMENSION_NAMES.indexOf(k1) - DIMENSION_NAMES.indexOf(k2))
    .map(k => config(props).media[k]`${Number.isInteger(props[k])

      // Integer value
      && `
        flex-basis: ${100 / config(props).gridSize * props[k]}%;
        max-width: ${100 / config(props).gridSize * props[k]}%;
      `}
    `)
  }

  @media only screen and (max-width: ${responsiveMedia}) {
    ${({ $mobileOrder }) => $mobileOrder && `
      order: ${$mobileOrder};
    `}

    &:empty{
      display:none
    }
  }
`;