/* Мануал */
// Как работает, если задать настройки например, так:
/*
export const options = {
  colInit: 5,
  widthBlocks: ['20%', '20%', '20%', '20%', '20%'],
};

export const breakpoints = {
  1700: {
    col: 4,
    widthBlocks: ['25%', '25%', '25%', '25%'],
  },
  1324: {
    col: 3,
    widthBlocks: ['33%', '33%', '33%'],
  },
  501: {
    col: 2,
    widthBlocks: ['50%', '50%'],
  },
};
*/
// Формирование css происходит сверху вниз по диапазону
// диапазон рассчитывается от options вниз, т.е.
// от 1700 до 1324, работает стиль из блока 1700 и т.д.
// нельзя задать breakpoints ниже 500, так как включается режим телефона
// если мы выходим за верхнюю границу диапазона breakpoints, то включается стиль из options
/* End Мануал */
/* breakpoints */
// порядок задания breakpoints не имеет значения, он автоматом сортируется от меньшего к большему
// автоматически обнуляется отступ у крайнего элемента в строке
/* breakpoints */
/* spaceBetween */
// Если задаем type={TypeUIAdaptive.spaceBetween}, то что бы это работало при указании двух колонок
// задаем либо у обеих колонок размеры в %, в сумме равные 100 или задаем разные типоразмеры т.е. ['10%', '20px']
/* spaceBetween */
import styled, { css } from 'styled-components';
import isEmpty from 'lodash.isempty';
import { BoxBlock } from "../../modules";
import { RESOLUTION, SORTING, INDENTS } from "../../constants";
import { AlignTop, Wrap, JSBetween, HideBlock } from "../../globalStyled";
import { isArrayCount, sorting, arrayMaxField, isAllTrueField, isString } from "../../utils";
import { TypeUIAdaptive, } from './types';
function clearRightStyle() {
    return `
    //margin-right: 0 !important;
  `;
}
function indent() {
    return `
    margin-bottom: 24px;
    margin-right: ${INDENTS.default};
  `;
}
function clearSimbols(str) {
    if (isString(str)) {
        return Number(str.replace(/%/g, ''));
    }
    return 0;
}
function twoColStyle({ widthBlocks, indents, type }) {
    let styles = '';
    const findPercent = isAllTrueField(widthBlocks, (item) => item.indexOf('%') > -1);
    const leftW = widthBlocks[0];
    const rightW = widthBlocks[1];
    const allW = clearSimbols(leftW) + clearSimbols(rightW);
    const spaceBetween = findPercent && type === TypeUIAdaptive.spaceBetween && allW === 100;
    styles += `& > *:nth-child(odd) {
     ${spaceBetween ? '' : `flex: 0 0 ${leftW}`};
     ${indents ? indent() : ''}
    }
  `;
    styles += `& > *:nth-child(even) {
      ${spaceBetween ? '' : `flex: 0 0 ${rightW}`};
      ${clearRightStyle()}
    }
  `;
    return styles;
}
function clearRight(col) {
    return `& > *:nth-child(${col}n + ${col}) {
      ${clearRightStyle()}
    }
  `;
}
function defaultWrapper({ options, breakpoints, indents, type }) {
    let styles = '';
    const { widthBlocks, hidden, stretch } = options;
    const { mobile, desktop } = hidden || {};
    const { out: stretchOut } = stretch || {};
    const col = isArrayCount(widthBlocks);
    const breakD = !isEmpty(breakpoints) ? arrayMaxField(Object.keys(breakpoints)) : 0;
    function widthBlocksStyle(widthBlocks) {
        let styles = '';
        widthBlocks.forEach((item, i) => {
            styles += `& > *:nth-child(${col}n + ${i + 1}) {
          flex: ${item.indexOf('%') > -1 && stretchOut ? `1 1 ${item}` : `0 0 ${item}`};
          ${indents ? indent() : ''}
        }
        
        ${clearRight(col)}
      `;
        });
        return styles;
    }
    function towOrAll(col) {
        return col === 2 ? twoColStyle({ widthBlocks, indents, type }) : widthBlocksStyle(widthBlocks);
    }
    if (col) {
        if (breakD) {
            styles = `@media (min-width: ${breakD}px) {
          ${towOrAll(col)}
        }
      `;
        }
        else {
            return towOrAll(col);
        }
        styles += `@media (max-width: ${RESOLUTION.mobile.phone}) {
      ${Wrap}
  
      & > * {
        flex: 0 0 100% !important;
        width: 100% !important;
        
        ${clearRightStyle()}
        
        padding-left: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 24px;
      }
    };
    `;
    }
    if (mobile) {
        styles += `@media (max-width: ${RESOLUTION.mobile.default}) {
        ${HideBlock}
      };
    `;
    }
    else if (desktop) {
        styles += `@media (min-width: ${RESOLUTION.mobile.default}) {
        ${HideBlock}
      };
    `;
    }
    return css `
    ${styles}
  `;
}
function breakpointsWidth({ widthBlocks, indents, type }) {
    let styles = '';
    const col = isArrayCount(widthBlocks);
    if (col) {
        if (col === 2) {
            styles += twoColStyle({ widthBlocks, indents, type });
        }
        else {
            widthBlocks.forEach((item, i) => {
                styles += `& > *:nth-child(${col}n + ${i + 1}) {
          flex: 0 0 ${item};
          ${indents ? indent() : ''}
        }
        
        ${clearRight(col)}
      `;
            });
        }
    }
    return css `
    ${styles}
  `;
}
function breakpointsWrapper({ breakpoints, indents, type }) {
    let styles = '';
    if (!isEmpty(breakpoints)) {
        const keys = sorting({
            array: Object.keys(breakpoints),
            type: SORTING.number,
        });
        keys.forEach((key, i) => {
            const { col, widthBlocks, hidden } = breakpoints[Number(key)];
            const prevBP = keys[i - 1];
            const minD = `@media (min-width: ${prevBP}px) and (max-width: ${key}px)`;
            const maxW = `@media (max-width: ${key}px)`;
            if (col > 1) {
                if (prevBP) {
                    // Обсуживается стандартный кейс, когда нужна обычная сетка
                    if (isArrayCount(widthBlocks) === col) {
                        styles += `${minD} {
              ${Wrap}
            
              ${breakpointsWidth({ widthBlocks: widthBlocks || [], indents, type })}
            }
          `;
                    }
                    else {
                        // Обсуживается кейс, когда нужно авто определение сетки
                        styles += `${minD} {
              ${Wrap}
            
              & > * {
                flex: 0 0 ${100 / col}% !important;
              }
            }
          `;
                    }
                }
                else {
                    if (isArrayCount(widthBlocks) === col) {
                        styles += `${maxW} {
              ${Wrap}
            
              ${breakpointsWidth({ widthBlocks: widthBlocks || [], indents, type })}
            }
          `;
                    }
                    else {
                        styles += `${maxW} {
              ${Wrap}
            
              & > * {
                flex: 0 0 ${100 / col}% !important;
              }
            }
          `;
                    }
                }
            }
            else {
                styles += `${maxW} {
          ${Wrap}
        
          & > * {
            flex: 0 0 100% !important;
          }
        }
      `;
            }
            if (hidden) {
                if (prevBP) {
                    styles += `${minD} {
              ${HideBlock}
            }
          `;
                }
                else if (col === 1) {
                    styles += `${maxW} {
            ${HideBlock}
          }
          `;
                }
                else {
                    styles += `@media (min-width: ${key}px) {
              ${HideBlock}
            }
          `;
                }
            }
        });
    }
    return css `
    ${styles}
  `;
}
export const DefaultWrapperDiv = styled(BoxBlock) `
  ${AlignTop}
  ${Wrap}
  width: 100%;
  flex: 0 0 100% !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;

  ${(props) => defaultWrapper(props)}

  ${(props) => breakpointsWrapper(props)}
`;
export const SpaceBetweenWrapperDiv = styled(DefaultWrapperDiv) `
  ${JSBetween}
  ${Wrap}
`;
