import styled from 'styled-components';
import React from 'react';
import { sizeStyle, fontStyle, FontStyle, SizeStyle, ElementProps } from '../generator';
import { primaryTxtColor, invertedTxtColor } from '../../config';

export interface HeaderProps extends FontStyle, SizeStyle, ElementProps{
    children? : React.ReactNode;
    inverted? : boolean;
}

const HeaderLayout = styled.h1<{ styleProps: SizeStyle, fontProps: FontStyle }>`
${props => sizeStyle(props.styleProps)}
${props=> fontStyle(props.fontProps, false)}`;

export const Header = (props: HeaderProps) => {
    const { children, style, className, onClick } = props;

    const { width, height, max, padding, margin, minWidth, inverted } = props;
    const styleProps : SizeStyle = { 
        width, 
        height, 
        max, 
        padding, 
        margin, 
        minWidth 
    };
    const defaultColor =  inverted? invertedTxtColor : primaryTxtColor ;
    const { size, color = defaultColor, bold, textAlign, placeSelf, textShadow } = props;
    const fontProps : FontStyle = {
        size: typeof size === 'number'? (6 - size)/2 + "rem": size? size : "1.5em",
        color, 
        bold, 
        textAlign,  
        placeSelf, 
        textShadow
    };

    return (
    <HeaderLayout 
        styleProps={styleProps}  
        fontProps={fontProps} 
        onClick={onClick} 
        className={className} 
        style={style}
    > 
        {children} 
    </HeaderLayout>
    );
}