
import { CLASSIC, SQUARE, HORIZONTAL, TALL, GRAPHIC } from '../../constants/components/tile';
import { SMALL, MEDIUM, LARGE } from '../../constants/sizes';
import { bSmall, bLarge, bXLarge, bMedium } from '../../constants/breakpoints';

const allBreakpoints = [bSmall, bMedium, bLarge, bXLarge].sort((a, b) => a - b);

// All layout settings, determining the number of columns for each breakpoint
// The breakpoints work like a max-width
const layoutSettings = {
    [CLASSIC]: {
        columns: {
            [SMALL.value]: 8,
            [MEDIUM.value]: 6,
            [LARGE.value]: 4
        },
        responsive: [
            {
                breakpoint: bXLarge,
                columns: {
                    [SMALL.value]: 6,
                    [MEDIUM.value]: 6,
                    [LARGE.value]: 4
                }
            },
            {
                breakpoint: bMedium,
                columns: {
                    [SMALL.value]: 4,
                    [MEDIUM.value]: 3,
                    [LARGE.value]: 2
                }
            },
            {
                breakpoint: bSmall,
                columns: {
                    [SMALL.value]: 2,
                    [MEDIUM.value]: 2,
                    [LARGE.value]: 1
                }
            }
        ]
    },
    [SQUARE]: {
        columns: {
            [SMALL.value]: 5,
            [MEDIUM.value]: 4,
            [LARGE.value]: 3
        },
        responsive: [
            {
                breakpoint: bXLarge,
                columns: {
                    [SMALL.value]: 4,
                    [MEDIUM.value]: 3,
                    [LARGE.value]: 3
                }
            },
            {
                breakpoint: bMedium,
                columns: {
                    [SMALL.value]: 2,
                    [MEDIUM.value]: 2,
                    [LARGE.value]: 2
                }
            },
            {
                breakpoint: bSmall,
                columns: {
                    [SMALL.value]: 2,
                    [MEDIUM.value]: 2,
                    [LARGE.value]: 1
                }
            }
        ]
    },
    [HORIZONTAL]: {
        columns: {
            [SMALL.value]: 4,
            [MEDIUM.value]: 3,
            [LARGE.value]: 2
        },
        responsive: [
            {
                breakpoint: bXLarge,
                columns: {
                    [SMALL.value]: 3,
                    [MEDIUM.value]: 3,
                    [LARGE.value]: 2
                }
            },
            {
                breakpoint: bMedium,
                columns: {
                    [SMALL.value]: 2,
                    [MEDIUM.value]: 2,
                    [LARGE.value]: 1
                }
            },
            {
                breakpoint: bSmall,
                columns: {
                    [SMALL.value]: 1,
                    [MEDIUM.value]: 1,
                    [LARGE.value]: 1
                }
            }
        ]
    },
    [TALL]: {
        columns: {
            [SMALL.value]: 6,
            [MEDIUM.value]: 5,
            [LARGE.value]: 3
        },
        responsive: [
            {
                breakpoint: bXLarge,
                columns: {
                    [SMALL.value]: 5,
                    [MEDIUM.value]: 5,
                    [LARGE.value]: 3
                }
            },
            {
                breakpoint: bMedium,
                columns: {
                    [SMALL.value]: 2,
                    [MEDIUM.value]: 2,
                    [LARGE.value]: 2
                }
            },
            {
                breakpoint: bSmall,
                columns: {
                    [SMALL.value]: 2,
                    [MEDIUM.value]: 2,
                    [LARGE.value]: 1
                }
            }
        ]
    },
    [GRAPHIC]: {
        columns: {
            [SMALL.value]: 5,
            [MEDIUM.value]: 4,
            [LARGE.value]: 4
        },
        responsive: [
            {
                breakpoint: bXLarge,
                columns: {
                    [SMALL.value]: 4,
                    [MEDIUM.value]: 3,
                    [LARGE.value]: 3
                }
            },
            {
                breakpoint: bMedium,
                columns: {
                    [SMALL.value]: 3,
                    [MEDIUM.value]: 2,
                    [LARGE.value]: 2
                }
            },
            {
                breakpoint: bSmall,
                columns: {
                    [SMALL.value]: 2,
                    [MEDIUM.value]: 2,
                    [LARGE.value]: 1
                }
            }
        ]
    }
};

export const getReponsiveSettings = (layout, size, nItems, containerWidth = 0) => {
    if (!containerWidth) {
        return {
            columns: 0,
            infinite: false
        };
    }

    // current breakpoint is nearest below current container width
    const activeBreakpoint = allBreakpoints.find(breakpoint => containerWidth < breakpoint);

    // number of slides to display per layout.
    const config = layoutSettings[layout] || layoutSettings[CLASSIC];

    // is there a responsive setting for this breakpoint? Will get nearest setting below breakpoint
    // container is below breakpoint, so this setting is a candidate.
    const responsiveConfig = config.responsive
        && config.responsive.sort((a, b) => a.breakpoint - b.breakpoint).find(
            current => activeBreakpoint <= current.breakpoint
        );

    // default setting is largest width if no breakpoint found
    const currentConfig = responsiveConfig || config;

    const columns = currentConfig.columns[size];
    // for mobile, the total amount of items shown depends on the default largets value for this layout
    const defaultColumns = config.columns[size];
    let maxShown = defaultColumns;
    const unfilledRow = defaultColumns % columns;
    if (unfilledRow) {
        maxShown += columns - unfilledRow;
    }

    return {
        columns,
        maxShown,
        infinite: nItems > columns
    };
};
