import React, {useRef} from 'react';

function Row(props) {
    const {gutter = 0, bottom = 0, className} = props;

    return (
        <div {...props} className={`row ${className ? className : ''} `}>
            {React.Children.map(props.children, item => item)}
            <style jsx>{`
              .row {
                margin-left: ${gutter / -2}px;
                margin-right: ${gutter / -2}px;
                position: relative;
              }

              .row:before,
              .row:after {
                content: " ";
                display: table;
              }

              .row:after {
                clear: both;
                visibility: hidden;
                font-size: 0;
                height: 0;
              }

              .row > :global(.col) {
                padding-left: ${gutter / 2}px;
                padding-right: ${gutter / 2}px;
                display: block;
                float: left;
                height: 100%;
                padding-bottom: ${bottom}px;
              }
            `}</style>
            <style jsx global>{`
              .height-100 {
                height: 100%
              }

              .height-75 {
                height: 75%
              }

              .height-70 {
                height: 70%
              }

              .height-50 {
                height: 50%
              }

              .height-55 {
                height: 55%
              }

              .height-60 {
                height: 60%
              }

              .height-45 {
                height: 45%
              }

              .height-40 {
                height: 40%
              }

              .height-35 {
                height: 35%
              }

              .height-30 {
                height: 30%
              }

              .col-0 {
                display: none
              }

              .col-1 {
                width: 4.166666666666666%
              }

              .col-2 {
                width: 8.333333333333332%
              }

              .col-3 {
                width: 12.5%
              }

              .col-4 {
                width: 16.666666666666664%
              }

              .col-4-2 {
                width: 20%
              }

              .col-5 {
                width: 20.833333333333336%
              }

              .col-6 {
                width: 25%
              }

              .col-7 {
                width: 29.166666666666668%
              }

              .col-8 {
                width: 33.33333333333333%
              }

              .col-9 {
                width: 37.5%
              }

              .col-10 {
                width: 41.66666666666667%
              }

              .col-11 {
                width: 45.83333333333333%
              }

              .col-12 {
                width: 50%
              }

              .col-13 {
                width: 54.166666666666664%
              }

              .col-14 {
                width: 58.333333333333336%
              }

              .col-15 {
                width: 62.5%
              }

              .col-16 {
                width: 66.66666666666666%
              }

              .col-17 {
                width: 70.83333333333334%
              }

              .col-18 {
                width: 75%
              }

              .col-19 {
                width: 79.16666666666666%
              }

              .col-20 {
                width: 83.33333333333334%
              }

              .col-21 {
                width: 87.5%
              }

              .col-22 {
                width: 91.66666666666666%
              }

              .col-23 {
                width: 95.83333333333334%
              }

              .col-24 {
                width: 100%
              }
            `}</style>
        </div>
    );
}

function Col(props) {
    const {span = 24, bottom = 0, className, style = {}} = props;

    return (
        <div className={`col ${span && 'col-' + span} ${className ? className : ''} `} style={style}>
            <div className='height-100'>
                {React.Children.map(props.children, item => item)}
            </div>
            <style jsx>{`
              .col {
                padding-bottom: ${bottom}px !important;
                position: relative;
              }
            `}</style>
        </div>
    );
}

Row.Col = Col;

export default Row;