/** @jsx jsx */
import * as React from "react";
import { jsx } from '@emotion/core'
import css from "@styled-system/css";

// ButtonComposer

type ButtonCompositionType = 'segmented' | 'gap'    
export interface ButtonComposerProps {
    children: React.ReactNode;
    compositionType: ButtonCompositionType
}

interface StyledButtonComposerProps {
    compositionType: ButtonCompositionType;
}

const getCss = (compositionType: ButtonCompositionType): any => {
    const borderSize = 1
    switch (compositionType) {
        case 'gap':
            return {
                "button + button": {
                    marginLeft: 4
                }
            }
        case 'segmented': 
            return {
                "button:first-of-type": {
                    borderTopLeftRadius: borderSize,
                    borderBottomLeftRadius: borderSize 
                },
                "button:last-of-type": {
                    borderTopRightRadius: borderSize,
                    borderBottomRightRadius: borderSize 
                } 
            } 
        default:
            break;
    }
}
const ButtonComposer = ({
    children,
    compositionType
}: ButtonComposerProps) => {
    return (
        <div css={css({
                ...getCss(compositionType),
            })} >
            { children }
        </div>
    );
};
export default ButtonComposer;